各種シェアボタンを整然とブログに設置するテーブルを書いてみた（特に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 ちょ〜

コメント

コメントを投稿

このブログの人気の投稿

レオナルド・ダ・ビンチはなぜノートを「鏡文字」で書いたのか？

イメージ
日経14.06.08朝　芸術と科学のあいだ　１７　鏡文字に込めた天才の思惑　福岡伸一 …ダ・ビンチの筆の特徴は、線が左上から斜め右下へと流れていることである。これは彼が左利きだったかららしい。 もう一つの際立った特徴は、文字がすべて鏡文字、左右反転で書かれていることだ… アイディアを盗まれないよう暗号化したのだという説があるが、暗号にしては簡単に解読されてしまう… ダ・ビンチは天才であり完璧主義者であると同時に、大いなる山っ気を持った人物でもあった。 いつも自分を売り込むこと、プランやアイディアを広めることを考えていた。そのためには何が必要か。マスメディアである。 ダ・ビンチの鏡文字は自分の原稿をいつの日か活版印刷するために意図された周到な準備だったのではなかったか。 日経記事より レオナルド・ダ・ビンチは過去の人物の中で最も尊敬する人物だ。彼は本当に何でも出来た。芸術も、科学も、工学も。まさに「万能人 (uomo universale)」。 レオナルド・ダ・ヴィンチ - Wikipedia 当然自分はダ・ビンチの足元にも及ばないが、いくつもの人工言語（プログラミング言語）を使うことができる。ひとつをマスターするのは大変だったが、ひとつマスターするとその他の言語にはかなりの共通点があるので、新しい言語を習得するのにそれほど時間がかからなくなったからだ。 いかに天才であったとしても生きられる時間は限られている。その限られた時間の中であれほどの多方面に渡る物事を習得できたのは、「すべてのものに共通する何か」を習得したからではないかと思うのだ。 自分の知る限り、その「すべてのものに共通する何か」を習得したのではないかと思える人物は、ダ・ビンチただ一人だ。 そのダ・ビンチの新たな側面を知った。山っ気というか、マーケティングにも興味があったようだ。 そのマーケティングには何らかのメディアが必要だ。やはり自分もダ・ビンチは活版印刷のために鏡文字を使っていた説に一票だ。 マーケティングへの興味という他にもう一つ根拠がある。ダ・ビンチが生まれたのが1452年。グーテンベルクの聖書が世界で初めて活版印刷でつくられたのが1455年。 グーテンベルク聖書 - Wikipedia つまり、ダ・ビンチが生きた時代は活版印...
続きを読む

macでsmb（samba）共有サーバーに別名で接続（別アカウント名で接続）する方法

macでsmb（samba）共有サーバーに別のアカウント名で接続したくなった。 接続を解除してもパスワードを保存してしまったために自動的に再接続してしまい、別アカウント名で接続できなくなってしまった(´・ω・`) どうすれば別名で接続できるのか？ Finder＞移動＞サーバーへ接続＞サーバアドレス に下記のように入力する。 smb://アカウント名@ホスト名 ノリでやってみたら、たまたまできちゃった(・∀・) 知らなかったわ〜
続きを読む

Windows7でネットワーク上の共有フォルダにアクセスする資格情報を保存するには？

イメージ
Windows7でネットワーク上の共有フォルダにアクセスする場合、通常IDとパスワードを求められる。Windows7ではこれを「資格情報」と呼んでいるようだ。 普通に入力してアクセスすることはできた。しかし問題は、 ログオフや再起動をすると、「資格情報を記憶する」をチェックしても毎回聞かれる ことだ。ネットで調べると、このような状況になる人は多いようだった。自分なりのログを書いておこうと思う。 普通に入力して共有フォルダにアクセスした後、「コントロールパネル」＞「ユーザーアカウントと家族のための安全設定」＞「資格情報マネージャ」を見るとこのようになっていた。何度も聞かれるのは、「常設」が「ログオンセッション」となっているためだろうとわかる。これをなんとかしなければならない。 そこで、まず「資格情報コンテナから削除」でこの資格情報を消してから、「Windows資格情報の追加」をする。普通に考えればこのように入力することになるだろう。 これで一度再起動した。しかし、これでもなぜか次のような画面が出て接続できなかった。 試行錯誤の結果、 ポイントはユーザー名を「サーバー名¥ユーザー名」とすること だとわかった。 こうして追加すると、このように「常設」が「エンタープライズ」になる。これで2度と聞かれなくなった。 このような苦労をしなくてもNASには普通に接続できたのだけれど、接続先がMacの共有フォルダだったのがいけなかったのだろうか。いまだに謎だ。
続きを読む