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>
[表示結果]
※なお、はてなブログの場合、自身のブログサイト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
その他 参考記事
簡単!RSS(XML)を取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法 | Stronghold :
http://zxcvbnmnbvcxz.com/jquery-google-feed-api/