ウェブと食べ物と趣味のこと

読者です 読者をやめる 読者になる 読者になる

ウェブと食べ物と趣味のこと

格安SIMのこと、windows10、迷惑メールネタ、写真ネタなど。困った方の参考になる記事を心掛けます。

【はてなブログ】サイドバーに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は動きました。おかしい場合はコメントに書いていただければわかる範囲でお答えします。


スポンサードリンク