My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

2014/09/10 RSSフィードをサイトに実装する

RSSフィードを簡単にサイトに表示するには

Google Feed APIを使って、簡単にRSSフィードをサイトに表示する方法

Google Feed APIを使うと、簡単にRSSフィードをサイトに表示することができると知りました。
試しに、自身のブログサイトからfeed用URLを取得し、やってみました。



[コード]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
    var feed = new google.feeds.Feed("http://times-diary.hatenablog.com/feed");
    feed.setNumEntries(10);
    feed.load(function(result) {
        if (!result.error) {
            for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                $("#ret").append(
                    $("<div>").append(
                        $("<a>").attr("href", entry.link).text(entry.title))
                );
            }
        }
    });
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="ret"></div>
</body>
</html>


[表示結果]
f:id:sntkk3:20151115204100p:plain


※なお、はてなブログの場合、自身のブログサイトURLに、/feed あるいは、/rss を追加するとそのままフィード用URLとなることも知りました。
 feed は Atom配信フォーマット
 rss は、RSS2.0フォーマット
との違いなんだそうですが、どちらを使っても表示上は変わりませんでした。

 参考:
  はてなブログRSS配信URLは2つあった! - tarのブログるっ by @tarVolcano :
  http://tar.blogru.me/entry/2014/04/03/024738



参考サイト

Google Feed API Developer's Guide  |  Google Feed API  |  Google Developers :
https://developers.google.com/feed/v1/devguide

JavaScript - Google Feed APIを使おう - Qiita :
http://qiita.com/sassy_watson/items/e3797b8719c51d25c190

Google Feed API】フィードを読み込む(お手軽版) | Tips Note :
http://www.tam-tam.co.jp/tipsnote/javascript/post5010.html

JavaScript】コピペで簡単!!Google Feed APIの使い方 | Web制作会社スタイル :
http://www.hp-stylelink.com/news/2014/05/20140508.php


その他 参考記事

簡単!RSSXML)を取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法 | Stronghold :
http://zxcvbnmnbvcxz.com/jquery-google-feed-api/