WordPressにソーシャルSNSボタン（読み込み：非同期）を設置する方法 #WordPress

動機

以前は「WP Social Bookmarking Light」と言うPluginを使ってWordPressで運用しているこのblogにソーシャルSNSボタンを設置していました。
しかし他の方のblogを拝見していて吹き出しが上に表示されているボタンが「高さが揃っていてカッコイイなぁ・・・」と思っていました。

Google先生から「jsを非同期で読み込む様にすればもっとページの表示が速くなるよん。」と言う指摘を受けたの契機に一念発起してソースに自分でコードを埋め込む事でソーシャルSNSボタン（読み込み：非同期）を設置する方式に変更しました。
こんな感じです。

方法

難しい話はアレなんで以下にコードを示します。

１：bodyタグの直後にJavaScriptのコードを設置する

bodyタグの直後（使用しているテーマのファイル「header.php」）に以下のコードを追加します。
—-ここから—-

<?php if (is_single() || is_page()) { ?>
<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.async = true;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=519386921455561";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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

<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>

<?php } ?>

—-ここまで—-
赤字で示した「519386921455561」はこのblog固有のIDです。
ご自分のblogのIDに置き換えてください。
（ご自分のblogページのコードを「右クリック→ソースを表示」で表示して事前に確認しておけば良いと思います。）

私は個別記事のページと固定ページでしかソーシャルSNSボタンを表示しないので他のページで余計な読み込みをしない為の分岐が入れてあります。

<?php if (is_single() || is_page()) { ?>
<?php } ?>

この場所もご自分の都合に合わせて適宜書き直してください。

２：ボタンを表示したい場所にソーシャルSNSボタン表示のコードを設置する

ボタンを設置したい場所（使用しているテーマのファイル「single.php」や「page.php」の任意の場所）に以下のコードを設置します。
—-ここから—-

<!-- ツイートボタン Start -->
<a href="https://twitter.com/share" class="twitter-share-button twitter-count-vertical" data-via="marbee75" data-lang="ja" data-count="vertical">ツイート</a>
<!-- ツイートボタン End -->
<!-- Facebook「いいね！」ボタン Start -->
<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
<!-- Facebook「いいね！」ボタン End -->
<!-- はてなブックマークボタン Start -->
<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="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://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="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<!-- はてなブックマークボタン End -->
<!-- Google+ボタン Start -->
<div class="g-plusone" data-size="tall"></div>
<!-- Google+ボタン End -->

—-ここまで—-
赤字で示した「marbee75」は私のTwitterIDです。
ご自分のIDに書き換えてください。

 

以上です。
調べるのは大変だったけど、こうやってソースを明示しておけば簡単でしょ？(^^)