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

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

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

AJAX Dynamic Feed Control
http://www.google.com/uds/solutions/dynamicfeed/index.html

こちらでベースとなるコードを生成し、その後変更が必要な部分を編集します。
このまま使用したのではいろいろと不都合があるので、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のバージョンを表しています。

Google AJAX Feed API への登録

その他、API キーの登録については下記のページにて解説、登録できますの参照下さい。

Google AJAX Feed API への登録
http://code.google.com/intl/ja/apis/ajaxfeeds/signup.html

0 Comments:

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

Recent Posts