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

2015年3月15日 18:01 0 件のコメント

Blogger に オリジナルデザイン の "google pulus one(+1)" ボタンを設置する簡単な手順をまとめます。 Googleさんはカウント数を取得する方法を提供していないようなので、 Yahoo! の YQL (Yahoo Query Language) を利用させていただきます。

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

テンプレート の 編集手順

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

    ?
    1
    2
    3
    4
    5
    6
    <header>
      ...
      <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
      ...
    </header>

  2. ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 シェア時に URL と タイトル を埋め込むように作成しています。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
      ...
      <a class='plusone-share-button btn-social' expr:href='"https://plusone.google.com/_/+1/confirm?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>
        <span id='plusonecount'></span>
        <i class='fa fa-google-plus' />
      </a>
      ...
    </b:widget>

  3. bodyの閉じタグ直前に以下のスクリプトを挿入します。 シェア数を取得する処理を行います。 URL は JavaScript で自動取得するので、コードはそのままコピペで動作するはずです。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
      ...
      <script type='text/javascript'>
      (function () {
        var url = '', query = '';
     
        url += window.encodeURI(window.location.href || '');
     
        query += 'SELECT content FROM data.headers WHERE url="https://plusone.google.com/_/+1/fastbutton?hl=ja&url=';
        query += url;
        query += '" and ua="#Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.89 Safari/537.36"';
     
        $.ajax({
          type: 'GET',
          url: 'http://query.yahooapis.com/v1/public/yql',
          dataType: 'xml',
          data: {
            q: query,
            format: 'xml',
            env: 'http://datatables.org/alltables.env',
          },
          success: function (data, textStatus, jqXHR) {
            var content = $(data).find("content").text();
            var match = content.match(/window\.__SSR[\s*]=[\s*]{c:[\s*](\d+)/i);
            var count = (match != null) ? match[1] : 0;
            $(document.getElementById('plusonecount')).text(count);
          }
        });
      })();
      </script>
    </body>

参考記事

関連記事

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！