Google Feed APIを利用してRecent Postsの数を増やしてみた

Bloggerで用意されたFeedウィジェットは投稿数が5つまでしか取得できない。
このFeedウィジェットをちょっと調べてみるとどうもGoogle Feed APIを使用してるっぽい。
そうだとしてもBloggerはGoogleのサービスなのだから不思議ではない。

で、どうせGoogle Feed APIを使用するのなら自分でやれば投稿数も自由に変えられるので、ウィジェットに頼らず、Google Feed APIを使用して自力でFeedを取得するコードを書いてみた。

jQueryを使用したものとそうでないものの二種類。

ページ下部にzipファイルのテキストリンクがあります。

Usage

HTMLの編集からテンプレートのheadタグ内に以下のタグを挿入します。
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
自身で試しましたが、APIキーは必要ないはずです。これは自身のフィードを取得しているのでクロスドメインではないからかな?

取得したフィードを表示するためにターゲットとなる要素が必要になるので、レイアウト画面で空のHTMLウィジェットを追加します。

追加した空のHTMLウィジェットのIDが分らなければならないので以下の3つの内のどれかの方法で対応してください。
  • 追加した空のHTMLウィジェットのIDを引数として渡す。
  • HTMLの編集でID自体を'HTML99'に変更する。
  • ソースを書き換える。

Feedを追加する対象の要素は以下のような階層になっている必要があります。(タイトルは無くても良い)
<div id="HTML99" class="widget HTML">
  <h2 class="title">Recent Posts</h2>
  <div class="widget-content"></div>
</div>


ソース下部で実行しているので、引数で渡すフィードのURLを適宜書き換えて下さい。
Code:
bloggerGoogleFeed('http://yas-hummingbird.blogspot.com/feeds/posts/default?redirect=false');


Default Option Value:
  • targetID:'HTML99' … コンテンツを追加する要素
  • numEntries:10 …取得する投稿数
  • pubDate:true … 投稿日を表示するか否か
  • author:false … 投稿者を表示するか否か
  • delimiter:' - ' … 投稿日、投稿者の区切り文字
  • dateFormat: … 投稿日のフォーマットを操作するメソッド
「dateFormat」は投稿日のフォーマットを自由に操作できるようにオプションで渡すことができるようにした。

Example:
bloggerGoogleFeed({
  targetID:'HTML2',
  numEntries:15
},'http://yas-hummingbird.blogspot.com/feeds/posts/default?redirect=false');

jsファイルの中に実行するコードは書かない方が良かったかな?

0 Comments:

Sony Style(ソニースタイル)
デル株式会社

Recent Posts