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

Blogger に オリジナルデザイン の "pocket" ボタンを設置する簡単な手順をまとめます。

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

テンプレート の 編集手順

1. ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 リンクは pocket に登録する URL を埋め込むように作成しています。

   <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
     ...
     <a class='pocket-share-button btn-social' expr:href='"https://getpocket.com/edit?url=" + data:post.url' target='_blank'>
       <span id='pocketcount'></span>
       <span>pocket</span>
     </a>
     ...
   </b:widget>
   

2. bodyの閉じタグ直前に以下のスクリプトを挿入します。 pocket に登録された数を取得する処理を行います。 非同期で取得するのに 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 () {
       var url = '', query = '';
   
       url += window.encodeURI(window.location.href || '');
   
       query += 'SELECT content FROM data.headers WHERE url="https://widgets.getpocket.com/v1/button?label=pocket&amp;count=vertical&amp;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(/&lt;em id="cnt"&gt;(\d+)&lt;\/em&gt;/i);
           var count = (match != null) ? match[1] : 0;
           $(document.getElementById('pocketcount')).text(count);
         }
       });
     })();
     </script>
   </body>
   

関連記事

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

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

• Facebook ページ
• twitter