2013/01/26

Blogger ヘッダー部におすすめ記事を動的表示する手法

海外サイトで提供されているBloggerテンプレートを解析して時に「これは賢いな!」と思ったヘッダー部におすすめ記事を動的表示する手法をメモ。

本当は、おすすめ記事の動的表示をBloggerの標準機能として提供してくれれば嬉しいんですけどね・・・

今回の概要

説明ベタなので、画像を使って今回の概要を説明します。

image

上記画像は私が管理しているBloggerサイトです。

ページ一覧ガジェットの下に「Top Stories」欄があり、おすすめ記事が4個並べていますが、おすすめ記事の静的表示はXHTMLとCSSの知識があれば可能です。

しかし、静的表示のため修正作業は[テンプレートを開く]→[タイトル・リンクを書き換え]・・・と、頻繁に修正する場合はちょっと大変です!

正直、やりたくありません!!

そこで、動的におすすめ記事を表示させるか?をテンプレートを紐解いて説明したいと思います。

解析したBloggerテンプレート

Hồng Hòa Viさんが作成されたBloggerテンプレート「MetroBTK - The Metro UI Blogger Templates」を簡単にですが解析してみました。

http://blog.nguoiaolam.net

なんちゃってエンジニアの私がいうのもなんですが、テンプレートを解析するのは非常に勉強になりますよ。

今回の内容をご自身ブログに適用するには

  • Blogger用Tag
  • HTML
  • CSS

の知識が必要です。

ヘッダー部におすすめ記事を動的表示する手法
  1. 予め、おすすめ記事欄に表示させる専用ラベルを作成し、対象記事に関連付けます。Hồng Hòa Viさんのサポートページではhotラベルを作成しています。
  2. [レイアウト]→配置したい場所に[ブログリスト]を登録
    image
  3. hotラベルのフィードURL(start-indexパラメータ付)を登録します。
    登録URLはhttp://xxxx.blogspot.jp/feeds/posts/default/-/hot?start-index=x
    詳しくは後ほど説明。
    image
  4. BlogListの登録したフィードの「タイトル」・「サムネイル画像のURL」・「記事URL」を抽出・表示するためのHTMLおよびBlogger用Tagを記述します。
    image
  5. CSSを記述し、見た目を整形します。
    image

特定ラベルのフィードURL

Bloggerのサポートページでも説明されていますが、特定ラベルのフィードを取得するURLは下記のように記述します。

http://xxxx.blogspot.jp/feeds/posts/default/-/hot

上記URLはhotラベルにしていますが、登録済みのラベルに変更してください。

下記画像は実際に特定ラベルの全記事を取得します。

image

記事はsummaryのため取得データはそこまで大きくありません。

実際におすすめ記事として表示させるわけですが、下記画像のようにstart-indexパラメータを切り替えることで記事の取得位置を制御します。

2013-01-14_201808

例えば、3番目の記事を取得したい場合は

http://xxxx.blogspot.jp/feeds/posts/default/-/hot?start-index=3

とします。

ちなみに、私の環境ではxxx.blogspot.comだとフィードが取得できなかったのでxxx.blogspot.jpに変更しました


Hồng Hòa Viさんのテンプレートを解析してがすごいな!と思ったは、Bloggerの標準機能のみでおすすめ記事を動的に表示している点です。

初期設定は[レイアウト]画面から行えますし、新規記事におすすめ記事ラベルの貼れば動的にヘッダー部が変化します。

勉強がてらに導入してみてはどうでしょうか。

スポンサーリンク

スポンサーリンク