google.feeds.FeedControlクラスですが

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

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

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

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

view plainprint?

1. <!--<style type="text/css">  
2. .bookbox{margin-bottom: 75px;width: 600px}  
3. </style>  
4. -->  
5.   
6. <div id="feed_1">  
7. <p>  
8. しばらくお待ちください。</p>  
9. </div>  
10. <div id="feed_2">  
11. <p>  
12. しばらくお待ちください。</p>  
13. </div>  
14.   
15. <script type="text/javascript" src="http://www.google.com/jsapi?key=ご自分のAPIキー"></script>  
16. <script type="text/javascript">  
17. google.load("feeds", "1");  
18. </script>  
19.   
20. <script type="text/javascript">  
21.   
22. //-----------------------------------------------------  
23. //RSS単位の処理  
24. //-----------------------------------------------------  
25. function loadFeed2(feed,feedName) {  
26.   
27.     // 記事を最大10件読み込む  
28.     feed.setNumEntries(10);  
29.     // 記事を読み込む  
30.     feed.load(function(result) {  
31.         var html;  
32.         // 読み込みに成功したときの処理  
33.         if (!result.error) {  
34.             // サイトのタイトルを出力  
35.             html = '<h1>  
36. <a href="' + result.feed.link + '">' + result.feed.title + '</a></h1>  
37. ';  
38.             // 各記事の情報を順に出力  
39.             if (result.feed.entries.length) {  
40.                 for (var i = 0; i < result.feed.entries.length; i++) {  
41. //                html += '<div class="bookbox">';  
42.                 html += '<div style="margin-bottom: 75px;width: 450px">';  
43.                 html += '<ul>';  
44.                     // 各記事のタイトルと概要を出力  
45.                     var entry = result.feed.entries[i];  
46.                     html += '  
47. <li><a href="' + entry.link + '">' + entry.title + '</a>';  
48.                     html += '<span class="content">' + entry.content + '</span></li>';  
49.                 html += '</ul>';  
50.                 html += '</div>';  
51.                 }  
52.            }  
53.        }  
54.        // 読み込みエラー時の処理  
55.        else {  
56.            html = '<p>  
57. フィードの読み込みに失敗しました。</p>';  
58.        }  
59.        // 読み込み結果を、idが「feed」の要素に流し込む  
60.        var container = document.getElementById(feedName);  
61.        container.innerHTML = html;  
62.     });  
63. }  
64.   
65. //-----------------------------------------------------  
66. //コールバック  
67. //-----------------------------------------------------  
68. function loadFeed() {  
69.     // 初期化  
70.     var feed_1 = new google.feeds.Feed("http://www.amazon.co.jp/rss/bestsellers/books/492350/ref=pd_ts_rss_link");  
71.     var feed_2 = new google.feeds.Feed("http://www.amazon.co.jp/rss/bestsellers/books/492352/ref=pd_ts_rss_link");  
72.   
73.     loadFeed2(feed_1,"feed_1");  
74.     loadFeed2(feed_2,"feed_2");  
75. }  
76.   
77. // ページが読み込まれたら、loadFeed関数を実行する  
78. google.setOnLoadCallback(loadFeed);  
79. </script>  

<!--<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編

蒲生 睦男 シーアンドアール研究所 2008-08-20 売り上げランキング : 477768 Amazon 楽天ブックス 7net bk1 ブックオフ e-hon 図書館 by ヨメレバ

ぽちっとよろしくお願いします。m(_._)m

にほんブログ村

関連記事:

Web API

• MashUpですが
• POSスキャナの活用法②
• POSスキャナの活用法
• AmazonのAPI
• Web API使ってみてます。

Google

• 意外な落とし穴
• Google Ajax Search APIのraw search
• 記事タイトルの重複チェック
• Google Analyticsでアクセスの多い記事と国別の傾向を見てみました。
• Google Analyticsで閲覧開始ページ等の情報を見てみました。

サンプル

• サンプルについてですが・・・
• チョイはまり
• 文字コードのチェック
• 山椒はぴりりと
• XML-RPCのPING送信ですが