2013/08/07

【Blogger】ブログのトップページを共有するSNSボタンを設置する方法!


Blogを開設している方なら、個別ページ向けのSNS共有用ボタンの他に、トップページ(ホームページ)向けの共有ボタンも設置したいと思う方もいらっしゃると思います。

footerに設置しました

SNS共有ボタンの設置方法は、
にて紹介済みなので、このエントリと共に参考にしてみてください。


Blog内のどのページを表示していてもトップページを共有するためのURLがBloggerには用意されています。それが以下のコードです。
data:blog.canonicalHomepageUrl
今回は共有する対象のURLやhrefに”data:blog.canonicalHomepageUrl”を指定し、”expr:”をつけることでトップページの共有を実現します。

※canonicalがついているので、共有されたトップページの国別ドメインの違い(.jpや.com)に関わらず、共有された数の総数が集計され表示されます。


以下に、当Blogで現在使用している+1ボタンとTweetボタンの例を紹介します。
+1ボタン
<div class='g-plusone' data-size='medium' expr:data-href='data:blog.canonicalHomepageUrl'/>
Tweetボタン
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='anywhereTheJavascriptAPI' data-via='Chimtty' expr:data-text='data:blog.title' expr:data-url='data:blog.canonicalHomepageUrl' href='https://twitter.com/share'>Tweet</a>
※赤太字部分が今回ポイントのところ。


 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates
Related Posts Plugin for WordPress, Blogger...