+1ボタンをBloggerの好きな場所に設置する方法

+1ボタンがようやく公開されましたね。どんなものか知りたい方は公式ページをご覧ください。Bloggerも対応して、共有ボタン(ダッシュボード>デザイン>ページ要素>ブログの投稿>編集)で表示されるようになりましたが、好きな場所に表示できないのが…。ということで、HTMLの編集からテンプレートを直接編集して、好きな場所に設置してしまいましょう。


>>Google +1 ボタン
注:この記事は2011/06/02時点の内容です。

ダッシュボード>デザイン>HTMLの編集
※編集前は”テンプレートをすべてダウンロード”でバックアップをわすれずに!
※ウィジェットのテンプレートを展開してね

◆貼り付けるもの
</head>の直前へ以下を貼付け
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

ボタンの表示したい場所に以下を貼付け(大きいボタン)
<g:plusone size="tall" expr:href='data:post.url'></g:plusone>

Blogger用に変更した部分は赤字の部分。これで個別記事のURLが指定できる。ボタンの大きさ買えたり、数字消したりしたい場合は、ここで取得してきて赤字の部分を足してやればよし。

◆ボタンの表示したい場所
・記事タイトルの直下の場合
以下のコードを探して、
<div class='post-header-line-1'/>

<div class='post-header-line-1'>
ここに貼付け!
</div>

・記事の直下の場合
ここに貼付け!
<div class='post-footer'>

個別記事のみで表示したい場合は、ifタグで挟む!
<b:if cond='data:blog.pageType == &quot;item&quot;'>
ここに貼付け!
</b:if>
<div class='post-footer'>

どうですか?綺麗に表示されましたか? コールバック関数も指定できるようなので、なにか面白いことできないか考え中です。 あと、この記事に間違いが合ったら、教えてくださいね~

おまけ:
記事タイトルの右に表示する場合(このブログのTwitterボタンのように)
          <data:post.title/>
        </b:if>
     </b:if>
<span style='float:right;'>
<g:plusone expr:href='data:post.url' size='tall'/>
</span>
      </h3>

>>Google +1 ボタン

0 件のコメント:

コメントを投稿