コードが書けない人向け　Google AJAX Feed APIでBlogなどの新規エントリをWebページに埋め込む方法

相変わらず、コードは書けませんが先人の知恵を拝借して生きております。

今回は、AWSのS3で公開した静的ページへBlog(Blogger)などにエントリした記事を表示させるための仕組みを導入したいと思います。
Bloggerをiframeでページに埋め込むことを考えたのですが調整が面倒なのでこの方法にした。

※実際にFeedで取得した結果　GoogleJapanのBloggerです

準備物：AWS-S3の静的ページ・RSSのURL（設定必要な場合）・HTML・jsファイル
※BlogはGoogleBloggerを例としていますが他のブログサイトなども基本同じだと思います

BloggerのRSSを確認しておきましょう
http://ブログの名前.blogspot.com/feeds/posts/default?alt=rss です
GoogleJapanのブログの場合だと
http://googlejapan.blogspot.com/feeds/posts/default?alt=rssとなります

次にHTMLとjsファイルを準備しますいくらさんのajaxtower.を参照しましょう。　細かい部分まで説明があります。
HTMLの<head></head>の間に宣言文を入れます
<!– Google Feed API –>
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript” src=”./js/feed3.js”></script>

そして赤字部分で指定しているjsファイルを作成します
私は、最新エントリ3件をタイトルとコンテンツ含め表示させるようにしました。
ファイル名：feed3.js
========================================
google.load(“feeds”, “1”); google.load(“feeds”, “1”); function initialize() {
var feedurl = “http://googlejapan.blogspot.com/feeds/posts/default?alt=rss”;
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(3);
feed.load(function (result){
    if (!result.error){
      var container = document.getElementById(“feed”);
      var htmlstr = “”;       for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];         htmlstr += ‘<b><h3><a href=”‘ + entry.link + ‘”>’ + entry.title + ‘</a></h3></b>’;
        htmlstr += entry.content;
        htmlstr += ‘<p>日付 :’ + entry.publishedDate + ‘</p>’;
        for (var j = 0; j < entry.categories.length; j++) {
          htmlstr += ‘[‘ + entry.categories[j] + ‘]’;
        }
        htmlstr += ‘</p>’;
      }        container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + “:” + result.error.message);
    }
});
} google.setOnLoadCallback(initialize);
========================================