コードが書けない人向け 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

シェアする

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

フォローする

adana escort adıyaman escort afyon escort ağrı escort aksaray escort amasya escort ankara escort antalya escort ardahan escort artvin escort aydın escort balıkesir escort bartın escort batman escort bayburt escort bilecik escort bingöl escort bitlis escort bolu escort burdur escort bursa escort çanakkale escort çankırı escort çorum escort denizli escort diyarbakır escort düzce escort edirne escort elazığ escort erzincan escort erzurum escort eskişehir escort gaziantep escort gebze escort giresun escort gümüşhane escort hakkari escort hatay escort ığdır escort ısparta escort istanbul escort izmir escort izmit escort kahramanmaraş escort karabük escort karaman escort kars escort kastamonu escort kayseri escort kilis escort kırıkkale escort kırklareli escort kırşehir escort kocaeli escort konya escort kütahya escort malatya escort manisa escort mardin escort mersin escort muğla escort muş escort nevşehir escort niğde escort ordu escort osmaniye escort rize escort sakarya escort samsun escort şanlıurfa escort siirt escort sinop escort şırnak escort sivas escort tekirdağ escort tokat escort trabzon escort tunceli escort uşak escort van escort yalova escort yozgat escort zonguldak escort