ブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能
2/3/2012
こんにちは。WEBコンテンツ･プランナーの中島です。
今回、自分の備忘録としてのメモも含め、サイト制作に便利な機能を紹介していくシリーズ展開していきたいと思います。
今回は、ブログ等を展開している人が、自分のホームページにブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能についてご案内します。
RSSのURLを入れこむだけでJavaScriptを書きでしてくれる便利な機能のモノもいろいろありますが、
カスタマイズできない物が多く見られます、と言うか、全てがパッケージ化されているものなので自由なデザインにすることが出来ません。
（誰でも簡単に使用できるようにしているため仕方のないことだと思います）
かなり高機能なものがありますが、
デザイン的な部分に目をつぶらなければならない場合が多いです。
せっかくデザインを自分自身で制作しているならデザイン的に自由に使えるRSSフィードを導入したいって思いますよね。
ただし、自由にデザインを設定できるとなると、やはりHTML,CSSを組める知識は必要になります。
WeeblyやJimdoなどの簡単サイト作成CMSサイトでもカスタムHTMLの記述ボックスを組み込めるサイトならもちろん、
自分でコーディングしているオリジナルのサイトでも使用可能な方法を紹介したいと思います。
【Google feed APIという便利な機能を利用します】
google feed apiのjavascriptを使って、ブログの更新情報を表示させたい画像サイズでサムネイル画像を表示させて、
タイトルと本文がリスト表示される。
さらに、外部へのリンクの場合、新規ウィンドウでリンク先を表示させたい、
そして、「続きを読む…」とかの誘導リンクも付ける。
こんな贅沢な設定を自分で、コーディングでやってしまおうという内容で進行していきます。
Cre'ps inc.
http://www.creps-inc.jp/tips_post/first-post
google.load("feeds", "1");
function initialize() {
var feedurl = "http://creps-inc.weebly.com/2/feed"; //rssフィードのurlを指定。wordpressの場合はurl/feed/で取得できる。
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(8); //フィードの表示数を入れる
feed.load(dispfeed);
function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
htmlstr += "
for (var i = 0; i < result.feed.entries.length; i++) { //ループ処理
var entry = result.feed.entries[i];
var eimg = ""; //画像取得（初期値設定）
var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG))/); //該当する拡張子のデータを画像として取得している
if(imgCheck){
eimg += '![]()
'; //eimgにはimgタグを挿入するように設定、大きさは100ピクセル
}
htmlstr += '
'
var strdate = createDateString(entry.publishedDate);
htmlstr += '
';
htmlstr += '
' + entry.title + '' + '
' + entry.contentSnippet.substr(0,140) + '' + strdate + '
';
htmlstr += "
"
}
htmlstr += "
";
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
}
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
var strdate = pyear + "/" + pmonth + "/" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);
Cre'ps inc.
http://www.creps-inc.jp/tips_post/first-post
