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やタイトルも直接入力せざるを得なかった。

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

Google+1（Google Plus One）ボタンをBloggerのブログ記事につけてみた

GoogleのGoogle+1（Google Plus One）ボタンを、Bloggerのブログ記事のテンプレートに追加してみた。

1.プラスワンのサイトでコードを作成する

プラスワン ボタン
Google+1サイトで、ボタンサイズやカウンターの表示/非表示を設定する。

2.ブログ記事のテンプレートを編集

Bloggerの管理ページで「デザイン」＞「HTMLの編集」へ。
「ウィジェットのテンプレートを展開」にチェックを入れる。

まずは、</body> の直前にGoogle+1のjsを読み込むコードを追加する。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

次に、ボタンを追加。
例えば、ブログ記事の一番下に追加したい場合は<data:post.body/>の下に以下のようにコードを追加する。ボタンサイズはmediumを選んだ場合。

<div class='post-body entry-content'>
<data:post.body/>

<g:plusone expr:href='data:post.url' size='medium'/>

</div>

ポイントはexpr:href='data:post.url'。
data:post.urlが投稿記事のURLになるので、その情報をhref属性としてgタグに追加する。