Blogger に ソーシャルボタン を 設置 する 方法

2 件のコメント

Blogger に twitter の 「ツイート」、facebook の 「いいね」、google の 「+1」、はてなブックマーク の 「B!」、Pocket の 「Pocket」 ボタン 等、 俗に言う ソーシャルボタン を まとめて 一気 に設置する方法をここでは載せます。 いろいろと方法はあるかと思いますが・・・ここでは、 Blogger の テンプレート を編集して実現する方法です。

([2015/03/15] 本記事ではそれぞれのSNS提供モジュールを利用しています。オリジナルデザインにしたい場合、"Blooger に オリジナルデザイン の ソーシャルボタン を設置する方法" をご参照ください。)

ソーシャルボタン 設置手順

  1. メニュー から [テンプレート] を選択し、 [HTML の編集] を開きます。

  2. id が shareButtons の b:includable タグ の 兄弟 に、以下の タグ を コピペ します。

    挿入場所

    ソースコード

    <b:includable id='shareButtons2' var='post'>
      <!-- twitter -->
      <span class='goog-inline-block sharebutton_twitter'>
        <a class='twitter-share-button' data-lang='ja' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>ツイート</a>
      </span>
      <!-- facebook -->
      <span class='goog-inline-block sharebutton_facebook'>
        <div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='450' expr:data-href='data:post.url'/>
      </span>
      <!-- google +1 -->
      <span class='goog-inline-block sharebutton_plusone'>
        <div class='g-plusone' data-size='medium' expr:data-href='data:post.url' expr:data-title='data:post.title'/>
      </span>
      <!-- hatena blog -->
      <span class='goog-inline-block sharebutton_hatebu'>
        <a class='hatena-bookmark-button' data-hatena-bookmark-lang='ja' data-hatena-bookmark-layout='standard-balloon' expr:href='data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only@2x.png' style='border: none;' width='20'/></a>
      </span>
      <!-- pocket -->
      <span class='goog-inline-block sharebutton_pocket'>
        <a class='pocket-btn' data-lang='en' data-pocket-count='horizontal' data-pocket-label='pocket'/>
      </span>
    </b:includable>
    
  3. head タグ の 任意の位置 に、以下の タグ を コピペ します。

    挿入場所

    ソースコード

    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
    
  4. body タグ の 末尾ギリギリ に、以下の タグ(コード) を コピペ します。
    ※ このソースコード は 元の ソースコード に対して少し修正を加えています。うまく動かない場合、コメント いただけると嬉しいです。

    挿入場所

    ソースコード

    <!-- twitter -->
    <script type='text/javascript'>
    $(document).ready(function () {!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);});
    </script>
    <!-- facebook -->
    <div id='fb-root'/>
    <script type='text/javascript'>
    $(document).ready(function () {
    (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 = &quot;//connect.facebook.net/ja_JP/all.js#xfbml=1&quot;;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
    });
    </script>
    <!-- google +1 -->
    <script type='text/javascript'>
    $(document).ready(function () {
      window.___gcfg = {lang: &#39;ja&#39;};
    
      (function() {
        var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
        po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
        var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
      })();
    });
    </script>
    <!-- hatena bookmark -->
    <script type='text/javascript'>
    $(document).ready(function(){
      // modify url.
    var hatenaurl = &#39;http://b.hatena.ne.jp/entry/&#39;;
    var anc = document.body.getElementsByTagName(&#39;a&#39;);
    for (var i = anc.length; i--;) {
      if ((anc[i].className || &#39;&#39;).indexOf(&#39;hatena-bookmark-button&#39;) &gt;= 0) { anc[i].href = hatenaurl + anc[i].href; }
    }
      // load api script
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://b.st-hatena.com/js/bookmark_button.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;hatebu-wjs&#39;);
    });
    </script>
    <!-- pocket -->
    <script type='text/javascript'>
    $(document).ready(function () {
    !function(d,i){if(!d.getElementById(i)){var j=d.createElement(&quot;script&quot;);j.id=i;j.src=&quot;https://widgets.getpocket.com/v1/j/btn.js?v=1&quot;;var w=d.getElementById(i);d.body.appendChild(j);}}(document,&quot;pocket-btn-js&quot;);
    });
    </script>
    
  5. ソーシャルボタン を 表示したい位置 に、以下の コード を コピペ します。

    挿入場所

    ソースコード

    <b:include data='post' name='shareButtons2'/>
    

以上で作業は完了です。 実際に プレビュー または ブログページ を開いて確認してください。 おそらく、ちゃんと表示できているはずです。 (・・・この ブログ で使っている コード そのままなので、動く ハズ。。)

解説

ソーシャルボタン の 元サイト で書かれていることに対して少し手を加えた部分に関する説明です。

やりたかったことは「ブログの表示をできるだけ速くしたい」につきます。 ポイントは「スクリプトの遅延実行」です。 具体的には、次の2点を行っています。

  • 実行するスクリプトを できるだけ HTML の後ろへ配置
  • $(document).ready() で ドキュメント描画 後にスクリプト処理

まぁ、微々たる効果かもしれませんが・・・ facebook がたまに遅いので、そんなときは効果がハッキリと出たりします。

  1. はじめまして!

    こちらのやり方でモバイル版には表示できたのですが、
    WEB版には表示されません。

    なぜですか?

    返信削除
    返信
    1. masa Yama さん

      blogger標準のテンプレートはPC表示用とモバイル表示用で2種類を切り替えるような実装になっているため、
      PC表示用とモバイル表示用の2か所にソーシャルボタンを表示するタグを埋め込む必要があります。

      どのようなテンプレートになっているか分からないため具体的には判断いたしかねますが…
      おそらく <b:include id='post'> と <b:include id='mobile-post'> が
      それぞれPC表示用とモバイル表示用として存在していると思います。
      それぞれの要素の中の表示したい場所へ
      ソーシャルボタン表示用のタグ <b:include data='post' name='shareButtons2'/> を
      記載するとうまく表示できると思います。

      今回のご質問の場合だと <b:include id='post'> 以下に
      ソーシャルボタン表示タグ <b:include data='post' name='shareButton2' /> の記載がないため
      PC表示で表示されないのだと思います。
      ですので、<b:include id='post'> ~ </b:include> の間で表示したい個所に
      ソーシャルボタン表示タグを記載いただければPCでも表示できるようになると思います。

      ご確認のほどよろしくお願いいたします。

      削除