Blogger用の関連記事表示機能：FeedRelatedPosts.js

はじめに

Bloggerは、標準で関連記事の機能がありません。LinkWithin, Milliard, GoogleAdSenseなどの外部サービスを利用することで関連記事を表示することができます。ただし、外部サービスを利用すると関連記事が広告ブロッカーにブロックされたり、表示速度の低下などの予期せぬ問題が発生します。

ここでは、簡易なJavaScriptとFeed機能を利用した関連記事を紹介します。

特徴

  • LinkWithin, Milliard, GoogleAdSense
    • 関連度が高い
    • 表示速度が遅い（1秒程度かかる）
    • ブラウザの広告ブロック系の拡張機能にブロックされる
      • ユーザの行動追跡系の広告であるため、ブロックされる
  • A Simple Related Posts Widget For Blogger - Helplogger
    • 関連度が低い
      • 同一ラベルの記事をランダムに選んでいるだけ
      • アクセスするたびに表示される記事が異なる
    • 動作が早い（数100ms程度）
  • k08045kk/FeedRelatedPosts.js
    • 関連度がそこそこ高い
      • 記事毎のタイトルと概要の類似度で関連度を判定する
      • アクセス毎の結果は固定される
    • 動作が早い（数100ms程度）

「FeedRelatedPosts.js」は、「A Simple Related Posts Widget For Blogger」の問題点を改善した機能を提供します。Feedを取得して関連記事を作成するという概念は共通しつつ、関連度が低かった問題を文字列類似度により改善しています。

※参考：Bloggerに関連記事を表示する

設置方法

  1. サイト設定用JSONを関連記事の配置場所に記述する
<div id='related-posts' role='navigation'>
  <h2>関連記事</h2>
  <div>
    <script type='application/json' id='related-posts-site-json'>
{
  "debug": false,
  "homepageUrl": "<data:blog.homepageUrl/>",
  "params": "orderby=updated",
  "url": "<data:post.url/>",
  "title": "<data:post.title.jsonEscaped/>",
  "snippet": "<data:post.snippets.short.jsonEscaped/>",
  "useSnippet": true,
  "useLastPosts": true,
  "min": -1,
  "max": 5,
  "prefix": "<ul>",
  "sufix": "</ul>",
  "dummy": "<li>&amp;nbsp;</li>",
  "format": "<li><a href='${url}'>${title}</a></li>",
  "labels": [<b:loop values='data:post.labels' var='label' index='i'><b:if cond='data:i != 0'>,</b:if>"<data:label.name.jsonEscaped/>"</b:loop>]
}
    </script>
  </div>
</div>

※Blogウィジェットの<b:include data='post' name='post'/>直後辺りに設置する
※ラベルを取得するためには、Blogウィジェット内に配置する必要がある

  1. FeedRelatedPosts.jsを読み込む（実行する）
    • k08045kk/FeedRelatedPosts.js
    • サイト設定用JSONより後であればどこでも良い
    • 直接配置しても良いし、defer/asyncで読み込んでも良い
    • わからなければ、</body>直前にFeedRelatedPosts.jsを配置しておけば間違いはないです

応用

FeedRelatedPosts.jsは、次のような使用方法も想定されています。

  • お好みで各種プロパティを設定する
    • GitHubのPropertiesにプロパティ一覧があります
  • ページ設定用JSONでサイト設定を上書きして使用する
    • pagesを設定することでページの関連記事を事前指定できます
    • ページ毎に関連記事件数を制御することもできます
  • 遅延読み込みすることで、ページ表示時のスクリプト実行を抑制できます
  • WordPressに設置する
    • Feed処理部分を編集することでWordPressに対応できるはずです
    • WordPress以外でもFeed機能があれば対応できるはずです

補足

使用して改善点・不満点等あれば、GitHubのIssuesに投稿いただければ改善できるかもしれません。

参考