http://saskwave.blogspot.jp/2014/05/blogger-related-posts.html
この記事でBloggerにも外部サービスに依存しない関連記事ウィジェットを実装したいと書きましたが、実装しました。
テンプレートは弄らないで実装できないか検討しましたが、テンプレートを弄らないとそもそも個別記事のラベルを取得する方法がないので、結局テンプレートを弄ることにしました。そのかわり最小限の編集で済むような実装にしてあります。
この関連記事ウィジェットの特徴
- jQueryライブラリとsaskwave.jsを使ったシンプルな実装
- コードはテンプレートへ追加するだけ
- 関連記事の表示は即時反映されます
- 表示件数を任意の数にしたり、関連記事ウィジェットのタイトルを編集できます
- 基本的な表示の制御はCSS(スタイルシート)のみで行えるようなHTML構造
- 見た目重視でサムネイル画像を全面採用 (記事に画像を掲載していない場合、代替画像が表示されます)
- サムネイル画像は自動的に必要最低限の大きさにリサイズされるので、通信データ量を削減できる (通信が遅いモバイル端末に有利)
- デフォルトで用意されている関連記事ウィジェットの表示方式は4種類 (見た目については下記を参照)
- 記事のラベルから過去記事との関連度を測って記事を抽出するので、関連度が高い記事をリストアップできる (関連記事は【関連度＋日付降順】に並びます)
- 必要なコードだけあれば、外部サービスに依存しないので、Blogger単独で利用可能 (Blogger以外のサービスに影響されません)
一番の利点は、外部サービスに影響しない点と、ちゃんと関連度順に並ぶという点ですね。
あと見た目も選べるのも利点です。
それはさておき、デフォルトで用意されている表示方式は下記の通りです。
4種類(tile|vertical|horizon|none)あり、選択するだけで見た目が変わります。
