【コピペ可】WordPressにプラグインなしで「いいね」などSNSボタンを表示する

WordPressには各種SNSボタンを表示するプラグインは多数ありますが、利用数の多い人気プラグインですら自前ドメインからリダイレクトを挟んだり怪しい挙動をするのでプラグイン無しで実装する方法を紹介します。

採用しているボタンは以下4つ。

• Facebookのいいねボタン
• Twitterのツイートボタン
• はてなブックマークの登録ボタン
• LINEのいいねボタン

PHPコードからCSSまで、FacebookのappIdが必要な箇所以外はコピペだけで扱えるようまとめました。

なお2017年9月現在の各SNS公式仕様で書いていますが、仕様変更により利用できなくなる可能性もあるのでご了承ください。

FacebookのappIdを取得する

Facebookページ、アプリケーションの作成方法は省きます。それらをすでに作っている前提とします。

https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP

こちらにアクセスして「いいね！ボタン構成ツール」の「コードを取得」ボタンを押します。

表示されたウィンドウのStep1でアプリを設定すると、Step2のコードのappIdが変わります。このappidを記録しておいてください。

function.php へコードを書く

以下コード7行目、appIdの ***** の箇所を先に取得したappIdに置き換え、function.phpへ追記します。

function snsbuttons() { ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10&appId=*****";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<ul class="snsbuttons">
  <li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div></li>
  <li><a href="https://twitter.com/share" class="twitter-share-button"> </a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
  <li><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
  <li><div class="line-it-button" data-lang="ja" data-type="like" data-url="<?php the_permalink(); ?>" style="display: none;"></div><script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script></li>
</ul>
<?php }

以上で snsbuttons() 関数が作成されます。

なお仕様としてLINEを除きシェア数は表示させていません（LINEは必ず表示されるため）
必要に応じてオプションを書き換えてください。

CSS

並びを整えるためのCSSです。サイトに合わせて適宜変更してください。

. snsbuttons{
  height:20px;
  margin:60px 0;
  padding:0;
  text-align:center;
}
. snsbuttons li{
  display:inline-block;
  height:20px;
  list-style:none;
}
. snsbuttons .fb_iframe_widget>span{
  vertical-align:baseline !important;
}

ボタンを表示する

single.php でも footer.php でも、テーマファイルの表示させたい箇所に以下のコードを入れます。

snsbuttons();

以上で完了です。