WordPress で運営しているサイトに、Facebook の「いいね!」やコメント欄、Twitter の「ツイート」などを追加する場合、プラグインを使わずに直書きしてしまった方が何かと幸せになれます。

WordPress には「WP Social Bookmarking Light」という、ソーシャルボタンを一括で追加できるプラグインがあります。日本ではあまり使わないものが多く重いことや、Facebook の仕様が頻繁に変わるので、プラグインのアップデートが行われるまでに不具合が発生してしまう問題があります。

共通の設定など

それぞれの JavaScript は、footer.php の </body> 前にまとめて書いておくとスマートですね。

WordPress で、ページの URL を取得するタグは <?php the_permalink();?>、タイトルを取得するタグは <?php the_title();?> です。必要に応じてコードを書き換えていきます。

Facebookの「いいね!」ボタンとコメント欄

Social Plugins – Facebook開発者」からコードを取得します。

footer.php に追加

<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/all.js#xfbml=1&appId=○○";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

header.php に追加

<meta property="fb:admins" content="○○" />
<meta property="fb:app_id" content="○○"/>

loop-single.php に追加

「いいね!」ボタンを設置したい場所に以下を書きます。

<div class="fb-like" data-href="http://www.○○.com<?php the_permalink(); ?>" data-send="true" data-width="○○" data-show-faces="true"></div>

Facebook コメントを設置したい場所に以下を書きます。

<div class="fb-comments" data-href="http://www.○○.com<?php the_permalink(); ?>" data-num-posts="5" data-width="○○"></div>

Twitterの「ツイート」ボタン

Twitterボタン」からコードを取得します。

footer.php に追加

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

loop-single.php に追加

<a href="https://twitter.com/share" class="twitter-share-button" data-via="○○" data-lang="ja" data-related="○○">ツイート</a>

はてブの「Bookmark」ボタン

はてなブックマークボタンの作成・設置について」からコードを取得します。

footer.php に追加

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

loop-single.php に追加

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title();?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Google+の「+1」ボタン

+1 Your Website – Google」からコードを取得します。

footer.php に追加

<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

loop-single.php に追加

<g:plusone size="medium"></g:plusone>

こちらの関連記事もあわせてどうぞ!