他サイトのRSS情報を画像付きで表示させる

2014/07/14

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイキャッチ画像つきで表示させたかった。

他所のサイトさんのツールを使えばすぐできるんだけど、広告とかは外したい。

調べてみるとGoogle Ajax Feed Apiというものでいけるみたい。

<html>
<head>
<style>
.img_box2 {
    position:relative;
    display:block;
    width:150px; //ここは画像サイズと合わせる必要あり
    height:150px; //ここは画像サイズと合わせる必要あり
    padding:0;
    background-color:#000;
}
.img_box2 img {
    z-index:0;
    margin:0;
    padding:0;
}
.img_box2 a {
    color:white;
    font-size: 12px;
}
.img_box2 img:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.img_comment3 {
    position:absolute;
    bottom:0px;
    left:0px;
    z-index:1;
    margin:0;
    padding:5px;
    background-color:#000;
}
.opa  {
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize(url = '', limit = 6, target = 0) { //引数は適当に切り替える
	var target = (target == 0) ? '_blank' : '_self';
	var thumbnail = new Array();
	var feed = new google.feeds.Feed(url);
	feed.load(function(rss) {
		if (!rss.error) {
			var entry = rss.feed.entries;
			console.log(rss);
			for(i = 0; i < limit; i++){
				thumbnail[i] = entry[i].content.match(/http[s]?\:\/\/[\w\+\$\;\?\.\%\,\!\#\~\*\/\:\@\&\\\=\_\-]+jpg|jpeg|gif|png|bmp/i);
				$('#rssBox').append('<div class="img_box2"><a href="' + entry[i].link + '" target="' + target + '"><img src="' + thumbnail[i][0] + '" height="' + height + '" width="' + width + '"></a><p class="img_comment3 opa"><a href="' + entry[i].link + '" target="' + target + '">'+ entry[i].title +'</span></a></div>');
			}
		}
	});
}
google.setOnLoadCallback(function(){
	initialize('http://hogehoge.com/feed/'); //ここにURL
	initialize('http://hogehoge.jp/feed/'); //別サイトをたすことも可能
});
</script>
</head>

<body>
<div id="rssBox">
</div>

</body>
</html>

- jQuery, JavaScript