ブログの新着記事タイトルをサイトに表示させる google feed api

program

google feed api　のつかいかた。

Headの中にいれる。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

//Google Feed Api
google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("http://d.hatena.ne.jp/hagiwarafarm/rss");//ブログのフィード
feed.setNumEntries(5);//表示件数
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 dd = new Date(entry.publishedDate); // now
var yearNum = dd.getYear();
if (yearNum < 2000) yearNum += 1900;
var m = dd.getMonth() + 1;
if (m < 10) {m = "0" + m;}
var d = dd.getDate();
if (d < 10) {d = "0" + d;}
var date =  m + "/" + d + " ";
container.innerHTML += "<li><span>" + date +" </span>" +"　<a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></li>";
}
}
});
}
google.setOnLoadCallback(initialize);

</script>

文字のはみ出た分の表示について。ellipsisを指定。

<style>
#feed li{
	overflow:hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis; /* Safari */
	-o-text-overflow: ellipsis; /* Opera */
	white-space: nowrap;
}


#feed{
	width: 30%;
	min-width: 400px;
	height: auto;
	margin: 50px auto;
	border: solid gray 4px;
	border-radius: 1em;
	padding: 1em 2em;
	
}
</style>

あ、実行するの忘れてた。html本文。

<body>

<ul id="feed"></ul>

</body>


オリジナルはウェビメもさんの記事から。