Google AJAX Feed APIでRSSフィードを表示

RSSフィード表示する方法はたくさんありますが、今回はGoogle AJAX Feed APIでRSSフィードを表示する方法を紹介します。

以前別のサイトでRSSを表示する際PHPを利用していましたが、Google AJAX Feed APIの方が安定しているので今はこちらを使ってます。

参考に当サイトの最新エントリー一覧を表示してみます。JavaScriptを利用しているのでもちろんFC2ブログでも利用可能です。表示件数は自由に変更できます。

最新記事一覧

という感じに表示されます。ソースは下記をご覧ください。GoogleのAPI keyは英語のページですが設置するサイトのURLを入力するだけで取得できます。

【追記 - 2012.09.13】現在はAPIキーなしでも動くようです。
【JavaScript】
<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したKeyを入力"></script>
<script type="text/javascript">

    google.load("feeds", "1");
 
    function initialize() {
var feed = new google.feeds.Feed("RSSフィードのURLを入力");
 <!--表示したいエントリー数-->
feed.setNumEntries(10);
      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("li");
            var a = document.createElement("a");a.href = entry.link;
 <!--別窓で表示しない場合は削除してください-->
            a.target = "_blank" ;
            a.appendChild(document.createTextNode(entry.title));
            div.appendChild(a);
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

</script>

で、body部分に以下のコードを挿入するとそこに表示されます。

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

シンプルですが使い勝手はいいと思いますので、ぜひお試しください。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
こういったところで質問していいのか迷いますが、もし宜しければご教示ください。
現在、Google AJAX Feed APIを利用して、JUGEMブログに好みのRSSを表示させようと試みています。そこで質問です。

APIキーは取得しました。
同時にサンプルコードも表示されました。

ちょっと未熟過ぎるのかもしれませんが、ここからが問題。

出力されたAPIキーにしろサンプルコードにしろ、既存のブログにあるHTMLのどの部分に貼付けるべきか、があまりに初歩的すぎて明記されてません。

キーはABQIAAAAv13wnNKAsTfI753CMdioOBTIZ~こんな風にあります。
で、サンプルコードも<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Str~ 
</head>
<body>
<div id="feed"></div>
</body>
</html>

という感じです。私は、このキーにしろ、コードにしろ、自分のHTMLのどの部分に貼付けるべきかがわかりません。<div id="feed"></div>は表示させたい場所に置けばいいのだと思いますが、あとがさっぱりなのです。

表示させる項目にはリンクも付けたいし、件数も調整したいし、複数のRSSを表示させたいのですが、まずはそれ以前の問題で頓挫しており泣きそうです。

まさにこの管理者様がサンプルで表示さえているように、リスト化してメインカラムに入れたいのですが・・・。

もしよろしければ教えてください。JUGEMの独自タグに変換すべき箇所がある場合はその旨指摘いただければ、こちらで修正しようかと思ってます。
【2010/10/13 13:07】 | はじめまして #cOmllyP6 | [edit]
javascriptについてはhead内でもbody内でも大丈夫ですよ。
ABから始まるAPIキーは赤字の「取得したKeyを入力」のところに入れてあげてください。

あと、どこのブログサービスを使っていようが特に問題ないと思われます。
【2010/11/28 23:30】 | - #E2ywrYdA | [edit]
ありがとうございます!! 助かりました!!!!
【2011/08/05 17:13】 | 感謝(^^) #- | [edit]
はじめまして。
サンプルを拝見して、RSSを設置いたしました。

seesaaブログで行ない、大変上手くいったのですが、
行間が狭くなってしまっているのですが、広く取ることはできるのでしょうか?

javaのことを知らない素人意見で申し訳ありませんが、
困っていますので、どなたか教えていただけたらと、
甘い考えではありますが投稿させていただきました。^^;

どうぞよろしくお願いいたします。
【2011/09/21 11:30】 | nao #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

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