2011年7月4日月曜日

BloggerのHTML/JavaScriptガジェットでTweet、いいね!、Google+1(Google Plus One)ボタンをつけてみた

Bloggerのブログ記事に対してではなく、ブログサイトそのものに対して、ツイートや、いいね!、+1をクリックできるように、Bloggerのブログ右脇にガジェットを追加してみた。


1.「HTML/JavaScript」ガジェットを追加

Bloggerの管理ページで「デザイン」>「ページ要素」>「ガジェットを追加」>「HTML/JavaScript」の+記号をクリック。


2.ソースコードを編集

「HTML/JavaScript」右下の「編集」をクリック。コンテンツ欄に以下のコードを貼り付ける。

ボタンサイズは全て65pxレベルの大きなものを選択。
<iframe allowtransparency='true' src='http://platform.twitter.com/widgets/tweet_button.html?url=ブログのURL&text=ブログのタイトル&related=Twitterのアカウント&lang=ja&count=vertical' frameborder='0' scrolling='no' style='border:none; vertical-align:top; overflow:hidden; width:110px; height:65px;'></iframe>
<iframe allowtransparency='true' frameborder='0' scrolling='no' style='width:100px; height:65px; border:none; overflow:hidden; vertical-align:top;' src='http://www.facebook.com/plugins/like.php?href=URLエンコードしたブログのURL(例:http%3a%2f%2fxxxx.blogspot.com%2f)&amp;layout=box_count&amp;show_faces=false&amp;width=100px&amp;action=like&amp;colorscheme=light&amp;height=65px'></iframe>
<g:plusone size="tall" href="ブログのURL"></g:plusone>
ガジェットのコンテンツ欄では、expr:タグが解釈されず、そのまま文字列として表示されてしまうようだ。そのため、ブログのURLやタイトルも直接入力せざるを得なかった。

何かやり方があるのかな?