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

2013/12/01

zenbackが新コードになったので、以下の記事を参考にしてください。
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のテンプレートにははれませんので以下の2つの方法のどちらかで対応します。
◆やり方 その1 CDATAを使う方法
変更前
<script type="text/javascript">
   //省略
</script>
変更後
<b:if cond='data:blog.pageType == &quot;item&quot;'>

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

</b:if>
◆やり方 その2 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を表示する方法

スポンサーリンク

『BloggerにZenbackをエラーなく導入する方法』へのコメント

  1. 名前:匿名 : 投稿日:2013/05/28 12:57

    テンプレート内にdata:post.bodyが複数あったので、その位置を特定する記述が大変役に立ちました。ありがとうございました。

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。