Google Bloggerで使える関連記事ウィジェット５種のまとめ

このブログの「関連記事」が図のように折りたたまれてしまいました。"Click to load related posts list"ボタンをクリックしないと展開しません。

支障がないといえば無いのかもしれませんが、関連記事に物凄く興味のある読者の方でもワンクリック増えるというのは手間です。視覚的にタイトルが見えているのと、そうではないのでは、やはりページビューに違いがあるはず。

自分の Google Blogger ブログでこれまで使ってきた「関連記事」の Widget を見直してみたところ、全部で５種類ありました。備忘録を兼ねて設置の難易度、使用感、設置方法を含め、メリット・デメリットをまとめてみます。

1. Hoctro's Archived Blog版 Related Posts Hack
現在このブログで使わせてもらっている関連記事は、これの旧バージョン(スクリプト)です。Related Posts Hack の旧バージョンは、Hoctro's Placeという旧ブログで公開されていましたが、今は解説が見当たらないので、後にこのブログでもご紹介します。便宜上、「Related Posts Hack」と呼びます。
※ご参考までに、上記２つの参照ブログともに、YouTubeでMVが自動再生されますのでご注意（？）。（投稿時点）

2. Smarter Related Posts Widget for Google Blogger - v2.0
More Tech Tips ブログで紹介されている Related Posts Widget。テキストのみ、サムネイル付きなどの４パターンを専用のコード生成ページから作成することができます。ここでは「JQuery V2」と呼びます。

3. Google Blogger の複数ラベルが表示できる関連記事スクリプト
これは該当する記事のラベルを参照して、複数のラベルごとに規定数の関連記事を表示します。「複数ラベル式」と呼びます。

4. ３行コードで導入 Appspot.com の関連記事表示の日本語ラベル
このブログでも過去に使わせてもらっていた関連記事表示スクリプト。この記事のきっかけとなったボタンで畳まれてしまった関連記事です。ここでは「３行コード式」と呼びます。オリジナルの解説は "Best Related Posts Widget for Blogger – Show Simlar Articles Below Blog Posts Plugin"にあります。

5. LinkWithin Related posts with thumbnails
説明は不要なほど著名かつ優れたサムネイル付きの関連記事 Widgetです。単に「Linkwithin」と呼びます。

私がGoogle Blogger の記事下に挿入し実際に使っている関連記事ウィジェット・スクリプトは以上５種です。

掲載した順番は難易度順です。上から下に行くほど簡単になる。つまり5番目の Linkwithin が最も簡単ということです。このブログで使わせてもらっている Widget が一番難易度高というのは嫌味っぽいのですが、下記にちゃんと理由をご説明します。

■総論

一表にまとめます。

	高度な専門知識	設置難易度	動作	JavaScrupt
Related Posts Hack	不要	高	高速・安定	外部ファイル
JQuery V2	不要	低	関連記事などの日本語不可	外部ファイル（ホスト）
複数ラベル式	無くても可	中	安定	HTMLに直接貼り付け
３行コード式	不要	低	低速、ボタンクリックで展開	外部ファイル（ホスト）
Linkwithin	不要	低	中速・安定	外部ファイル（ホスト）

設置がしやすくても、例えば３行コード式のようにクリックをしないと関連記事リストが展開しないとか、見出しラベルが日本語表記に変えられないなど、使用上の制限はできれば避けたいものですね。特に気になるのは日本語ブログ上の英語表記。不完全さが拭い切れない印象があります。

■個別の使用感・感想

1. Related Posts Hack

Related_post_hack.jp という JavaScript の外部ファイルをどこかのサーバにインストールして Blogger ブログから参照します。設置難易度が高いというのは、この Related_post_hack.jp のオリジナルの公開場所がわからなくなってしまったからです。
恐らく、related_post_hack.js で検索すればどこかでソースが見つかると思います。ちなみに、How to Add Related Posts Widget to Your Blog?で紹介されていますので、是非ご参照ください。 JSの問題が解決できれば、私はこれが一番のオススメです。とにかく軽くて速い。ラベルも手書きだから日本語で「関連記事」など自由に記述ができます。
（追記：もしかすると、私が自分でソースを外部ファイル化したような記憶が蘇ってきました。コードを単にHTMLに貼り付けるだけだから、これが一番簡単かもしれません。）

2.JQuery V2

JQuery V2は、専用ページに項目を選択・入力すれば比較的簡単にコードが生成できるのですが、"Related Posts" という関連記事の見出しラベル(Title)がどうしても日本語化できませんでした。複数の稼動中 Google Blogger ブログで検証しましたが、どれも NG。設定画面では、例えば Related Posts は関連記事、Recent Post は最新記事のように Title 変更項目があるのに、動作確認では Related Posts のまま。更には、Related Posts （関連記事）を書き出すように指定しても、Recent Posts (最新記事)を書き出してしまうバギーな挙動が見られます。もしかすると、ブラウザのキャッシュが悪戯しているのかもしれませんが、それでは再現性があるということですから、私としてはNGです。但し、英語版のブログであれば、今のところ問題はありません。
英語版 Blogger ブログに設置するにしても、レイアウト（CSS）が少し面倒だなという印象です。

3. 複数ラベル式
複数ラベル式は、関連記事の件数をなるべく多く表示したいブロガー向き。１ラベルごとに１０件の関連記事を指定したら、５ラベルで５０件の関連記事・・・。関連記事だけで、30～40cmくらい高さがあります。。。サイドバーが長い、１記事が短い、バランスが悪い、という場合はオッケーかと。

4.３行コード式
AJAXなのかJSONなのか、何らかの仕様変更で、ボタンを押さないと関連記事が表示されないから私は使用をやめました。英語ブログでかつ、訪問者がボタンをクリックして関連記事を展開することに特に違和感がない場合はオッケー。

5. Linkwithin

ここまでご説明して来ましたのも、Linkwithin をお勧めしますよという長い長い前振りです。Linkwithin は、ブログのURL、ブログプラットフォーム、表示する列数、メールアドレス、背景色濃淡の５項目を入力・選択すればコードが生成できます。コードは１つのブロック（かたまり）ですから、関連記事として表示させたい場所１箇所にコードを貼り付けるだけで完成です。
サムネイル付きの関連記事です。記事中にサムネイルがないブログの場合は、テキスト形式で普通の関連記事表示と同じような形式で書き出されます。表示記事件数は最大で４件まで。推測ですが、例えばLinkwithinが選択してきた関連記事４本のうち２本にサムネイルがない場合は全てテキストで表示されるようです。１本だけサムネイルが無いときはLinkwithinから代替の画像が表示されます。アルゴリズムは非公開なので本当のところは判りません。

Linkwithin は Google Blogger だけが対象ではありません。他のブログサービスにも設置できます。管理しているブログやサイトに一気に貼り付けていくときも貼り付けの操作に一貫性がありますから作業効率は良いです。個人的にはデメリットらしきことも無いわけではないのですが、長くなりますので関連記事はLinkwithin で良いんじゃない？という結論で締めくくらせて頂きます。