サイト運営

【はてなブログ】サイドバーにAmazonのランキングを入れてみた【コピペOK】

投稿日:

f:id:photoblg:20160309222624j:plain

以前自動コンテンツを追加したくてWordpressのサイドバーにAmazonのランキングを追加した記事を書きました。

www.weblog-life.net

はてなブログにも入れてみようかなぁと思い、なんとなくやってみました。コピペでそのまま動くとは思います。

入れる場所

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>

[デザイン]-[サイドバー]に表示させるタグを追加。
f:id:photoblg:20160309224221p:plain

これだけでとりあえず表示されます。

※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の取得先とアソシエイトタグの入れ方は以下の記事に書いてあります。

www.weblog-life.net

表示件数。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は動きました。おかしい場合はコメントに書いていただければわかる範囲でお答えします。

この記事が気に入ったら
いいね ! しよう

Twitter で
  • この記事を書いた人
  • 最新記事

ケー

IT業界歴17年の兼業ブロガー。 ガジェットレビュー、格安SIM、迷惑メールネタ、写真ネタなどの記事が多いです。 技術的な内容で困った方の参考になる記事を心掛けています。レビュー依頼はお問い合わせからどうぞ。

-サイト運営
-

Copyright© ウェブと食べ物と趣味のこと , 2019 All Rights Reserved.