Bloggerへ各種ボタンを設置する際の注意点

「facebook の「いいね!」ボタンを Blogger の各記事へ対応させる方法」でまとめた様に、Bloggerへfacebookの「いいね!」ボタンやTwitterの「ツイート」ボタンを設置する場合、ブログ全体で共有したいのか、記事単位にしたいのか、という点へ注意する必要があります。

ある種のボタンでは、ボタンが指し示すページ情報を静的に指定しなければなりません。この指定方法では、記事タイトルに応じて動的に記事URLが生成されるBloggerでは、記事単位のボタンを設置できません。

また「特に指定されていなければボタンの表示されているページのURLを使う」といった動作をするボタンもあります。この場合、同じ記事がトップページで表示された場合と、記事単位で表示された場合とで参照URLが変化し、意図とは異なる挙動になるかも知れません。

この記事を書いている現在、Bloggerでは記事固有のURLを「data:post.url」擬似変数で参照できます。ブログのトップページを指し示す擬似変数は「data:blog.homepageUrl」です。これらの擬似変数を展開するにはexprコマンドを使います。

Twitter公式ボタンの場合、参照先URLはdata-urlアトリビュートで設定します。指定されていない場合は表示されているページのURLが利用されます。その為、各記事のURLをツイートするボタンは次のように書けます。

<a href="https://twitter.com/share" class="twitter-share-button" expr:data-url='data:post.url' data-lang="ja">ツイート</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Google +1ボタンの場合、参照先の指定はhrefです。各記事のURLを+1してもらいたい場合、次のようになります。

<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone expr:href='data:post.url' size='medium'></g:plusone>

なお、+1ボタンが使用する次のscript文は適切な位置へ挿入されているものとします。

<!-- この render 呼び出しを適切な位置に挿入してください -->
<script type="text/javascript"><br/>
  (function() {<br/>
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();<br/>
</script>

はてなブックマークボタンも、参照先はhrefで指定します。但し「http://b.hatena.ne.jp/entry/」へ続けて指定しなければなりません。また、タイトルも指定可能です。記事のタイトルには「data:blog.pageTitle」擬似変数を使うと良いでしょう。そこで次のような指定になります。

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:data-hatena-bookmark-title='data:blog.pageTitle' expr:href='"http://b.hatena.ne.jp/entry/" + 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'/>

facebookの場合は「facebook の「いいね!」ボタンを Blogger の各記事へ対応させる方法」の通りです。

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=21"' scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

記事固有ではなくブログ全体に対するボタンにしたい場合には、exprによる展開をやめて直接URLを埋め込めば良いでしょう。または上記でdata:post.urlとした箇所をdata:blog.homepageUrlへ変更しても良いかもしれません。