【プラグイン完全未使用】SNSシェアボタンをHTMLとCSSのみで設置【WordPress】

2019年7月30日2019年8月3日

1. きっかけ
2. 本コードによるシェアボタンの特徴
3. シェアボタンのコードと設置方法
4. HTML
5. CSS
6. 表示例

きっかけ

これまでSNSシェアボタンは「WordPress Share Buttons Plugin – AddThis」というプラグインに頼ってました。

このプラグインは、

Facebook、Twitter、Line、pocket、pinterestなどの海外大手SNSだけでなく、はてなブックマークも追加できる。
横に細長く、小さめのシェアボタンのデザインがある。

という点で気に入っていたのですが、結構重いプラグインでした。

「プラグインなし、シェアボタン」で検索すると、PHP・CSS・HTML・ソーシャルアイコンのプラグインを使った方法がヒットします。

今回、PHPとソーシャルアイコンを使用せずに、CSSとHTMLのみでSNSシェアボタンを設置してみました。

本コードによるシェアボタンの特徴

HTMLとCSSのみで作成
PHP、ソーシャルアイコンを使わない
<a href>タグ中でjavascriptを実行
シェアするページのURLやページタイトルを自動取得
プラグインより高速（AddThisと比べて最大時10点ほど上がった）
シェア数はカウントできない
横長のシンプルなデザイン

シェアボタンのコードと設置方法

HTML

記述する場所：
「外観」→「カスタマイズ」 → 「ウィジェット」→ シェアボタンを設置したい場所 → ウィジェットを追加 →「カスタムHTML」

<div class="button-area">
<div class="button-area-title">この記事をシェアする</div>
<ul>
<li class="facebook">
<a href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">
<i class="fa fa-facebook"></i></a></li>

<li class="twitter">
<a href="javascript:window.open('http://twitter.com/share?text='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">
<i class="fa fa-twitter"></i></a></li>

<li class="hatena">
<a href="javascript:window.open('http://b.hatena.ne.jp/entry/'+encodeURIComponent(location.href),'sharewindow','width=950, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">
<i class="fa fa-hatena"></i></a></li>

<li class="line">
<a href="javascript:window.open('http://line.me/R/msg/text/?'+encodeURIComponent(document.title)+'%20'+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">
<i class="fa fa-line"></i></a></li>

<li class="pocket">
<a href="javascript:window.open('https://getpocket.com/edit?url='+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">
<i class="fa fa-pocket"></i></a></li>
</ul>
</div>

CSS

記述する場所：「外観」→「カスタマイズ」 → 「追加CSS」

/*---SNSシェアボタン---*/
/* ボタン上の文字 */
.fa-twitter:before, .fa-hatena:before, .fa-line:before, .fa-pocket:before
{
	font-family: helvetica neue,helvetica,arial,sans-serif;
	font-weight: bold;
	font-size:14px
}
.fa-facebook:before {
	content: "f";
	font-family: Verdana;
	font-weight: bold
}
.fa-twitter:before {
  content: "twitter";}
.fa-hatena:before {
	content: "B!";
	font-family: Verdana;
}
.fa-line:before {
	content: "Line";
}
.fa-pocket:before {
	content: "pocket";
}

/* ボタン表示位置の調整 */
.button-area {
  text-align: center;
  margin-top:15px;
}

/* タイトルの表示設定 */
.button-area-title {
  text-align: center;
  padding:.7em;
}

/* ボタンブロックのデザイン */
.button-area li a {
  padding: 2px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 4px; 
}

/* SNSごとの背景色 */
.twitter a {
	background-color: #55acee;
}
.facebook a{
	background-color: #3b5998;
}
.hatena a{
	background-color: #008fde;
}
.line a{
	background-color: #1dcd00;
}
.pocket a{
	background-color: #ea5a6c;
}

/* リスト「・」の削除 */
.button-area ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ボタン幅と余白の設定 */
.button-area li {
  float: left;
  width: 19%;
  margin: 0 .3%;
}

.button-area  ul:after {
  display: block;
  clear: both;
}

/* ボタンにカーソルを合わせた時の表示設定 */
.button-area li a:hover {
	-ms-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}