ブログを更新すると、ホームページにブログタイトルを表示する方法（javascript編）

2014.12.31

コーディング

ブログを更新すると、ホームページにブログタイトルを表示する方法（javascript編）

ブログを更新すると、ホームページにブログタイトルを表示させたい時ありますよね。

今回は、index.htmlのままでのやり方を書きたいと思います。

意外と難しくない。というけど、自分はjavascriptはわからないです。
色々調べたら、こんな感じできました。

RSSが2つあるとき（ブログが2つある場合、応用で複数いけます。）のやり方を書いてあります。

</head>の上に下記のjavascriptは入れてね。

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

<script type="text/javascript">

// JavaScript Document

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

function initialize() {


//1個目のRSS
var feed = new google.feeds.Feed("ここにRSSのアドレス");
//2個目のRSS
var feed2 = new google.feeds.Feed("ここにRSSのアドレス");

var maxTitleLength = 35; ←記事タイトルの長さ

//1個目の設定
feed.setNumEntries(5);　←記事タイトルの表示数
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed1");　←これをHTMLのクラス名に
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 += "<dt>" + date +"</dt><dd><a href='" + entry.link + "' target='_blank'>" + title + "</a></dd>";
}
}
});

//2個目の設定
feed2.setNumEntries(5);　←記事タイトルの表示数
feed2.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed2");　←これをHTMLのクラス名に
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 += "<dt>" + date +"</dt><dd><a href='" + entry.link + "' target='_blank'>" + title + "</a></dd>";
}
}
});

}

google.setOnLoadCallback(initialize); 

</script>

// JavaScript Document

//Google Feed Api

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

function initialize() {

//1個目のRSS

var feed = new google.feeds.Feed("ここにRSSのアドレス");

//2個目のRSS

var feed2 = new google.feeds.Feed("ここにRSSのアドレス");

var maxTitleLength = 35; ←記事タイトルの長さ

//1個目の設定

feed.setNumEntries(5);　←記事タイトルの表示数

feed.load(function(result) {

if (!result.error) {

var container = document.getElementById("feed1");　←これをHTMLのクラス名に

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 += "<dt>" + date +"</dt><dd><a href='" + entry.link + "' target='_blank'>" + title + "</a></dd>";

}

});

//2個目の設定

feed2.setNumEntries(5);　←記事タイトルの表示数

feed2.load(function(result) {

if (!result.error) {

var container = document.getElementById("feed2");　←これをHTMLのクラス名に

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 += "<dt>" + date +"</dt><dd><a href='" + entry.link + "' target='_blank'>" + title + "</a></dd>";

}

});

}

google.setOnLoadCallback(initialize);

</script>

<div>
<dl id="feed1">
</dl>
</div>

<div>
<dl id="feed2">
</dl>
</div>

<div>

</dl>

</div>

<div>

</dl>

</div>

これでOK！終わりです。コピペでできちゃいますよ。
なんでこうなるの？と思った方は、ググって下さい。自分わかりません（笑）

PHPのやり方もありますが、それはまた今度～

ブログを更新すると、ホームページにブログタイトルを表示する方法（javascript編）

関連記事