SNSボタンを遅延読み込みで設置【WordPress】

本記事で導入すると、上記のようになります。

参考にしたサイト

・2013/11/11 :WordPressの表示を劇的に速くする！jQuery/JavaScriptの高速化テクニック | Find Job ! Startup
・2013.09.02 :Webサイト高速化のためのWebフォントとソーシャルボタンを遅延読み込みさせるすべらない話 | cherry-pick BLOG

１つ目の｢3.SNSボタンを遅延読み込みさせ体感速度を改善｣ソースを少し変更することで対応しました。出所はもしかして２つめあたりなのかなぁと思います。

さらに、ソーシャルボタンのhtmlの追加処理と、TwitterとPocketのボタンを表示のためのJavaScriptの読み込みを分けて、後者をボタンの表示後に読み込み無用にしています。
TwitterとPocketのボタンは、先にボタン表示のhtmlがないと読み込んだJavaScriptが正しく認識してくれないためです。ページ全体でボタンが1つだけであれば分けなくてよいのですが、Webサイト全体のソーシャルボタンと記事のソーシャルボタンを同じページに複数表示したいときなど、あとから読み込むボタンが正しく表示されないことがあったので読み込む間隔をあけました。
2013.09.02 :Webサイト高速化のためのWebフォントとソーシャルボタンを遅延読み込みさせるすべらない話 | cherry-pick BLOG

setTimeoutで２つに分けて書かれている理由も書いているので、その可能性は高い気はします。

導入方法とサンプル

<span id="social-btn"></span>

SNSボタンを表示したいところに、上記タグを挿入してください。

#social-btn li {
display: inline-block;
margin: 0 5px;
}

style.cssに上記を追記してください
display: inline-block;は、IE8以降ですが、IE7はもう捨ててもよいと思うのでinline-blockにしています。
IE7対応したい人は、この辺りを変更してください。

<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri().'/js/social_btn.js'; ?>'></script>
<?php if(is_single() ){ ?>
<script>
show_social_btn('#social-btn', '<?php echo rawurlencode(get_permalink()) ?>', "<?php echo rawurlencode(get_the_title('','',0)) ?>","<?php echo rawurlencode(get_bloginfo('name')) ?>",500);
</script>
<?php }?>

1行目にでてくる｢social_btn.js｣は、記事後半で作成するjavascriptファイルです。
上記コードをフッターに追記してください。多くの場合「footer.php」というファイルに追加になるかと思います。

if(is_single() ){}の箇所が、記事の時だけ読みこむという処理ですね。

/* http://www.find-job.net/startup/fjs_wpspeedup */
function show_social_btn(parent, page_url, page_title,site_name,set_time) {
    var btn_fb_sharer, btn_fb_like, btn_twitter, btn_hatena, btn_pocket, btn_google;
    var url,title,time;
    url = page_url ? page_url : document.URL;
    time = set_time ? set_time : 3000;

    page_title = page_title ? page_title : site_name;
    page_title = p_title;

    btn_fb_sharer = "<li class='fb_sharer'><a href='http://www.facebook.com/v2.0/sharer.php?u="+ url +"&amp;t=" + page_title + "  ><img src='/wp-content/themes/xxxx/images/fb_share.png' alt='facebook' title='facebook' /></a></li>";

    btn_fb_like = '<li class="fb_like">'
        + '<iframe src="http://www.facebook.com/v2.0/plugins/like.php?href=' + url + '&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=115&amp;action=like'
        + '&amp;colorscheme=light&amp;locale=ja_JP'
        + '&amp;height=21"'
        + ' scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:60px;" allowTransparency="true">'
        + '</iframe></li>';

    btn_twitter = '<li class="twitter">'
        + '<iframe allowtransparency="true" frameborder="0" scrolling="no"'
        + ' src="http://platform.twitter.com/widgets/tweet_button.html?url=' + url + '&amp;text=' + page_title + encodeURI(' | ')+site_name + '&amp;lang=ja&amp;count=vertical"'
        + ' style="width:70px; height:60px;">'
        + '</iframe></li>' ;

    btn_hatena = '<li class="hatena"><a class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-title="' + decodeURI(page_title) + ' | サイト名" href="http://b.hatena.ne.jp/entry/'+ url +'" title="このエントリーをはてなブックマークに追加">';
    btn_hatena += '<img alt="このエントリーをはてなブックマークに追加" height="20" src="//b.st-hatena.com/images/entry-button/button-only.gif" style="border: none;" width="20" />';
    btn_hatena += '</a></li>';

    btn_pocket =
    '<li class="pocket"><a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="' + url  + '" data-pocket-count="vertical" data-pocket-align="left">Pocket</a></li>'
    + '<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");<\/script>';

    btn_google = '<li class="gplus"><g:plusone size="tall" href="' + url + '"></g:plusone></li>';

    btn_fc2 = '<a href="http://clap.fc2.com/post/xx/?url='+ url+'&title='+page_title + encodeURI(' | ')+site_name+'"   title="web拍手 by FC2"><img src="http://clap.fc2.com/images/button/white/xx?url='+url+'&amp;lang=ja" alt="web拍手 by FC2" style="border:none;" /></a>';

    setTimeout(function() {
        var $j = jQuery;

       // Hatena
       $j(parent).append(btn_hatena);
       !function(d){var j=d.createElement('script');j.src="http://b.st-hatena.com/js/bookmark_button.js";j.charset="utf-8";j.async="async";d.body.appendChild(j);}(document);
        // Facebook_s
      //  $j(parent).append(btn_fb_sharer);

        // Twitter
        $j(parent).append(btn_twitter);

        // Facebook_l
        $j(parent).append(btn_fb_like);

       // Google+
       $j(parent).append(btn_google);
       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);

       // Pocket
       $j(parent).append(btn_pocket);



	//fc2
       //$j(parent).append(btn_fc2);

    })(); }, time);

    setTimeout(function() {
        // Twitter
        !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';js.charset='utf-8';fjs. parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

        // Pocket
        !function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/ btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");

    }, time+1000);

}

テンプレート（テーマ）フォルダに、jsフォルダを作成して、「social_btn.js」というファイル名で上記を保存してください。

表示したくないボタンがあるときは、コメントアウトすると表示されなくなります。
例えば、上記だとFacebookのシエアボタンを表示させてないのですが、
// $j(parent).append(btn_fb_sharer);
のような感じでコメントアウトしています。

social_btn.jsの修正箇所について

・ボタンの形状をボックス型（vertical）にする
・いいね！ボタンは新しいコードにする
あたりを変更しました。

あと、SNSボタン類を追加するのは簡単で、コメントアウトしていますが、FC2拍手などでも追加できます。

【参考】
・いいね！ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります（公式情報） | 編集長ブログ―安田英久 | Web担当者Forum

FacebookのSNSボタンは定期的にバージョンアップするので、それに伴い書き換えが必要なようです。

SNSボタンのカスタムタグ

・Like Button for Web
・Twitterボタン | About
・+1 ボタン - Google+ Platform — Google Developers
・Pocket for Publishers: Pocket Button Documentation
・はてなブックマークボタンの作成・設置について - はてなブックマーク

公式のHPに資料はあるので、それをみるのが一番早いかと思います。
多くの場合、パラメータ（引数）変更で対応できるかと思います。

「ボタンの形状をボックス型（vertical）」もパラメータを書き換えるだけで対応できました。