ホームページにブログの新着記事を表示させる方法

ブログの新着記事の一覧をホームページに表示させたいときがありますよね。

Google AJAX APIを使えば簡単に表示させることができます。

下記Javacriptをページに記述します、<body>内でもOKです。

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

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

function initialize() {

// ブログのRSSを設定
var feed = new google.feeds.Feed(“RSSのURL”);

// 記事タイトルの表示文字数を30文字に設定
var maxTitleLength = 30;

// 記事タイトル取得件数を10件に設定
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById(“feed1”);
for (var i = 0; i < result.feed.entries.length; i++) {

// 記事タイトルを取得
var entry = result.feed.entries[i];
var title = entry.title;

// 記事タイトルを文字数調整
if (title.length > maxTitleLength) {
title = title.substr(0, maxTitleLength) + ‘…’;
}

// 年月日設定
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 = yearNum + “年” + m + “月” + d + “日”;
container.innerHTML += “<li><span>” + date +” </span>” +” <a href='” + entry.link + “‘ target=’_blank’>” + title + “</a></li>”;
}
}
});

}
google.setOnLoadCallback(initialize);

</script>

表示したいところに下記タグを挿入
<ul id=”feed1″></ul>

後はCSSで整えてください。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください