2010/07/31 Google AJAX Feed API
今回はホームページに他のサイトのブログを読み込む作業をしました
これがなかなか難しい
なぜならフィードを取りに行くとはじかれてしまいます
それでGoogle AJAX Feed API を使うことにしました
まず
gajaxjsを作成します
内容は
// JavaScript Document
var blog = {
feedurl: "RSSアドレス○○.xml",
// feedurl: "http://www.makun.jp/pplog2/rss2.xml"や
// feedurl: "http://blog.makun.org/feed", です
numOfPost: 10, // 1 ページに表示する投稿数
url: "ホームページアドレス"
}
// エントリーのタイトルをリンク付きにして div 要素に入れて返す。
function createTitleWithLink(entry, idx){
var div = document.createElement("div");
var anchor = document.createElement("a");
anchor.href = entry.link;
anchor.setAttribute("name", idx);
anchor.appendChild(document.
createTextNode(entry.title));
div.className = "title";
div.appendChild(anchor);
return div;
}
// エントリーの内容を div 要素に入れて返す。
function createContent(entry){
var div = document.createElement("div");
div.innerHTML = entry.content;
div.className = "content";
return div;
}
// エントリーのタイトルへのアンカーを作成し、div 要素に入れて返す。
function createFeedTitle(entry, idx){
var anchor = document.createElement("a");
var div = document.createElement("div");
anchor.setAttribute("href",
location.protocol + "//" +
location.hostname + location.pathname + "#" + idx);
anchor.appendChild(document.
createTextNode(entry.title));
div.appendChild(anchor);
return div;
}
// 「前の投稿」を生成
// createURL 関数は blog.js で定義。
function createNextLink(entry){
var anchor = document.createElement("a");
anchor.href = createURL(blog.url, blog.numOfPost,
new Date(entry.publishedDate));
anchor.appendChild(document.createTextNode("前の投稿"));
return anchor;
}
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed(blog.feedurl);
feed.setNumEntries(blog.numOfPost)
feed.load(function(result) {
if (!result.error) {
var divFeedTitle = document.getElementById("feedTitle");
var divFeed = document.getElementById("feed");
var divNextLink = document.getElementById("nextLink");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
// フィードのタイトル一覧を生成
divFeedTitle.appendChild(createFeedTitle(entry, i));
// フィードのタイトルを生成
divFeed.appendChild(createTitleWithLink(entry, i));
// フィードの内容を生成
divFeed.appendChild(createContent(entry));
}
// 前の投稿へのリンクを生成
divNextLink.appendChild(createNextLink
(result.feed.entries[blog.numOfPost-1]));
}
});
}
google.setOnLoadCallback(initialize);
載せたいページに
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript"
src="js/gajax_shii.js"></script>
//<pre></head>より上に書く
//<body>より下に書く
<div id="feedTitle"></div>
<div id="main_blog">
<!-- フィードの内容 -->
<div id="feed"></div>
</div>
//</body>より上に書く
後はCSSでデザインを変更します
ｃｌｓｓは
#feedTitleとcontentです
よかったら見てください