HOME > JavaScript > Google feed API で外部ブログのrssを他サイト任意のページに表示する

Google feed API で外部ブログのrssを他サイト任意のページに表示する


APIキーがいらなくなって初めて試したメモ。
こちらのサイトのおかげさまで無事表示できました。ありがとうございます<(_ _)>

Google AJAX Feed API入門

上記サイト中のこのページのスクリプトから下記内容を少しだけ編集。

  • サイトタイトルは不要なので削除
  • 日付を左、記事タイトルを右に表示（css）
  • 表示記事数を指定

下記コードを別ファイル「getfeed.js」とか任意の名前を付けて保存
スタイリングはcssでやっておきます。

google.load("feeds", "1");

function initialize() {
  var feedurl = "http://www.mysite.com/?feed=rss2"; //表示したいサイトのrssのurl
  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(5); //()内数字は表示記事数
  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];

        var pdate = new Date(entry.publishedDate);
        var strdate = pdate.getFullYear() + '年' + (pdate.getMonth() + 1) + '月' + pdate.getDate() + '日';
        htmlstr += '<dl><dt class="date">' + strdate + '</dt>';
        htmlstr += '<dd class="naiyo"><a href="' + entry.link + '">' + entry.title + '</a></dd></dl>';
      }
       container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ":" + result.error.message);
    }
  });
}
google.setOnLoadCallback(initialize);

html、<head>内に外部jsファイル読み込みタグを書く。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://www.mysite.com/js/getfeed.js"></script>

feedを表示したいところ（html内）に下記コードを置く。

<div id="feed"></div>

似たタイプの記事

トップへ戻る