スポンサードリンク

2014年01月13日

Amebaブログのrssを外部のWEBサイトに組み込む

2014-01-13_233357.jpgブログの更新情報をホームページに反映したい、というご要望をいただくことがあります。
この場合はブログ側が自動で生成してくれるRSSを読み込ませることで実現できます。
※画像はキンタロー。さんのブログRSSで作ってみた例です。



@
scriptタグにこんな具合で書きます。
ポイントは、次の2つです。
・文字切れを「…」で出るようにしてること
・[PR]の配信を除外するようにしてあること

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//Google Feed Api
google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("http://feedblog.ameba.jp/rss/ameblo/★AmebloのID★/rss20.xml");
feed.setNumEntries(20);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

if(entry.title.match(/^PR:/)){
//「PR:」から始まる記事を拾った場合は何もしないで処理を抜ける
}
else{
var dd = new Date(entry.publishedDate); // now
var yearNum = dd.getYear();
if (yearNum < 2000) yearNum += 1900;
var m = dd.getMonth() + 1;
if (m < 10) {m = "0" + m;}
var d = dd.getDate();
if (d < 10) {d = "0" + d;}
var date = yearNum + "." + m + "." + d + " ";
container.innerHTML += "<li><span>" + date +" </span>" +" <a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></li>";
}
}
}
});
}
google.setOnLoadCallback(initialize);
//]]>
</script>


A
実際に表示させる箇所にこんな感じに書きます。
載せる際の幅と高さは適当として、22と20にしてみましょうか。
<div id="feed_box">
<div class="feed_midasi">ブログ更新情報
<a href='http://feedblog.ameba.jp/rss/ameblo/★AmebloのID★/rss20.xml'>
<img src='/img/rss.png' width="22" height="20">
</a></div>
<ul id="feed"></ul>


基本設定からカスタマイズまで! アメブロ逆引き Q&A101
内藤 勲
ソーテック社
売り上げランキング: 15,487

スポンサードリンク

posted by おっ at 22:53 | Comment(0) | TrackBack(0) | ウェブサイト制作 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック