各種シェアボタンを整然とブログに設置するテーブルを書いてみた（特に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://アカウント名@ホスト名 ノリでやってみたら、たまたまできちゃった(・∀・) 知らなかったわ〜
続きを読む

Google DriveにCURLでアップロードするには？

イメージ
LinuxからGoogleドライブにファイルをアップロードしたい！ Google Drive にlinuxからファイルを自動アップロードするにはどうしたら良いかを考えていた。 残念ながらlinux版のクライアントは予定はされているものの、まだリリースされていない。さてどうしよう？ 例えば、一応 SDK でライブラリが提供されているのでJavaでクライアントを書くとか？重いなぁ。そこまでやらなきゃいけないか？ そこで、Google DriveはRESTFulなんだからCurlだけでもある程度いけるはず・・・と思ってやってみたらできた。 Get Startedを参考にはじめる。 Google Drive SDK — Google Developers ちなみに、テスト環境はlinuxではなくMacのLIONです。 追記12.07.04 ：CentOS 5 64bitでも正常動作を確認した APIコンソールでアプリケーション登録 まずAPIコンソールでアプリケーション登録をする必要がある。 Google APIs Console Create＞「GoogleDriveUploader」とでも名前を付けて＞Create Project Services＞Drive SDKをON API Access＞Create an OAuth2.0 client ID Product Nameに「GoogleDriveUploader」とでも名前を付けて＞Next Installed Application、Otherを選択して＞Create client ID ここまででこんな情報を貰える。これが必要な情報。 ブラウザでOAuth認証してcodeを取得する 今度はブラウザ上で、先ほど得た情報を使ってOAuthの認証を通す。 https://accounts.google.com/o/oauth2/auth?client_id= CLIENT_ID &response_type=code&redirect_uri=urn:ietf:wg:oauth:2.0:oob&scope=https://www.googleapis.com/auth/drive こんな画面が出るので「アクセス...
続きを読む