他サイトの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>関連記事
-
簡単にtable内をソート
やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...
-
jQuery UIを用いた日付及び時間のピッカーの利用方法
jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...
-
adblock(広告削除)設定している場合はページを表示させない
iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...
-
jQueryuiを用いてメールの入力補助(サジェスト)
autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...