F.Ko-Jiの「一秒後は未来」ではウェブやSEO、API、RSSといった技術的ネタから、ちょっとした豆知識や梅酒、エンタメ系まで様々な情報を不定期にお届けしています。

F.Ko-Jiの「一秒後は未来」 > Google > Google AJAX Feed API でブログの人気エントリーを表示するサンプル

Google AJAX Feed API でブログの人気エントリーを表示するサンプル

2007/04/19 00:18:00

Google からまた新しいAPIがリリースされました。今回は、指定したフィードを取得してJSONやXML形式で結果を返してくれる、 Google AJAX Feed API です。

Google AJAX Search API Blog: Announcing the Google AJAX Feed API

対象がフィードのみなので、 Google AJAX Search API よりもシンプルです。

早速サイトにあったサンプルコードを参考にして、このブログの人気エントリーを表示するサンプルを作成してみました。

サンプルはこちら

ソースは以下のようになっています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Feed API でブログの人気エントリーを表示するサンプル</title>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAsLXCLqvsRiiJaBCS-_mMcRTJHeJbbL2-eEcwuol3A-ymf21LmBSnUkKoAtst8QPp2Oi9KJYLcbZVew"></script>
    <script type="text/javascript">
 
    google.load("feeds", "1");
 
    function initialize() {
      var feed = new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?mode=rss&url=http%3A%2F%2Fblog.fkoji.com%2F&sort=count&threshold=5&include_news=1");
      feed.setNumEntries(15);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            var a = document.createElement("a");
            a.href = entry.link;
            a.appendChild(document.createTextNode(entry.title));
            div.appendChild(a);
            var img = document.createElement("img");
            img.src = "http://b.hatena.ne.jp/entry/image/" + entry.link;
            with(img.style) {
                verticalAlign = "middle";
                marginLeft = "4px";
            }
            div.appendChild(img);
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
 
    </script>
  </head>

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

詳しいリファレンスは以下のページにあります。
Google AJAX Feed API - Class Reference

[2010-01-12] RSS フィードの URL が変わりました。お手数ですが RSS リーダーへの再登録をお願いします。

API / Google / Javascript / RSS

English version

2007/04/19 00:18:00 by F.Ko-Ji
パーマリンクコメント (0) トラックバック (6) Google

前のエントリー: « SuicaもPASMOも“数センチ浮かせて1秒静止”がポイント
次のエントリー: 無料で使える7つのSEOツール »

トラックバック

このエントリーのトラックバックURL:

この一覧は、次のエントリーを参照しています: Google AJAX Feed API でブログの人気エントリーを表示するサンプル:

» 早速Google AJAX Feed APIを導入してみました from [Z]ZAPAブロ〜グ2.0
Googleから「Google AJAX Feed API」が公開されました。このAPIは、他ドメインのRSSやAtomの一般的なフィードを簡単に取得... [詳しくはこちら]

» Google AJAX Feed API の AJAX SlideShow を使ってみよう from F.Ko-Jiの「一秒後は未来」
Google AJAX Feed API - AJAX SlideShowではGoogle AJAX Feed APIを利用したスライドショーのライブラリ... [詳しくはこちら]

» Google AJAX Feed API で RSSテイッカー作った from PHPとAjaxと
以前に、他サイトのRSS情報を取得して、ティッカー風に表示するツールを作成した... [詳しくはこちら]

» レビューポスターを使ってMovabaletypeで人気エントリー表示 from WEBデザイン　BLOG
サイドフィード株式会社が提供するサービス”レビューポスター”を使って、Movabletypeに人気エントリー表示するようにしました。他にもjavascri... [詳しくはこちら]

» ブログのサイドバーに自分のはてなブックマークのRSSフィードを表示する from コハリトりみっと
　はてなブックマークウィジェットは、ブログに任意のサイトの注目エントリーを貼り付けられるウィジェットですが、私がしたいのは注目エントリではなく、「自分のブ... [詳しくはこちら]

» ブログのPVを増やすための4つの手軽でシンプルな方法 from WEBマーケティングブログ
ブログのページビューを上げるには、おもしろいネタを探して記事に起こしたり、時事... [詳しくはこちら]

タイトル:

URL:

リンク用HTMLタグ:
<a href="http://blog.fkoji.com/2007/04190018.html">Google AJAX Feed API でブログの人気エントリーを表示するサンプル - F.Ko-Jiの「一秒後は未来」</a>