● Google Feed APIを使って、外部ＲＳＳを読み込み表示します。
該当記事の１件目の画像を表示させます。
◆ 参考にした内容
Google Feed API Developer's Guide
https://developers.google.com/feed/v1/devguide?hl=ja
Feed Control
http://code.google.com/apis/ajax/playground/#feed_control
JavaScript Reference - Google Feed API
https://developers.google.com/feed/v1/reference?hl=ja
◆ 注意点
・ 広告が表示されます。
・ Ajaxを利用するため、ページアクセス数が増えます。
◆ ＲＳＳについて
① アメブロの場合のＲＳＳ形式は下記になります。
（アメーバIDは変えてください）
http://rssblog.ameba.jp/アメーバID/rss.html
◆ 実例
私のブログのメッセージボードに設置しています。
◆ 設置方法
① フリープラグインへ下記を追記する。
（下記はアメーバIDの部分は私のブログになっているので必ず変えてください）
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
var disp_count=4;// ★ 表示件数をセット
// ★ RSS URL をセット（http://rssblog.ameba.jp/アメーバID/rss.html）
var disp_url="http://rssblog.ameba.jp/new-blue-777/rss.html";
var d_date=4;// ★ 日付表示形式をセット
var d_hiduke='日付 :';// 日付の前表示
if($("#feedArea5").length!=0){google.setOnLoadCallback(OnLoad5);}
</script>
◆ 説明
■ 表示件数を指定します。
var disp_count=4;// ★ 表示件数をセット
■ 表示したいRSSを指定します。（アメーバブログのみ対応）
var disp_url="http://rssblog.ameba.jp/アメーバID/rss.html";
■ 日付の表示形式を指定します。（パラメータを増やす予定あり）
var d_date=4;// ★ 日付表示形式をセット
例 ２０１３年６月２６日 １９：２３の場合
1････ 6月26日
2････ 2013年6月26日
3････ 2013/6/26
4････ 2013/6/26 19:23
■ 日付前の表示を指定します。
var d_hiduke='日付 :';// 日付の前表示
② このGoogle Feed API表示したい場所に下記を入れます。
（メッセージボードなどにHTMLモードで入れてください）
<div id="feedArea5"></div>
③ 下記をCSSの一番下に入れます。
#feedArea5 .gf-snippet{/* 画像＋記事内文章 */
margin:0px;
padding:0px;
height:100%;
display:block;
overflow:hidden;
margin-bottom:10px;
}
#feedArea5 .F5img{/* 画像 */
width:200px;/* 画像の幅 */
height:170px;/* 高さ */
float:left;
padding-top:10px;
margin-right:10px;
}
#feedArea5 .contentSnippet{/* 記事内文章 */
width:480px;/* メッセージボード幅 */
height:170px;
text-align:left;
padding-top:10px;
}
#feedArea5 .gf-title{/* タイトル */
text-align:left;
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
padding-left:15px;/* 左の隙間 */
height:20px;/* 高さ */
}
#feedArea5 .publishedDate{/* 記事作成日付 */
color:#000000;/* 文字色 */
float:right;
}
■ ソース内容
function OnLoad5() {
var gf_result="";
var feed = new google.feeds.Feed(disp_url);
feed.setNumEntries(disp_count);// 表示記事数
var entry_url = new RegExp(/http\:\/\/ameblo\.jp\/(.*?)\/entry\-(\d+)\.html.*/); // 通常記事
feed.load(function(result){
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
var entry=result.feed.entries[i];
var pdate = new Date(entry.publishedDate);
// 日付表示形式
if (d_date==1){var strdate = d_hiduke+(pdate.getMonth()+1)+'月'+pdate.getDate()+'日';}
if (d_date==2){var strdate = d_hiduke+(pdate.getYear()-100+2000)+'年'+(pdate.getMonth()+1)+'月'+pdate.getDate()+'日';}
if (d_date==3){var strdate = d_hiduke+(pdate.getYear()-100+2000)+'/'+(pdate.getMonth() + 1)+'/'+pdate.getDate();}
if (d_date==4){
if (pdate.getHours()<10) {var strhh='0'+pdate.getHours();}else{var strhh=pdate.getHours();}
if (pdate.getMinutes()<10){var strmm='0'+pdate.getMinutes();}else{var strmm=pdate.getMinutes();}
var strdate = d_hiduke+(pdate.getYear()-100+2000)+'/'+(pdate.getMonth() + 1)+'/'+pdate.getDate()+' '+strhh+':'+strmm;
}
gf_result ='<div class="gf-result">';
gf_result+= '<div class="gf-title"><a href="'+entry.link+'" target="_blank">'+entry.title+'</a><p class="publishedDate">'+ strdate + '</p>'+'</div><div class="gf-snippet">';
if (entry.link.match(entry_url)) {
var Art_data=$.ajax({url: entry.link, async: false}).responseText;
var img_src=$(".articleText a.detailOn img:eq(0)",Art_data).attr("src");
}else{
var img_src="undefined";
}
if(typeof img_src=="undefined"){
gf_result+= '<p class="F5img"></p>';
}else{
gf_result+= '<p class="F5img"><img src="'+img_src+'" width="200"></p>';
}
gf_result+= '<p class="contentSnippet">'+entry.contentSnippet+' ......'+'</p></div>';
gf_result+= '</div>';
$("#feedArea5").append(gf_result);
} // for
}}); // function error
} // OnLoad5