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

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

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

最後に、表示したい部分へ<div id=”feed”></div>を貼り付けて終了です 動作チェックするとエントリとコンテンツが表示されると思います

まとめ 案外簡単に設置はできたが 部分的ではあるけど無駄な表示があるので試し試しでjsファイルを更新しながら表示を確認して仕上げました。コードが書けなくても できるね

これでAWSのS3で静的ページながらコンテンツが更新されているかのようなページが出来が上がったぞ!! しかしBloggerのアクセスカウンターは増えないしBlogでアフェリエイトやっている人にとっては自虐ネタになりそうな・・・・

参考ページ:いくらさんのajaxtower

シェアする

  • このエントリーをはてなブックマークに追加

フォローする