BLOG

サイト外のブログの更新情報を表示する

img20130508_2

サイト外で書いているブログの更新情報を、自動でサイト内で表示したい場合。Google Feed APIを使えば、登録したりCGIを設置したりせずに出来るようなので、自分用のメモも兼ねて。

↓Google Feed APIはコチラ↓
https://developers.google.com/feed/?hl=ja

Developer’s Guideを見つつ、Javascriptがよくわかっていないながら、作ってみました。

<ul>
<li><span>2013.5.8 投稿者名</span><a href="記事のURL">記事のタイトル</a></li>
<li><span>2013.5.8 投稿者名</span><a href="記事のURL">記事のタイトル</a></li>
<li><span>2013.5.8 投稿者名</span><a href="記事のURL">記事のタイトル</a></li>
<li><span>2013.5.8 投稿者名</span><a href="記事のURL">記事のタイトル</a></li>
<li><span>2013.5.8 投稿者名</span><a href="記事のURL">記事のタイトル</a></li>
</ul>

上のように表示したい場合。

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("https://www.ryu-raku.co.jp/blog/feed");
// entry count
feed.setNumEntries(5);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
var html = '<ul>';
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var pdate = new Date(entry.publishedDate);
var htmldate = pdate.getFullYear() + '.' + (pdate.getMonth() + 1) + '.' + pdate.getDate();
html += '<li><span>' + htmldate + ' / ' + entry.author + '</span><a href="' + entry.link + '">' + entry.title + '</a></li>';
}
html += '</ul>';
container.innerHTML = html;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>

new google.feeds.Feedに読み込ませたいフィードのURL、
feed.setNumEntriesに読み込ませたい記事の数、
html~のあたりで表示したいHTMLを。

実際に上のコードで表示させた結果。
img20130508

日付の表示に関しては、

日付の表示形式の変更 – Google AJAX Feed API入門
http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html

を参考に致しました。

あと、検索していたら、ドットインストールさんで
Google Feed API入門がありました(すみません。中身を見ていないですが)

Google Feed API入門 (全5回) – プログラミングならドットインストール
http://dotinstall.com/lessons/basic_google_feed_api

ご相談・お問合せ

ホームページに関すること等はお気軽にお問合せ下さい

東京・大阪を中心に全国のお客様に対応しております。
弊社から遠方にあたるお客様とは、Mail、TELにてやり取りさせて頂いておりますが、必要に応じ遠方であってもご訪問させて頂いています。

お問い合わせフォームへ

page top