Blogger に オリジナルデザイン の "share" ボタン を 設置 する 方法

0 件のコメント

Blogger に オリジナルデザイン の Facebook "シェア(share)" ボタンを設置する簡単な手順をまとめます。 (残念ながら Facebook "いいね!(like!)" ボタンはうまくできていません。。)

オリジナルデザインのボタンを作成する場合、ブログテンプレートを直接編集することで作成します。 具体的には、Bloggerの管理ページへログイン後、[テンプレート]-[HTML の 編集]で編集できる ブログテンプレート に対して直接変更を加えます。 以下の手順では、ブログテンプレートのどの部分に対してどのように変更を加えるかを記載しています。

テンプレート の 編集手順

  1. 前提として必要な外部ファイルは jQuery と font-awesome の2種類です。 headerの任意の場所へ以下のタグを挿入します。 font-awesome はアイコン表示だけなので、不要であれば含めなくても問題ありません。 jQuery は非同期にシェア数(いいね含む数)を取得するのに利用しているので必須です。

    <header>
      ...
      <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
      ...
    </header>
    
  2. ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 シェア時に URL と タイトル を埋め込むように作成しています。

    <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
      ...
      <a class='facebook-share-button' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;t=" + data:post.title' target='_blank'>
        <span id='facebookcount'></span>
        <i class='fa fa-facebook' />
      </a>
      ...
    </b:widget>
    
  3. bodyの閉じタグ直前に以下のスクリプトを挿入します。 シェア数(いいね含む数)を取得する処理を行います。 URL は JavaScript で自動取得するので、コードはそのままコピペで動作するはずです。

      ...
      <script type='text/javascript'>
      (function () {
        var url = '';
    
        url += 'http://graph.facebook.com/?id=';
        url += window.encodeURI(window.location.href || '');
    
        $.ajax({
          url: url,
          dataType: 'jsonp',
          success: function(data) {
            $(document.getElementById('facebookcount')).text(data.shares || 0);
          }
        });
      })();
      </script>
    </body>
    

参考記事

関連記事