ナノドロイド ロゴ

作るのって楽しい。プラモ、工作、作ってみたブログ

外部ブログの新着記事を表示させる

Google Feed APIを使って、外部サイトのFeedを取得し、一覧を表示させます。新着情報をWordPressで作っていて、HTMLのトップページにその新着情報を表示させたい、という案件をいただいたのでメモ。

Google Feed API

最近はAPIキーを取得しなくても使えるみたいですね。
Google Developers

HTML

ヘッダーの中にGoogle Feed APIを使うためのタグ追加、別ファイルのJavaScriptを呼び出す。

	
	

表示させたい場所に下記タグを入れる。

JavaScript

3 google.feeds.Feed(“http://www.nanodroid.jp/feed/”);・・・FeedのURL
4 feed.setNumEntries(5);・・・呼び出す記事の数
9 document.getElementById(“feed”);・・・HTMLの”feed”という名前の付いたidに呼び出す。

google.load("feeds", "1");
function initialize() {
	var feed = new google.feeds.Feed("http://www.nanodroid.jp/feed/");
	feed.setNumEntries(5);
	feed.load(dispfeed);

	function dispfeed(result){
		if (!result.error){
			var container = document.getElementById("feed");
			var htmlstr = "";
			htmlstr += '
'; for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; htmlstr += "
" var strdate = createDateString(entry.publishedDate); htmlstr += strdate ; htmlstr += "
" htmlstr += "
" htmlstr += '' + entry.title + ''; htmlstr += "
" } htmlstr += "
"; container.innerHTML = htmlstr; }else{ alert(result.error.code + ":" + result.error.message); } } } function createDateString(publishedDate){ var pdate = new Date(publishedDate); var pday = pdate.getDate(); var pmonth = pdate.getMonth() + 1; var pyear = pdate.getFullYear(); var phour = pdate.getHours(); var pminute = pdate.getMinutes(); var psecond = pdate.getSeconds(); var strdate = pmonth + "月" + pday + "日" ; return strdate; } google.setOnLoadCallback(initialize);

記事の内容も表示させたいときはentry.contentを追加。

吐き出されるHTML

日付1
記事タイトル1
日付2
記事タイトル2
日付3
記事タイトル3
日付4
記事タイトル4
日付5
記事タイトル5

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Back to Top