Google AJAX Feed APIでfeedを表示する

jQuery

Google AJAX Feed APIを使い、feedを表示するコードです。(要APIコード)

APIキーの取得は「Google AJAX Feed APIキーの取得 – 事前準備 – Google AJAX Feed API入門」を参照。

“`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=●KEY●"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
var feedurl = "https://0017.org/feed";
var feed = new google.feeds.Feed(feedurl);
//取得件数を指定
feed.setNumEntries(10);
//フィードのダウンロードが完了したらdispfeed関数が呼び出されます
feed.load(dispfeed);

function dispfeed(result){
if (!result.error){
//html上のどこに表示するか指定
var container = document.getElementById("feed");
//変数htmlstrに、表示を記述していく
var htmlstr = "";

htmlstr += ‘<dl>’;
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i]; //エントリー用配列
var strdate = createDateString(entry.publishedDate); //日付用変数(日付情報)
htmlstr += ‘<dt>’ + strdate + ‘</dt>’;
htmlstr += ‘<dd><span class="place">’ + result.feed.title + ‘</span>’;
htmlstr += ‘<span class="entry"><a href="’ + entry.link + ‘">’ + entry.title + ‘</a></span></dd>’;
}
htmlstr += ‘</dl>’;

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
}

//日付表示カスタマイズ関数
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
//年月日を変数に入れる
var pyear = pdate.getFullYear(); //年
var pmonth = pdate.getMonth() + 1; //月。getMonthメソッドは0から11の値を返すため、+1している
var pday = pdate.getDate(); //日
var strdate = pyear + "/" + pmonth + "/" + pday;
return strdate;
}

}
google.setOnLoadCallback(initialize);
</script>
</head>

<body>
<div id="feed"></div>
</body>
</html>“`

タイトルとURLをコピーしました