Google AJAX Feed API

@pureminami's tweetみなみさんが静的ページに WordPress の新着記事一覧を表示する方法を急募していた。
これを実現するために JavaScript で RSS フィードを取得して表示する方法を調べたので、自分用にメモ。
使用するのは Google AJAX Feed API
Google AJAX Feed API を使用するには、APIキーが必要。
Google Map を利用する際に取得した API キーがあれば使えるが、無ければGoogle AJAX Feed API への登録をしておこう。

まずは、Google API のロード。
<head>内に以下の記述を追加して、Google API をロードしよう。
※ YOUR_KEY_HERE には取得しておいたGoogle AJX Feed API のキーをセットする。

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>

次に実際にRSSフィードの内容を表示するための JavaScript。こんな感じ。


google.load("feeds", "1");
google.setOnLoadCallback(function() {
var feed = new google.feeds.Feed("http://example.com/feed");
feed.setNumEntries(5);
feed.load(function(result) {
if (!result.error) {
var ul = document.createElement("ul");
for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var li = document.createElement("li"); var a = document.createElement("a"); a.setAttribute("title", entry.title); a.setAttribute("href", entry.link); a.appendChild(document.createTextNode(entry.title)); li.appendChild(a); ul.appendChild(li); } var container = document.getElementById("archives"); container.appendChild(ul); } }); });[/javascript] 3行目の http://example.com/feed は、読み込みたいRSSフィードのURL。 4行目の feed.setNumEntries(5); は、デフォルトでは4件しか取得しないため、5件取得するためには feed.setNumEntries() に数値をセットしましょう。 これで、id="archives" な要素の子要素として、RSSフィード一覧がセットされている <ul> 要素が追加表示されます。

6 thoughts on “Google AJAX Feed API

  1. Thanks

    こんにちはjava初心者です。
    こちらの記事を参考にして、Wordpressの最新記事埋め込み、うまくできました! ありがとうございます。
    日付も入れたい場合はどうのようにすればよいのか教えていただきたいです。
    よろしくお願いいたします。

    返信
  2. honmaji

    wordpressのフォーラムの書き込みを見て来ました。
    実際にやってみたのですが、上手くできませんでした。
    mapsのキーを使いました。
    とした場合、この中にRSSの 要素生成されるという理解で宜しいのでしょうか?

    返信
  3. ピンバック: WordPress の特定キーワードの検索結果をリスト表示する | dogmap.jp

  4. ピンバック: トップページにお知らせを表示した : スタジオくまかけ

  5. ピンバック: EC-CUBEにWordPressの新着を表示させる

  6. ピンバック: hiromasa.another :o)

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください