外部RSSをサイト内に簡単に表示させる方法
RSS情報をサイト内に表示させる方法ですが、紹介するのはJavaScriptで表示させる方法です。使用するスクリプトは、「Google Ajax Feeds API」を活用します。GoogleがAPIを公開してくれていますので、これを利用すれば簡単に表示させることが可能です。
自分ののサイトに設置すれば新着情報として自動で更新することも可能ですね。
- コードを取得
Googleアカウントでログインします。そして、画面下に、RSSを表示させたいサイトのURLを入力します。すると、ソースが表示されます。
「Google Ajax Feeds API」http://code.google.com/intl/ja/apis/ajaxfeeds/signup.html
- ソースを外部JSとして保存
表示されたソースをそのままhtml内に組み込んでもいいのですが、一応外部JSとして取り込むことにします。表示されたソースにgoogle_code.jsとでも仮に名前を付けて保存します。（この時表示させたいRSSのアドレスを変更しておく事をお忘れなく）htmlの<head>内に、<script language="JavaScript" type="text/javascript" src="google_code.js"></script>と記載して外部JSを読み込むよう記述します。- htmlのbody内に一行追加
- <body>内に、<div id="feed"></div>と記述すれば、その部分に読み込ませたいRSS情報が表示されます。
- 行間などはCSSで調整できます
- id="feed"対してCSSを記述すれば、行間や文字の大きさも設定できます。
- JSソースを編集
- 手順4までで実行してみると表示はされますが、リンクが貼られていない状態です。リンクで飛べるようにしたり、表示件数を指定したりするにはカスタマイズが必要です。そこでJSソースを少し編集します。
編集したソースが以下です。例えば、feed.setNumEntries(10)と追記することで10件表示されます。後は表示された内容に対してリンクの設定などを行ったものになります。google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://forty-n-five.boy.jp/blog/atom.xml"); 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; var list = entry.title + "(" + entry.publishedDate.substring(5, 16) + ")" ; a.appendChild(document.createTextNode(list)); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); - サンプルソースは以下からダウンロードできます
Googleからコードを取得するは必須ですのでお忘れなく。
Google Ajax Feeds APIで検索すれば、カスタマイズ方法などが記載されたページがたくさん出てきますのでご参照ください。
Google Ajax Feeds APIを利用
