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

Blogger に オリジナルデザイン の "はてぶ(はてなブックマーク)" ボタンを設置する簡単な手順をまとめます。

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

テンプレート の 編集手順

1. ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 ブックマーク時のに URL を指定するよう作成しています。

   <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
     ...
     <a class='hatebu-share-button btn-social' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target='_blank'>
       <span id='hatenacount'></span>
       はてな
     </a>
     ...
   </b:widget>
   

2. bodyの閉じタグ直前に以下のスクリプトを挿入します。 前提として必要な外部ファイルは jQuery のみです。 jQueryを利用してブックマーク数を取得する処理を行います。 URL は JavaScript で自動取得するので、コードはそのままコピペで動作するはずです。

     ...
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
     <script type='text/javascript'>
     (function (id) {
       var url = '';
   
       url += 'http://api.b.st-hatena.com/entry.count?url=';
       url += window.encodeURI(window.location.href || '');
   
       $.ajax({
         url: url,
         dataType: 'jsonp',
         success: function(data, textStatus, jqXHR) {
           $(document.getElementById('hatenacount')).text(data|| 0);
         }
       });
     })();
     </script>
   </body>
   

関連記事

• Blooger に オリジナルデザイン の ソーシャルボタン を設置する方法
• Blogger に オリジナルデザイン の "tweet" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "share" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "+1" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "pocket" ボタン を 設置 する 方法

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

• Facebook ページ
• twitter