BloggerにZenbackをエラーなく導入する方法

BloggerにもWordPressのような関連記事をつけたいと思いいろいろ検討しましたが結局、Zenbackを導入しました。zenbackのスクリプトをBloggerのテンプレートにはるとアップロード時にエラーになります。

導入前にやること

導入前に、テンプレートで「ブログタイトル：記事タイトル」となってる部分を「記事タイトル｜ブログタイトル」になるように変更したほうがよいと思います。関連記事表示時に、ブログタイトルを削除して表示させるためです。削除されない場合でもこの順番だと見やすいです。
変更前

 <title><data:blog.pageTitle/></title>

変更後

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Zenbackの導入

zenbackのスクリプトをそのままBloggerのテンプレートにははれませんので以下の２つの方法のどちらかで対応します。
◆やり方　その１　CDATAを使う方法
変更前

<script type="text/javascript">
   //省略
</script>

変更後

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type="text/javascript">
// <![CDATA[
   //省略
// ]]>
</script>

</b:if>

◆やり方　その２　HTMLエンコードする方法
提供されているスクリプトのdocument.write()ないの文字列で&になっているものを&に置き換えるとそのままテンプレートにはることが可能です。エラーがでるのはこの部分です。
Bloggerのテンプレートで読み込むときにエラーがでるのはほとんどがこれです。該当文字をHTMLエンコードフォームなどのツールで変換してもよいでしょう。

貼り付ける位置

記事下だと思います。
テンプレートで、data:post.body,post-footerとかで検索をかけて見当をつけてみてください。
挿入したい場所に、仮に何か文字を書いて試してみるとだいたい見当がつきます。

<data:post.body/>
ここ

ここ
<div class='comment-form'>

記事の真下とか、コメント入力欄の上とかそのあたりが一番見つけやすいですね。

できればやったほうがよいこと

※テンプレートによっては、コメント行として認識されBlogerにテンプレートをインポートするときに消えてしまうようです。当ブログも新テンプレート？にしてからそうなりました。

以下のようにすると、Zenbackの精度があがります。
記事のタイトルを以下のように囲む

<!-- zenback_title_begin -->
    <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>
<!-- zenback_title_end -->

記事の本文を以下のように囲む

<!-- zenback_body_begin -->
    <p><data:post.body/></p>
<!-- zenback_body_end -->

【ブログ内の関連ある記事】
・zenbackで「関連するみんなの記事」への離脱を防ぐ裏技
・Zenbackの横幅を指定する方法
・WordPressでzenbackの関連記事が表示されない場合の対策
・アメブロでzenbackを個別記事の下に表示する方法
・はてなブログの記事下にZenbackを表示する方法