他サイトのRSS情報を画像付きで表示させる
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.cookie.jsで「$.cookie is not a function」エラー
フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...
-
jQuery UIを使って簡単にダイアログを表示させる方法
ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...
-
配列をjQueryで取り扱う
やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...
-
jquery.cookie.jsで保存期間を時間指定する方法
jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...
-
jQueryのdatetimepickerでスクロール入力を無効化させる方法
日時ピッカーのjQuery datetimepickerにて、ピッカーを指定して ...