2011/05/05

Blogger での zenback 利用方法

時刻: Labels: ,

zenbackとは？

zenbackはブログパーツです。ブログの記事の下や横に、
  • その記事をソーシャルなどにポストするボタン（Twitter、はてブ、mixiチェック、Evernote、Facebook）
  • その記事に関係する自分のブログ記事
  • その記事に関係する他のzenbackユーザーのブログ記事（関連リンク）
  • その記事についての最新のTwitterのつぶやき
  • その記事についてのはてなブックマーク
を表示します。
公式のヘルプには Blogger での導入方法は無いのですが、
ちゃんと Blogger でも使うことができます。

登録・コードを取得する

http://zenback.jp/
にて登録を済ませます。

コードを Blogger に合わせてテンプレート編集

以下のように編集します。
<b:if cond="data:blog.pageType == &quot;item&quot;">
<script type="text/javascript">
// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//slumbers99.blogspot.com/&nsid=1234567890&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script>
</b:if>

Blogger のテンプレートに貼り付ける
（記事の一番下に出す場合）

<data:post.body>
</data:post.body>
<div style="clear: both;"/>
これを
<data:post.body>
</data:post.body>
<div style="clear: both;">
<b:if cond="data:blog.pageType == &quot;item&quot;">
<script type="text/javascript">
// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//slumbers99.blogspot.com/&nsid=1234567890&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script>
</b:if>
</div>
とします。
<div style="clear: both;"/>
を分解して中にコード貼り付ける感じです。
ここまでしたら、プレビューしてみましょう。
一覧表示なので zenback は表示されていないと思います。
見た目に異常がなかったらテンプレートを保存して実際のブログを確認してみましょう。

関連記事の精度を上げる「zenbackタグ」を追加する

必須では無いものの、付けといたほうがいいかもしれないので付けておきます。
本文部分を「<!-- zenback_body_begin -->」「<!-- zenback_body_end -->」で囲む
&lt;!-- zenback_body_begin --&gt;
<data:post.body>
&lt;!-- zenback_body_end --&gt;
こんな感じ。
記事タイトル部分を「<!-- zenback_title_begin -->」「<!-- zenback_title_end -->」で囲む
</data:post.body>
<div class="post hentry uncustomized-post-template">
&lt;!-- zenback_title_begin --&gt;
<a expr:name="data:post.id" href="http://www.blogger.com/post-create.g?blogID=3934448815670975496">
<b:if cond="data:post.title">
</b:if></a>
<h3 class="post-title entry-title">
<a expr:name="data:post.id" href="http://www.blogger.com/post-create.g?blogID=3934448815670975496">     <b:if cond="data:post.link">
</b:if></a><a expr:href="data:post.link" href="http://www.blogger.com/post-create.g?blogID=3934448815670975496"><data:post.title></data:post.title></a>
<b:else>
<b:if cond="data:post.url">
<a expr:href="data:post.url" href="http://www.blogger.com/post-create.g?blogID=3934448815670975496"><data:post.title></data:post.title></a>
<b:else>
<data:post.title>
</data:post.title></b:else></b:if>
</b:else></h3>
&lt;!-- zenback_title_end --&gt;
こんな感じ。
使用しているテンプレートによってはタグがちょっと違うかと思いますが、
だいたい同じような構成に鳴っていると思いますので、探してみてください。
設置が完了すると以下のようなパーツが現れます。
意外に簡単に設置できるので、お試しアレ！！