Google AJAX Feed APIで静的HTMLに外部ブログを読み込み表示させる

静的なHTMLページに、Google AJAX Feed APIを使って、feedを呼び出し表示させる方法です。
何度かやっているのに、毎回忘れて調べ直すので忘れないようにメモ！

jsファイルを用意する（外部として読み込み）

参考にさせていただいたサイト
http://ascii.jp/elem/000/000/407/407910/

1
2
3
4
5
6
7
8
9
10
11
12
13
function loadFeed() {
    var feed = new google.feeds.Feed("フィードのURL");
    feed.setNumEntries(読み込む記事の最大数);
    feed.load(function(result) {
        if (!result.error) {
            フィード全体の情報（サイトのタイトル等）を出力
            for (var i = 0; i < result.feed.entries.length; i++) {
                個々の記事の情報を出力
            }
        }
    });
    google.setOnLoadCallback(loadFeed);
}

こう書けば出力してくれるそうですが、リスト表示にしたり、表示件数を調整したり、日付を入れたり、タイトルにリンクを貼ったりしたかったので触ってみました。
それがこちら↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// JavaScript Document
google.load("feeds", "1");
function initialize() {
  var feedurl = 'http://feedのURL';
  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(5);
  feed.load(dispfeed);
  function dispfeed(result){
    if (!result.error){
      var container = document.getElementById('feed');
      var htmlstr = '';
      htmlstr += '<ul>';
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var text = entry.contentSnippet.substr(0,100);
        text = text + '...';
　　　　htmlstr += '<li class=\"blog_list_day\">';
        htmlstr +=  createDateString(entry.publishedDate);
        htmlstr += '</li>';
        htmlstr += '<li class=\"blog_list_title\">';
        htmlstr += '<a href=\"' + entry.link + '\">' + entry.title + '</a> ';
        htmlstr += '</li>';
        htmlstr += '<li class=\"blog_list_text\">';
        htmlstr += text;
        htmlstr += '</li>';
      }
      htmlstr += '</ul>';
      container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ':' + result.error.message);
    }
  }
}
//日付表記を変換
function createDateString(publishedDate){
  var pdate = new Date(publishedDate);
  var pday = pdate.getDate();
  var pmonth = pdate.getMonth() + 1;
  var pyear = pdate.getFullYear();
  var strdate = pyear + "年" + pmonth + "月" + pday + "日" ;
  return strdate;
}
google.setOnLoadCallback(initialize);

※5行目の　var feedurl = 'http://feedのURL';　の部分に表示したいブログのfeedURLを入れます。
※8行目のfeed.setNumEntries(5);の(5)を(10)にすれば、10件表記に出来ます。

head内にscriptを記述

1
2
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="js/google_rsscode.js"></script>

※今まではこの機能を使うにあたり、APIキーというものを取得しないといけなかったので下記のように記述していました。
＜script type="text/javascript" src="https://www.google.com/jsapi?key=APIキー">
それが今はこのように書けばAPIキーなしで動くようです。
＜script type="text/javascript" src="https://www.google.com/jsapi>

表示したい部分にHTMLを挿入

1
2
3
<!--ブログ更新リストここから -->
<div id="feed"></div>
<!--ブログ更新リストここまで -->

先に記述したjavascriptのコードは、リスト表示しているのでそのまま使うならこのCSSも一緒に使うといい感じに仕上がります！
※名前などは適当に変えて下さいね↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 最新ブログ記事読み込み feed */
#feed{
    margin-bottom: 20px;
}
.blog_list_day{
    padding: 5px 10px;
    float: left;
    color: #9F9C20;
}
.blog_list_title{
    border-bottom: 1px dashed #CCC;
    padding: 5px 10px;
}
.blog_list_text{
    padding: 5px 10px 15px;
}