2013年5月4日土曜日

各種シェアボタンを整然とブログに設置するテーブルを書いてみた(特にBlogger向けに)

Bloggerのテンプレートをリセットする必要がありまして。リセットしたら各記事のフッターにあった各種シェアボタンが吹っ飛んでしまったでござる。

そこで、前から設置しようと思っていたPocketなどを含めつつ、こんな感じに前よりも整然と設置できないかなと思って。



基本形テーブル

こんなテーブルを書いてみた。

<!-- シェアボタン系テーブル -->
<table style='margin-top:8px; border:1px;' cellpadding="4">
  <tr>

    <!-- Twitter -->
    <td>
      <a class='twitter-share-button' data-lang='ja' href='https://twitter.com/share' data-count='vertical'>ツイート</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
    </td>

    <!-- facebook -->
    <td>
      <div id="fb-root"></div>
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
      <div class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
    </td>

    <!-- Google+ -->
    <td>
      <div class='g-plusone' data-size='tall'/>
      <script type='text/javascript'>
        window.___gcfg = {lang: &#39;ja&#39;};
        (function() {
        var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
        po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
        var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
        })();
      </script>
    </td>

    <!-- はてなブックマーク -->
    <td>
      <a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical-balloon' href='http://b.hatena.ne.jp/entry/' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
    </td>

    <!-- pocket -->
    <td>
      <a class='pocket-btn' data-lang='en' data-pocket-count='vertical' data-pocket-label='pocket'/>
      <script type='text/javascript'>!function(d,i){if(!d.getElementById(i)){var j=d.createElement(&quot;script&quot;);j.id=i;j.src=&quot;https://widgets.getpocket.com/v1/j/btn.js?v=1&quot;;var w=d.getElementById(i);d.body.appendChild(j);}}(document,&quot;pocket-btn-js&quot;);</script>
    </td>

  </tr>
</table>


各種シェアボタン作成リンク集

各種シェアボタンを作成するリンクはこちら。

Twitter / Twitterボタン

Like Button - Facebook開発者

+1 Button - Google+ Platform — Google Developers

はてなブックマークボタンの作成・設置について

Pocket for Publishers: Pocket Button


Blogger専用の設定

以下はBloggerの人のための話。

しかし、下記のカスタマイズを行うと日本のBloggerのドメインがblogspot.comからblogspot.jpに変更された関係で全てのシェア数がゼロになってしまう可能性があるので注意。

自分の場合、もったいないなとは思いつつ、恐らくこの先Bloggerがblogspot.comに戻ることはないと思うので、見切りを付けてエイヤ!でやってしまうことにした。

カスタマイズにはBloggerのレイアウトタグが必要になるので、ここが参考になる。
レイアウト データ タグ - Blogger ヘルプ


テーブルを書く場所

ダッシュボード>テンプレート>HTMLの編集に入り、次のようなタグの中に上のテーブルのコードを書くといい。

<div class='post-footer-line post-footer-line-3'></div>

ブログによってはpost-footer-line-2までしか無いかもしれない。


Twitterボタンのカスタマイズ

上のままでも各記事のページ上では問題ないけれど、記事リスト表示の時に実際のその記事のツイート数が表示されないので、下記のようにexpr:data-urlとexpr:data-textアトリビュートを追加する。

<a 
  class='twitter-share-button'
  data-count='vertical'
  data-lang='ja'
  href='https://twitter.com/share' 
  expr:data-url="data:post.url"
  expr:data-text='data:post.title + &quot;琴線探査:&quot;'>ツイート</a>


facebookボタンのカスタマイズ

上のままでも各記事のページ上では問題ないけれど、記事リスト表示の時に実際のその記事のいいね数が表示されないので、下記のようにexpr:data-hrefアトリビュートを追加する。

<div
  class='fb-like'
  data-layout='box_count'
  data-send='false'
  data-show-faces='false'
  data-width='450'
  expr:data-href='data:post.url'/>


Google+ボタンのカスタマイズ

上のままでも各記事のページ上では問題ないけれど、記事リスト表示の時に実際のその記事の+1数が表示されないので、下記のようにexpr:data-hrefアトリビュートを追加する。

<div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/>


はてなブックマークボタンのカスタマイズ

上のままでも各記事のページ上では問題ないけれど、記事リスト表示の時に実際のその記事のブックマーク数が表示されないので、下記のようにhrefアトリビュートをexpr:hrefアトリビュートに変更する。

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical-balloon' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'>


pocketボタンのカスタマイズ

上のままでも各記事のページ上では問題ないけれど、記事リスト表示の時に実際のその記事のpocket数が表示されないので、下記のようにexpr:data-save-urlアトリビュートを追加する。

<a class='pocket-btn' data-lang='en' data-pocket-count='vertical' data-pocket-label='pocket' expr:data-save-url='data:post.url'/>


Blogger用完成形テーブル

で、全てのカスタマイズを行ったBlogger専用の完成形テーブルがこれ。

<!-- シェアボタン系テーブル -->
<table cellpadding='4' style='margin-top:8px; border:1px;'>
  <tr>

    <!-- Twitter -->
    <td>
      <a class='twitter-share-button' data-count='vertical' data-lang='ja' href='https://twitter.com/share' expr:data-url='data:post.url' expr:data-text='data:post.title'>ツイート</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
    </td>

    <!-- facebook -->
    <td>
      <div id='fb-root'/>
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = &quot;//connect.facebook.net/ja_JP/all.js#xfbml=1&quot;;
        fjs.parentNode.insertBefore(js, fjs);
        }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
      <div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='450' expr:data-href='data:post.url'/>
    </td>

    <!-- Google+ -->
    <td>
      <div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/>
      <script type='text/javascript'>
        window.___gcfg = {lang: &#39;ja&#39;};
        (function() {
        var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
        po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
        var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
        })();
      </script>
    </td>

    <!-- はてなブックマーク -->
    <td>
      <a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical-balloon' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
    </td>

    <!-- pocket -->
    <td>
      <a class='pocket-btn' data-lang='en' data-pocket-count='vertical' data-pocket-label='pocket' expr:data-save-url='data:post.url'/>
      <script type='text/javascript'>!function(d,i){if(!d.getElementById(i)){var j=d.createElement(&quot;script&quot;);j.id=i;j.src=&quot;https://widgets.getpocket.com/v1/j/btn.js?v=1&quot;;var w=d.getElementById(i);d.body.appendChild(j);}}(document,&quot;pocket-btn-js&quot;);</script>
    </td>

  </tr>
</table>

以上、終了! we out ちょ〜