ブログのRSSを取得して他のサイトに貼り付ける
MovableTypeやWordPresをCMSとして使い、サイト全体をブログで構築していれば、新着記事をトップページに引用することができる。イベント情報をアップすれば、トップにも記事が反映されるので、利用者にも親切・ＳＥＯ的にもＯＫ・サイト管理も簡単になる という三方一両得的なメリットが享受できる。
無料ブログやブログを日記としてしか使っていない場合は、このメリットは生かせない。ただJavaScriptやAjaxをHTMLに埋め込めば、ブログのRSSを取得して、別のサイトに表示することはできる。スクリプトで表示しているだけなのでＳＥＯ面ではメリットにはならないが、いちいちブログの記事の抜粋をHTMLに追記してアップする苦労からは解放される。
PHPを使えばHTMLに直接書き込むことができるのでＳＥＯ的にも有利となるが、サーバの制約がありPHPが使えないこともある。というわけでJavaScriptを使う方法が一般的だ。Ajaxも使えるが、別ドメインのデータが取得できないという制限があるので同一サーバにサイトとブログを持つ人に限られていた。
GoogleAPIでRSSを取得する
GoogleがGoogleAJAXFeedAPIを提供してくれている。これは別サーバのデータを取得できないというAJAXの制限をGoogleがプロキシサーバ（代理サーバ）を立てて取得してくれる という仕組み？だ。とにかく利用してみよう。
GoogleAPIでRSSを取得してみた
まづGoogleAPIを利用するためにＡＰＩキーを取得する必要があるが、GoogleMapAPIと同じキーなので取得済みだった。（未取得ならGoogleのガイダンスに従って取得しておこう）Google AJAX Feed APIを利用するページが開かれた。利用許諾を承認して、APIを使うサイトのURLを入力して Generate API Key ボタンをクリックする。Your API Key と スクリプトが表示されるので、スクリプトをHTMLに貼り付ければとりあえずの作業は終了だ。
スクリプトは以下の通り
<script type="text/javascript"
src="http://www.google.com/jsapi?key=XXX"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new
google.feeds.Feed("http://www.digg.com/rss/index.xml");
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");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
GoogleAPIスクリプトをカスタマイズして概要を表示させる
貼り付けたHTMLには、ブログ記事のタイトルが表示されている。既定ではタイトルしか表示しないようだが、ここは概要や日付けも表示させたいところだ。貼り付け先のスタイルにあわせてHTMLタグも入れたい。
以下の行をコメント化する
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
代わりに下の行を追加
var entry = result.feed.entries[i];
var eTitle = entry.title;
var eContent = entry.content;
var eDescription = entry.contentSnippet;
var eDate = entry.publishedDate;
container.innerHTML += "<h4>"+eTitle+"</h4>";
container.innerHTML += "<p>" + eDate+"<br />";
container.innerHTML += eDescription+"</p>";
RSSの表示画像はこんな感じ
このページは貼り付けたRSSを表示しているだけ。新着情報やブログ新着記事など、本格的に利用する場合は、トップページ等の貼り付けるページに feed というdivを作り、h4 p へのスタイルを指定することになる。
GoogleAPIは検索エンジンのペナルティもなしで安心だ
せっかくブログを書いていても肝心のネットショップのトップページに記事が反映されないのはモッタイない ということで、これまでいろいろなサービスを取り上げたことがあるが、いずれも作者やサービス提供サイトへのリンクが避けられなかった。このGoogeAPIならリンクの表示もなく、飛び先もGoogleなので検索エンジンのペナルティを気にすることなく、安心して使える。お勧めです。
この記事は http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter22/001/index.html を参考にさせていただきました。AJAXだけでなく JavaScriptの情報も参考にさせていただいています。 openspc@po.shiojiri.ne.jp さんに感謝！ 塩尻、お近くです。
