Google AJAX Feed APIを使用して最新記事を表示する:humming bird

Google CodeにあるGoogle AJAX Feed APIを利用してブログに最新記事(Recent Posts)を表示する。

サンプルにある『AJAX Dynamic Feed Control』(下記参照)を使用します。

AJAX Dynamic Feed Control

こちらでベースとなるコードを生成し、その後変更が必要な部分を編集します。
このまま使用したのではいろいろと不都合があるので、Optionの設定で自分用にカスタマイズしましょう。

変更可能なプロパティの設定例:

numResults : 5,
displayTime : 2000,
fadeOutTime : 1000,
pauseOnHover : true,
title : "",
linkTarget : google.feeds.LINK_TARGET_SELF,
stacked : false,
horizontal : false

numResults - 表示するフィードの数
displayTime - メイン(上部)に表示される記事の表示時間
fadeOutTime - 表示されている記事がフェイドアウトする時間
pauseOnHover - 下部に表示されるフィード(文字列)にマウスを合わせたときにその該当記事が表示されるか否か
title - タイトルを指定
linkTarget - 表示するウィンドウの指定。
stacked - 複数のフィードを指定したときにフィード別にタイトルを表示する
horizontal - "true"に設定すると横長一行のスタイルになる

その他詳しくは以下のページで確認して頂きたい。

Class Reference

http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/reference.html

コード例)

<head>
<script src="http://www.google.com/jsapi?key=notsupplied-wizard" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" media="screen" />
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [{url: 'http://yas-hummingbird.blogspot.com/feeds/posts/default'}];
var options = {
numResults : 5,
displayTime : 2000,
fadeOutTime : 1000,
pauseOnHover : true,
title : "Recent Posts",
linkTarget : google.feeds.LINK_TARGET_SELF,
stacked : false,
horizontal : false
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
google.load('feeds',"1");
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
</head>
<body>
<div id="feed-control">
<span style="margin:10px;padding:4px;">Loading...</span>
</div>
</body>

上記の『google.load('feeds',"1");』この"1"はAJAX Feed APIのバージョンを表しています。