外部ブログのタイトルを自分のサイトに表示させる（javascript）

こんちわ、今日はよくサイトのトップとかに他のブログの最新のタイトル表示させたりするRSS情報の取得をやってみましょう。

多くのブログでは最新の情報をRSSという形で外部に向けて発信しています。
それを取ってきて自分のサイトに表示させる、という事です。

PHPが使えれば取得が結構簡単なのですが、サーバーによってPHPが使えなかったりするので、今回はGoogleが提供しているサービスを使ってJavaScriptでやってみます。

HTML内に以下を記述

HTML(body内)

<div id="feedList"></div>

そして核になるjavascriptをHTML(HEAD内)に以下を記述

HTML(head内)

<!-- apiを読み込む -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<!-- RSSを読み込んで、出力するスクリプト -->
<script type="text/javascript">

//APIのメジャーバージョン(安定版)を指定
google.load("feeds", "1");

function initialize() {

	//ブログなどのURL設定
	var feed = new google.feeds.Feed("https://taneppa.net/feed/");

	// 読み込み件数を設定
	var postcount = 3;

	//出力内容を空っぽに初期化
	var htmlstr = ""; 

	//HTML内のdiv#feedListを取得
	var container = document.getElementById("feedList"); 

	feed.load(function (result){

		if (!result.error){

			for (var i = 0; i < postcount; i++) {
				//記事を一つ取得
				var entry = result.feed.entries[i];

				//出力内容にタイトルを入れる
				htmlstr += '<h3 class="posttitle"><a href="' + entry.link + '">' + entry.title + '</a></h3>';

				//出力内容に日付けを入れる
				htmlstr += '<p class="postdate">' + entry.publishedDate + '</p>';
				
			}
			
			
			//HTML内のdiv#feedListの中に出力
			container.innerHTML = htmlstr; 
			
		}

	});


	

}

//HTMLファイルが読み込まれたときに上記のfunction initializeのスクリプトを実行
google.setOnLoadCallback(initialize); 

</script>

■//ブログなどのURL設定　のところ”https://taneppa.net/feed/”の代わりに自分が表示させたいブログのRSSを記入します。
たねっぱでいうと、グローバルナビにあるTwitterアイコン横の「電波出てるみたいなボタン」（Twitterのマークの横）のリンク先URLを使用します。
右クリックで、Firefoxの場合は「リンクのURLをコピー」、IEの場合は「ショートカットコピー」
■//読み込み件数を設定　のところで表示する件数を指定します

なんか、パッと見たところよくわからんスクリプト…って思うかもしれません。
しかし、よくコメント部分を見てみるとやってる事は簡単です。
スクリプトを見ればわかりますが、タイトルはh3タグ、日付はpタグで囲われています。なのでCSSで見た目も変えれますね。

★出力結果★タイトルと日付が表示されます↓

もっと、記事の本文とかも表示したいって方は以下サイトを参考にしてください。(日付表記の変更などもあります)

参考：Google AJAX Feed API入門

http://www.ajaxtower.jp/googleajaxfeed/

今回は簡易に書いてますが本当は細かく書いた方が良いです。（エラーが出たときなど）。全部↑の参考サイトに書いてますので、もっとちゃんと勉強したい方は見てください。

関連記事：PHP版！外部ブログのタイトルを自分のサイトに表示させる