Twitterに投稿した内容をGoogle AJAX Feed APIで表示
以前、Twitterに投稿した内容をMovable Typeのプラグインで表示する方法をご紹介しました。
スタティックで生成する方法だったので、都度再構築をする必要がありました。
今回は、Google AJAX Feed APIというものを使用して、
再構築なしで、Twitterに投稿した内容を表示する方法をご紹介します。
まずは、サンプルページをご覧ください。
サンプルページのソースは下記のとおりです。
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Feed API サンプル</title>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=APIキー"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("読み込みたいフィードのURL");
feed.setNumEntries(3);
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];
var URL = result.feed.entries[i].link;
var div = document.createElement("div");
var a = document.createElement("a");
var text = document.createTextNode(entry.title);
// タグを生成
a.href = URL;
container.appendChild(div);
div.appendChild(a);
a.appendChild(text);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
サンプルページの流れを簡単にご説明すると、下記のようになります。
1.Google AJAX API キーを設定する
2.読み込むフィードを設定する
3.表示したい情報を取得する
4.タグを生成する
googleのデベロッパーガイドをご覧いただければ、より理解が深まるかと思います。
サンプルとは異なったコーディングも可能なので、是非お試しください。
このブログ記事に対するトラックバックURL
