共通の設定など

それぞれの 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>