2013/12/17

Blogger で関連記事ウィジェットを作る方法

立て続けに Blogger 関連小技です。

今回は Blogger で「関連記事ウィジェット」を作る方法をご紹介します。

関連記事ウィジェット、というとちょっとたいそうな感じですが、DBを使ったり統計情報を使ったりとコムズカしいことをしているわけではないありません。ごくごくシンプルなものです。こんなの。

  • 今表示しているページの最初の投稿と同じタグを持つ投稿
  • フィードから抜き出してきて
  • 直近のものから順番に
  • リスト表示する

ライブラリとしては jQuery を、データソースとしては Blogger のフィード( /feeds/posts/summary でアクセスできるアレ )を使っています。

実際のイメージはこんな感じ。スタイルシートは別のところで適用しています。


実際に動いているものはこちらのブログにあります。
Life with Python

HTML/JavaScript コードを GitHub Gist に置いているので、 Blogger をお使いで興味のある方はご自身でもぜひ試してみてください。

使い方としては、 Blogger の管理画面 → レイアウト → ガジェットを追加HTML/JavaScript と進んだ先の入力箇所に以下のコードを貼り付けて保存、とすればOKです。


(こちらの GitHub Gist のページだともう少し見やすいです)

ちなみに前提条件として以下の2点があります。
  1. ウィジェットの読み込みよりも前に jQuery が読み込まれていること
  2. ページ内の投稿のタイトルのクラス属性が post-title となっていること

これまたちなみに、「 JavaScript って何?」という状態の方がトライすると、ハマったときが大変なので、、そういう方は周りの詳しい方にお願いされた方がよいかなと、、思います。


Blogger で jQuery を使う方法については次のページでご紹介しているのでよろしければ。
Blogger でアーカイブページを作る方法