楽天には店長の部屋Plus+っていう店長ブログがあるんだけど、なぜかどこのショップもRSS表示をショップに表示していないから不思議に思ってたんだ。
よくみるとドメインが違うんだよね。普通のJavaScriptで表示しようとすると面倒だけど、
Google先生の Google AJAX Feed API を使えば簡単に表示が出来ちゃうぞ。
JavaScriptとか分からない人向けに表示の仕方を書いておきます。
RSSページ
インラインフレーム内に表示するHTMLファイルを作ります。ファイル名は rss.html としておきます。
ファイルの置き場所は楽天GOLDサーバーで。
headかbody内にscriptタグを３つ入れます。
最初がGoogle Ajax API Loaderのもので、次がgfeeds.js。
gfeeds.jsはこの記事の最後にダウンロードがあるので、srcを保存先に変更してください。
<script type="text/javascript" src="http://www.google.com/jsapi" charset="UTF-8"></script> <script type="text/javascript" src="js/gfeeds.js" charset="UTF-8"></script>
一番下のscriptタグのgoogle.load()より上でgfeed.shopID()で楽天ショップのIDを設定します。
ショップのIDはURLの楽天のドメイン後ろの部分です。
http://www.rakuten.co.jp/hoge-shop/ → IDはhoge-shop
<script type="text/javascript">
gfeed.shopID("your-shop-id");
google.load("feeds", "1",{"callback" :gfeed.load, "language" : "ja_JP", "nocss" : true});
</script>
サンプルの全文。ファイルの文字コードはEUCです。
rss.html
<?xml version="1.0" encoding="euc-jp"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<title>【楽天市場】****店長のつぶやき</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<meta name="robots" content="noindex,nofollow" />
<script type="text/javascript" src="http://www.google.com/jsapi" charset="UTF-8"></script>
<script type="text/javascript" src="js/gfeeds.js" charset="UTF-8"></script>
<script type="text/javascript">
gfeed.shopID("your-shop-id");
google.load("feeds", "1",{"callback" :gfeed.load, "language" : "ja_JP", "nocss" : true});
</script>
</head>
<body>
<div id="gfeed"></div>
<p>RSS:<a href="http://shop.plaza.rakuten.co.jp/****" target="_blank">店長のつぶやき</a></p>
</body>
</html>
ショップページ
RSSを表示したい所にインラインフレームを入れる。
インラインフレームのsrcは rss.html のURLです。
<div id="news"> <h2>店長の部屋RSS+</h2> <iframe src="http://www.rakuten.ne.jp/gold/*****/rss.html" frameborder="0" width="160" scrolling="no" height="200"></iframe> </div>
ファイルが出来たらrss.htmlとgfeeds.jsをFTPでアップロードして終了。
ダウンロード
gfeeds.jsはMITライセンスです。圧縮済みと未圧縮ソース、rss.htmlのセット。
[ダウンロードが見つかりません]Class wtnGfeed
この記事で配布しているものは楽天用のメソッドが含まれています。
Google AJAX Feed APIでRSSを表示する の説明と同じです。
Method: shopID
楽天のショップIDをセットします。
gfeed.shopID("your-shop-id");