メモの整理: google.feeds.FeedControlクラスですが

2011/06/11

google.feeds.FeedControlクラスですが

google.feeds.FeedControlクラスですがやはり細かい出力設定はできないみたいです。
ちょっと不便ですが複数呼び出しだとこんな感じでしょうか？
関数化するぐらいですかね。

タグの内部に設定しているところはご愛嬌という事で。
スタイルで設定するとBloggerではうまく動かなかったんですよね。

サンプルではアマゾンの新着情報を取り込んでいます。
動作結果はアマゾンベストセラーのページになります。

※紙幅の関係上、一部文字列が折り返されていますが、折り返さず１行で入力してください。

<!--<style type="text/css">
.bookbox{margin-bottom: 75px;width: 600px}
</style>
-->

<div id="feed_1">
<p>
しばらくお待ちください。</p>
</div>
<div id="feed_2">
<p>
しばらくお待ちください。</p>
</div>

<script type="text/javascript" src="http://www.google.com/jsapi?key=ご自分のAPIキー"></script>
<script type="text/javascript">
google.load("feeds", "1");
</script>

<script type="text/javascript">

//-----------------------------------------------------
//RSS単位の処理
//-----------------------------------------------------
function loadFeed2(feed,feedName) {

    // 記事を最大10件読み込む
    feed.setNumEntries(10);
    // 記事を読み込む
    feed.load(function(result) {
        var html;
        // 読み込みに成功したときの処理
        if (!result.error) {
            // サイトのタイトルを出力
            html = '<h1>
<a href="' + result.feed.link + '">' + result.feed.title + '</a></h1>
';
            // 各記事の情報を順に出力
            if (result.feed.entries.length) {
                for (var i = 0; i < result.feed.entries.length; i++) {
//                html += '<div class="bookbox">';
                html += '<div style="margin-bottom: 75px;width: 450px">';
                html += '<ul>';
                    // 各記事のタイトルと概要を出力
                    var entry = result.feed.entries[i];
                    html += '
<li><a href="' + entry.link + '">' + entry.title + '</a>';
                    html += '<span class="content">' + entry.content + '</span></li>';
                html += '</ul>';
                html += '</div>';
                }
           }
       }
       // 読み込みエラー時の処理
       else {
           html = '<p>
フィードの読み込みに失敗しました。</p>';
       }
       // 読み込み結果を、idが「feed」の要素に流し込む
       var container = document.getElementById(feedName);
       container.innerHTML = html;
    });
}

//-----------------------------------------------------
//コールバック
//-----------------------------------------------------
function loadFeed() {
    // 初期化
    var feed_1 = new google.feeds.Feed("http://www.amazon.co.jp/rss/bestsellers/books/492350/ref=pd_ts_rss_link");
    var feed_2 = new google.feeds.Feed("http://www.amazon.co.jp/rss/bestsellers/books/492352/ref=pd_ts_rss_link");

    loadFeed2(feed_1,"feed_1");
    loadFeed2(feed_2,"feed_2");
}

// ページが読み込まれたら、loadFeed関数を実行する
google.setOnLoadCallback(loadFeed);
</script>

参考：
JavaScriptで外部フィードを手軽に取り込める
Google Feed APIで3分マッシュアップ

ブログパーツを自作しよう Webサービス+JavaScript編