以前自動コンテンツを追加したくてWordpressのサイドバーにAmazonのランキングを追加した記事を書きました。
はてなブログにも入れてみようかなぁと思い、なんとなくやってみました。コピペでそのまま動くとは思います。
入れる場所
WordPressの場合はPHPが使えましたが、はてなブログの場合はjavascriptになります。
[デザイン]-[カスタマイズ]-[フッター]に以下コードを追加します。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
//google.load('jquery', '1'); //jqueryを他で読み込んでいたらコメントアウト
function initialize() {
//RSSのURL
var feed = new google.feeds.Feed("http://www.amazon.co.jp/gp/rss/bestsellers/electronics/?ie=UTF8&camp=247&creative=1211&linkCode=ur2&tag=ara40-22");
//件数
feed.setNumEntries(5);
feed.load(function(rss) {
if (!rss.error) {
var entry = new Array();
var Feed = "";
var rank = 1;
for (var i=0; i < rss.feed.entries.length; i++){
entry[i] = {
title : rss.feed.entries[i].title,
link : rss.feed.entries[i].link,
content : rss.feed.entries[i].content,
};
entry[i]['img'] = rss.feed.entries[i].content.match(/src="(.*?)"/igm);
entry[i]['price'] = rss.feed.entries[i].content.match(/<b>￥(.*?)<\/b>/igm);
for (var j=0; j<entry[i]['img'].length; j++){
entry[i]['img'][j] = entry[i]['img'][j].replace(/src=/ig, "");
entry[i]['img'][j] = entry[i]['img'][j].replace(/"/ig, "");
}
Feed += '<li class="ranking_box clerfix">'
+ '<div class="raking_left">'
+ '<div class="ranking_rank">' + rank + '位</div>'
+ '<div class="ranking_img"><a href="' + entry[i]['link'] + '" target="_blank"><img src="' + entry[i]['img'][0] + '" width="80px" /></a></div>'
+ '</div>'
+ '<div class="ranking_right">'
+ '<div class="ranking_name"><a href="' + entry[i]['link'] + '" target="_blank">' + entry[i]['title'].substr(0, 60) + '</a></div>'
+ '<div class="ranking_price">価格 ' + entry[i]['price'] + '</font></div>'
+ '</div>'
+ '</li>'
rank++;
}
$('#topics').append( Feed );
}
});
}
google.setOnLoadCallback(initialize);
</script>
[デザイン]-[サイドバー]に表示させるタグを追加。
これだけでとりあえず表示されます。
※CSSは適宜設定をしてください。
※RSSのURLも変更しないと売れた場合私に報酬が入ります（笑）
ざっくり解説
外部サイトからの読み込みのためクロスドメイン制約回避でGoogleのAPIを利用します。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
jqueryを他で使用していなければ下のように先頭のコメントアウトをはずします。
google.load('jquery', '1'); //jqueryを他で読み込んでいたらコメントアウト
好きなRSSのURLを入れます。
var feed = new google.feeds.Feed("http://www.amazon.co.jp/gp/rss/bestsellers/electronics/?ie=UTF8&camp=247&creative=1211&linkCode=ur2&tag=ara40-22");
RSSの取得先とアソシエイトタグの入れ方は以下の記事に書いてあります。
表示件数。Amazonのフィードが10件だったのでその範囲内で。
feed.setNumEntries(5);
HTML整形。タグは適当なのでお好きなスタイルで。
Feed += '<li class="ranking_box clerfix">' + '<div class="raking_left">' + '<div class="ranking_rank">' + rank + '位</div>' + '<div class="ranking_img"><a href="' + entry[i]['link'] + '" target="_blank"><img src="' + entry[i]['img'][0] + '" width="80px" /></a></div>' + '</div>' + '<div class="ranking_right">' + '<div class="ranking_name"><a href="' + entry[i]['link'] + '" target="_blank">' + entry[i]['title'] + '</a></div>' + '<div class="ranking_price">価格 ' + entry[i]['price'] + '</font></div>' + '</div>' + '</li>'
出力先のHTMLタグ。こちらもサイドバーに記述したタグに合わせればなんでもOK。
$('#topics').append( Feed );
最後に
適当な正規表現のため金額の部分など一致しない場合があるかも。とりあえず本と 家電・カメラのRSSは動きました。おかしい場合はコメントに書いていただければわかる範囲でお答えします。
確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
posted with カエレバ
狩野 祐東 SBクリエイティブ 2015-10-30