Blooger に オリジナルデザイン の ソーシャルボタン を設置する方法

2015年3月15日 22:55 0 件のコメント

最近、ウェブマスターツールから「モバイル対応していないと検索ランク下げるよ」的なメールが来て、直後から検索ランクがみるみる下がって困っていました…（気のせいかもしれませんが。。） ちなみに、検索ランクを下げた理由は「モバイルユーザビリティが悪いから」だそうで、具体的には「タップ ターゲット が近すぎるから」だそうです。 致し方ないので重い腰をあげて ソーシャルボタン（facebook の「いいね」、twitter の 「ツイート」等） を押しやすいよう オリジナルデザイン に変更してみました。 ここでは、そのまとめを掲載します。

ちなみに、Google が推奨するボタンサイズ、ボタン間隔は 「タップ ターゲットのサイズを適切に調整する」 に記載されており、まとめると以下のようです。 どちらかを満たしていれば良いようなので、両方を満たして広げすぎる必要はないようです。

推奨される タップサイズ

  • ボタンサイズ（高さ、幅）： 最少7mm(46px)
  • ボタン間隔： 最少5mm(32px)

対象 とする ソーシャルボタン

今回、対象とする ソーシャルボタン は以下のものを行います。 他にも ソーシャルボタン がいろいろ増えていましたが…とりあえずは以下のものだけです。

対象とするソーシャルボタン

  • Facebook 【シェア】
  • Twitter 【ツイート】
  • Google Plus 【+1】
  • はてなブックマーク 【はてぶ】
  • pocket 【pocket】

完成イメージ

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

Blogger に 以下のソーシャルボタンをオリジナルデザインで表示させる手順をまとめます。

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

  2. headerタグ の 子要素に以下の styleタグ をコピペします。 style は 後から好みに変えてもらって構いません。 とりあえず、このスタイルをあてれば フラットデザイン ぽい、完成イメージにあるようなボタンを作ることができます。

    挿入場所

    挿入するコード

    ?
    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
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    <style type='text/css'>
    .socialbutton {
        display: inline-block;
        height: 48px;
        width: 100px;
        margin: 5px;
        text-align: center;
        border-radius: 4px;
        text-decoration: none !important;
    }
     
    .socialbutton-count {
        display: block;
        height: 20px;
        margin: 4px 4px 0 4px;
        line-height: 20px;
        background-color: #ffffff;
        color: #000000;
        border-radius: 4px;
    }
     
    .socialbutton-button {
        display: block;
        height: 24px;
        line-height: 24px;
        color: #ffffff;
    }
     
    .socialbutton-name {
        vertical-align: top;
    }
     
    .twitter-share-button {
        background-color: #55acee;
    }
     
    .twitter-share-button:hover {
        background-color: #4387ba;
    }
     
    .facebook-share-button {
        background-color: #3c568b;
    }
     
    .facebook-share-button:hover {
        background-color: #2a3c61;
    }
     
    .plusone-share-button {
        background-color: #dc4b39;
    }
     
    .plusone-share-button:hover {
        background-color: #c24332;
    }
     
    .hatena-share-button {
        background-color: #00a4de;
    }
     
    .hatena-share-button:hover {
        background-color: #007dab;
    }
     
    .pocket-share-button {
        background-color: #ee4056;
    }
     
    .pocket-share-button:hover {
        background-color: #ba3244;
    }
    </style>

  3. <b:widget id='Blog1' type='Blog'> の子要素で id が shareButtons の b:includable タグ の 兄弟 に、以下の タグ を コピペ します。

    挿入場所

    挿入するコード

    ?
    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
    31
    32
    33
    34
    35
    36
    37
    <b:includable id='shareButtons3' var='post'>
      <!-- twitter -->
      <span class='goog-inline-block sharebutton_twitter'>
        <a class='twitter-share-button socialbutton' expr:href='"https://twitter.com/share?url=" + data:post.url + "&amp;text=" + data:post.title' target='_blank'>
          <span id='tweetcount' class='socialbutton-count'/>
          <span class='socialbutton-button'>tweet</span>
        </a>
      </span>
      <!-- facebook -->
      <span class='goog-inline-block sharebutton_facebook'>
        <a class='facebook-share-button socialbutton' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url + "&amp;t=" + data:post.title' target='_blank'>
          <span id='facebookcount' class='socialbutton-count'/>
          <span class='socialbutton-button'>share</span>
        </a>
      </span>
      <!-- google +1 -->
      <span class='goog-inline-block sharebutton_plusone'>
        <a class='plusone-share-button socialbutton' expr:href='"https://plusone.google.com/_/+1/confirm?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>
          <span id='plusonecount' class='socialbutton-count'/>
          <span class='socialbutton-button'>+1</span>
        </a>
      </span>
      <!-- hatena blog -->
      <span class='goog-inline-block sharebutton_hatebu'>
        <a class='hatena-share-button socialbutton' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target='_blank'>
          <span id='hatenacount' class='socialbutton-count'></span>
          <span class='socialbutton-button'>はてぶ</span>
        </a>
      </span>
      <!-- pocket -->
      <span class='goog-inline-block sharebutton_pocket'>
        <a class='pocket-share-button socialbutton' expr:href='"https://getpocket.com/edit?url=" + data:post.url' target='_blank'>
          <span id='pocketcount' class='socialbutton-count'></span>
          <span class='socialbutton-button'>pocket</span>
        </a>
      </span>
    </b:includable>

  4. bodyタグ の 末尾ギリギリ に、以下の scriptタグ（コード） を コピペ します。 非同期通信に jQuery を利用しているので、最初に jQuery を読み込むよう記載していますが、すでに別の場所で読み込んでいれば必要はありません。 "末尾ギリギリ"…と記載はしましたが、本当に最後に記載する必要はなく、末尾にあるスクリプトの塊の中に混じっていれば OK です。

    挿入場所

    挿入するコード

    ?
    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
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function () {
        var url = '', href = '', query = '', location = null;
     
        // 現在のクエリパラメータを含まないURLを取得
        location = window.location;
        href = location.href.substr(0, location.href.length - location.search.length - location.hash.length);
     
        // ツイート数を取得
        url = '';
        url += 'http://urls.api.twitter.com/1/urls/count.json?url=';
        url += window.encodeURI(href);
        $.ajax({
            url: url,
            dataType: 'jsonp',
            success: function (data) {
                $(document.getElementById('tweetcount')).text(data.count || 0);
            }
        });
     
        // Facebookいいね数を取得
        url = '';
        url += 'http://graph.facebook.com/?id=';
        url += window.encodeURI(href);
        $.ajax({
            url: url,
            dataType: 'jsonp',
            success: function (data) {
                $(document.getElementById('facebookcount')).text(data.shares || 0);
            }
        });
     
        // google +1 数を取得
        url = '';
        url += window.encodeURI(href);
        query = '';
        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.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 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);
            }
        });
     
        // はてぶ数を取得
        url = '';
        url += 'http://api.b.st-hatena.com/entry.count?url=';
        url += window.encodeURI(href);
        $.ajax({
            url: url,
            dataType: 'jsonp',
            success: function (data, textStatus, jqXHR) {
                $(document.getElementById('hatenacount')).text(data || 0);
            }
        });
     
        // pocket数を取得
        url = '';
        url += window.encodeURI(href);
        query = '';
        query += 'SELECT content FROM data.headers WHERE url="https://widgets.getpocket.com/v1/button?label=pocket&count=vertical&v=1&url=';
        query += url;
        query += '" and ua="#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 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 = jQuery(data).find("content").text();
                var match = content.match(/<em id="cnt">(\d+)<\/em>/i);
                var count = (match != null) ? match[1] : 0;
                $(document.getElementById('pocketcount')).text(count);
            }
        });
     
        // クリックイベント登録
        $('.socialbutton').on('click', function (event) {
            event.preventDefault();
            window.open($(this).attr('href'), 'socialwindow', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes');
        });
    });
    </script>

  5. ソーシャルボタン を 表示したい位置 に、以下の コード を コピペ します。

    挿入場所(例)

    挿入するコード

    ?
    1
    <b:include data='post' name='shareButtons3'/>

以上で設置作業は完了です。 いよいよ、保存してプレビュー！！ きっとうまくいっている…ハズです。 正常に動作確認が終われば、後は好みなようにスタイルを変更していけばよいかと思います。

おまけ

今回、上記サンプルではアイコンがありません。 というより、「はてぶ」と「pocket」に関しては font-awesome にアイコンがないため、手軽に実装できませんでした。。 仕方がないので、画像を作成して CSSスプライト を実装してみました。 以下に CSSスプライト用 の 画像 と スタイルシート を掲載します。 ご自由にお使いください。

CSSスプライト用 画像

CSSスプライト用 スタイルシート

?
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
31
32
33
34
35
.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}
 
.sprite-facebook {
    width: 14px;
    height: 14px;
    background-position: -5px -5px;
}
 
.sprite-google-plus {
    width: 13px;
    height: 14px;
    background-position: -5px -29px;
}
 
.sprite-hatebu {
    width: 17px;
    height: 14px;
    background-position: -5px -53px;
}
 
.sprite-pocket {
    width: 16px;
    height: 14px;
    background-position: -5px -77px;
}
 
.sprite-twitter {
    width: 17px;
    height: 14px;
    background-position: -5px -101px;
}

関連記事

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