Bloggerに関連記事のLinkWithinを導入するとエラーが出る場合の対処法

Bloggerの記事の下に関連記事を表示する方法はZenBack、Outbrain、LinkWithin、Smarter Related Posts Widgetなどがあります。

ZenBackとOutbrainはソーシャルの機能があるので、他のサイトに自分の記事が表示されるようになり、ページアクセスを増やす効果があります。

LinkWithinとSmarter Related Posts Widgetは自分のブログの関連記事を表示してくれますが、設定が最もシンプルなLinkWithinを導入してみました。

LinkWithinの導入

1. サイトのトップページにて
①メールアドレス、②ブログのURL、③ブログの種類、④表示する記事の件数
を設定して、「Get Widget!」のボタンを押します。

2. 「Install Widget」のリンクをクリックする。

3. タイトルを入力して、「ウィジェットを追加」ボタンを押す

4. エラーページが表示されてしまいます！

次のエラーが見つかりました。
widget.content: 必須項目はすべて入力してください
引き続き問題が発生する場合:
ブラウザのキャッシュと Cookie をクリアして、もう一度お試しください。

と表示されています。

エラーの対処

5.その場合の対処方法は③ブログの種類を「Other」に変更してから「GetWidget!」ボタンを押します。

6. 今度はスクリプトのコードが出てくるので、コードをコピーします。

7. 自分のBloggerの「レイアウト」へ行き、投稿の下にある「ガジェットを追加」をクリックします。

8. HTML/JavaScriptを選択してコードを貼付けします。

9. これで記事の下に関連記事が表示されるようになります。

タイトルの変更

そのままだと「You might also like:」と英語表示になるので、これを日本語で変更します。
10. スクリプトに１行追加します。

<script>
var linkwithin_site_id = 2176931;
var linkwithin_text = "よく読まれる関連記事";
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

指定した文言で表示されるようになりました。

投稿ページのみに表示させる

ウィジェットの追加をすると、ホーム画面でも関連記事が表示されるので、ホーム画面中の全記事に関連記事が表示されてしまいます。
これを投稿ページのみで表示するように変更します。
11. 「テンプレート」-「HTMLの編集」へ行き「ウィジェットへ移動」を使ってLinkWithinのウィジェットのコードへ移動します。

12. <data:content/>を<b:if>の条件文で囲ってあげる。

  <b:widget id='HTML4' locked='false' title='LinkWithin' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:content/>
    </b:if>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

以上で完了です！