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

Blogger に オリジナルデザイン の "ツイート(tweet)" ボタンを設置する簡単な手順をまとめます。 オリジナルデザインにすれば、モバイル対応もできるはず… 具体的にはアイコンの大きさ、色、形、位置等が自由に作られるようになります。

オリジナルデザインのボタンを作成する場合、ブログテンプレートを直接編集することで作成します。 具体的には、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='https://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='twitter-share-button' href='"https://twitter.com/share?url=" + data:post.url + "&amp;text=" + data:post.title' target='_blank'>
       <span id='tiwttercount'></span>
       <i class='fa fa-twitter' />
     </a>
     ...
   </b:widget>
   

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

   <script type='text/javascript'>
   // twitter の ツイート数 を取得、表示する
   (function() {
     var url = '', href = '', location = window.location;
   
     href = location.href.substr(0, location.href.length - location.search.length);
   
     url += 'http://urls.api.twitter.com/1/urls/count.json?url=';
     url += window.encodeURI(href);
   
     $.ajax({
       url: url,
       dataType: 'jsonp',
       success: function(data, textStatus, jqXHR) {
         $(document.getElementById('tiwttercount')).text(data.count || 0);
       }
     });
   })();
   </script>
   

関連記事

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

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

• Facebook ページ
• twitter