Bloggerにzenbackを美しく導入する方法

 前のエントリで”デザイン>ページ要素 でガジェット追加”という手抜き導入を紹介したのですが、
zenbackは記事の個別ページを解析して、関連記事や関連リンクを表示します。
サイドバーにzenbackを貼ると、トップページや月別/カテゴリ別アーカイブページにもzenbackが表示されるようになりますが、この場合、解析がうまくいかず、あまり精度の高くない関連記事や関連リンクが表示される可能性があります。
via: zenbackが使えるブログ/使えないブログ - zenbackブログ
 関連記事の抽出精度が下がっちゃうとのことです。関連記事目的なところもありますので、真面目に導入してみたいと思います。

まず。zenbackからスクリプトコードをもらってきます。

見やすいように改行を入れてます。
<!-- BEGIN ZenBackWidget -->
<script type="text/javascript">
docu~省略~ript%3E"));
</script>
<!-- END ZenBackWidget -->
以下のようにコードを足します。↓
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- BEGIN ZenBackWidget -->
<script type="text/javascript">
// <![CDATA[
docu~省略~ript%3E"));
// ]]>
</script>
<!-- END ZenBackWidget -->
</b:if>
↑(2010/12/02 追記:コレは古いコードです。新しいコードは下の方に有ります)

BloggerのテンプレートはXHTMLなので”CDATA”を書いてやります。if文は、単一記事のページのみ表示する為に追加します。

で、デザイン>HTMLの編集からテンプレートをいじっていきます。
まず、テンプレートをすべてダウンロードをクリックし、バックアップを取っておきましょう。

次に、以下の部分を探してください。。
(追記:ウィジェットのテンプレートを展開 チェックボックスをオンにしてね
         Divタグがなかったらpost.bodyの直下に自分で追加しちゃってもOK)
<data:post.body/>
<div style='clear: both;'/><!-- clear for photos floats -->

divを分解して、その間に改造済みコードを貼りつけます。
<data:post.body/>
<div style='clear: both;'>
  ここに、さっきのをコピペー
</div><!-- clear for photos floats -->

で、最後に関連記事の精度をより高めるために、専用タグを追加します。(任意

<div class='post hentry'>
    &lt;!-- zenback_title_begin --&gt;
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>
    &lt;!-- zenback_title_end --&gt;
    <div class='post-header'>
<div class='post-body entry-content'>
      &lt;!-- zenback_body_begin --&gt;
      <data:post.body/>
      &lt;!-- zenback_body_end --&gt;
      <div style='clear: both;'>


テーマによって若干違うかもしれませんが、大体同じような感じでできると思います。間違いがあったら指摘おねがいします。

>> zenback

追記:2010/12/02 新しいスクリプトコード対応↓
追記:2010/12/18 if文抜けてたので修正しました。
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- X:S ZenBackWidget --><script type="text/javascript">
// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenb
省略~
ath.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script><!-- X:E ZenBackWidget -->
</b:if>

12 件のコメント:

  1. 大変詳しい解説ありがとうございます。
    zenbackのベータに申し込んでみたものの、Bloggerでのデザインの個別記事のHTMLの編集の仕方がよくわからず、スクリプトを挿入できずにいましたが、この記事のおかげで私でも手順通り簡単に導入することができました(^_^)
    丁寧な解説の記事ありがとうございますm(_ _)m

    返信削除
  2. 解説ありがとうございました。
    すごく勉強になりました。

    返信削除
  3. お役に立てたみたいで嬉しいです。なんか、モチベーション上がってきました。

    返信削除
  4. 詳しい解説有難う御座いました。
    おかげで美しく導入することが出来ました。

    返信削除
  5. 役立ちました。ありがとうございます。
    個人的にはコメント欄などが入ったBloggerウィジットの下につけられたらと思うので、
    その方法を模索してみます(cssがほとんどわからないので…)。

    返信削除
  6. 大変参考になりました。
    BloggerにFacebookなどのソーシャルボタンを表示させたくてこのBLOGに辿り着きました。
    ありがとうございました。

    返信削除
  7. 参考にさせていただきました。
    Facebookの「いいね」ボタンを表示させたくてこのBLOGにたどり着きました。
    おかげでBLOGに無事表示させることができました。ありがとうございます。

    返信削除
  8. 詳しい説明ありがとうございます。労せず表示させることができました。
    本当に美しいですね。ありがとうございます。

    返信削除
  9. 詳細説明、ありがとうございました~

    返信削除
  10. zenback公式に載せてほしいくらい有用な記事です。
    ありがとうございました!

    返信削除
  11. お陰で美しく導入することができました!
    ありがとうございますー

    返信削除
  12. 素晴らしい記事です!参考にさせて頂きました!
    ありがとうございます(^-^)

    返信削除