小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQueryでRSSを読み込んで表示

wordpress(ワードプレス)の投稿記事を別サイト(同一ドメイン)で読み込みで表示したという相談があった際にjQueryのみで実装した方法をメモ。

HTML

<ul id="feedList"></ul>

jQuery

$(function(){
	$.ajax({
		url: 'rssのURL',
		cache: false,
		dataType:"xml",
		success: function(xml){
			$(xml).find('item').each(function(){
				var title = $(this).find('title').text();
				var url = $(this).find('link').attr('href');
				$('<li></li>').html('<a href="'+url+'">'+title+'</a>').appendTo('ul#feedList');
			});
		}
	});
});

外部ドメイン(クロスドメイン)のRSSを読み込む場合

外部ドメインのRSSを読み込む際は、セキュリティの関係で ajax では同一ドメインのファイルとしか通信できない制限があるため、別でPHPファイルを用いて実装が必要。

rss.php(PHP)

$url = 'rssのURL';
$xml = file_get_contents($url);
header('Content-type: application/xml; charset=UTF-8');
print $xml;

上記の内容で作成したファイルを、jqueryの「url」の値として読み込みます
例では『rss.php』としてます。

jQuery

$(function(){
	$.ajax({
		url: 'rss.php',
		cache: false,
		dataType:"xml",
		success: function(xml){
			$(xml).find('item').each(function(){
				var title = $(this).find('title').text();
				var url = $(this).find('link').attr('href');
				$('<li></li>').html('<a href="'+url+'">'+title+'</a>').appendTo('ul#feedList');
			});
		}
	});
});