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 でアーカイブページを作る方法

7 件のコメント:

匿名 さんのコメント...

はじめまして。関連記事を表示したくて検索していたところ、こちらの記事にたどり着きました。
仕様を以下のように変更したいのですが、私はあまりJSに詳しくないのでどのように変更すれば良いか分かりませんので、カスタマイズいただいたものを公開していただけるととてもありがたいです。

[1]関連記事のサムネイルを表示させたい
JSの記述を変更することで縦横のサイズが32, 48, 64, 72, 104, 144, 150, 160pxの正方形から選べるとベストです。

[2]リストタグではなく定義リストにしたい
具体的には以下のような感じです。

<dl>
<dt><a href="関連記事へのリンク"><img src="記事のサムネイルURL"></a></dt>
<dd><a href="関連記事へのリンク">関連記事のタイトル</a></dd>
</dl>

ご多忙かと思いますが宜しくお願いいたします。

ゴトウハヤト さんのコメント...

はじめまして。そうでしたか!
コメントいただきありがとうございます。

反応が遅くなり申し訳ありません。このところバタバタしてしまっておりますので、また近いうちに改めてお返事させていただきますね。

Blogger の JSON データにサムネイルの URL も含まれている感じですので実現することは可能かとは思いますが、もう少しお待ちいただけますと幸いです。。

匿名 さんのコメント...

お返事ありがとうございます!
ブログの更新も止まっておられましたので、
もしかしてご覧になってないかなと思いましたが、
ダメモトで連絡してみて良かったです。

こちらが勝手にお願いしていることですので、お手すきの時で構いません。ご無理のない範囲で作業いただければと思います。

宜しくお願い申し上げます。

ゴトウハヤト さんのコメント...

ご丁寧にお返事いただきありがとうございます。

あげてくださった条件を満たすコードを別のページに載せてみました。サムネイルつきの定義リストが表示されてくるかと思いますので、一度お試しください。

Blogger で現在のページの記事の関連記事を表示するウィジェット...

サムネイルの縦横のサイズに関してですが、コードの 14 行目あたりに「 THUMBNAIL_SIZE 」という変数があります。これがサムネイルの縦横のサイズを指定する部分となっています。これがいま「12」となっているのですが、これを「32」「48」などと変えていただけくとサムネイルのサイズが変更できます(ちなみに、オリジナルのサイズは 72 のもの限定のようですので、 72 よりも大きなサイズにすると画質が粗くなるかもしれません)。

いただいたリクエストが非常に明確で、やりやすかったです。わからないことやお困りのことなどございましたらまたコメントをいただければと思います。

ゴトウハヤト さんのコメント...

ちなみに、画像のない記事についてはサムネイルが存在しないため、画像の部分が空になる形にしています。

画像が存在しない場合のデフォルト画像を指定されたい場合には、 113 行目あたりのコードを次のように変更いただくとよろしいかと思います。

変更前
thumbnail: e.media$thumbnail ? e.media$thumbnail.url : '',

変更後
thumbnail: e.media$thumbnail ? e.media$thumbnail.url : '(ここにデフォルト画像の URL を入れてください)',

ご参考になればと思います。

匿名 さんのコメント...

こんばんは。
お返事が遅くなりまして申し訳ありません。

さきほど実験してみたところ、うまく表示されました!

いったん導入してみて様子を見ながらまた何かありましたらご相談させていただければと思います。

お忙しいところ、本当にありがとうございました。

今後とも宜しくお願いいたします。

取り急ぎお礼まで。

ゴトウハヤト さんのコメント...

> お返事が遅くなりまして申し訳ありません。

いえいえ、とんでもないです。ご丁寧にありがとうございます。
無事に表示されたとのことで何よりです!

最近新しい投稿を書けておりませんが、、また何かございましたらお気軽にコメントいただければと思います。