ある種のボタンでは、ボタンが指し示すページ情報を静的に指定しなければなりません。この指定方法では、記事タイトルに応じて動的に記事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へ変更しても良いかもしれません。
0 件のコメント:
コメントを投稿