[jQuery Plugin] RssBinder

2011-10-24 /Development #jQuery

この記事は最終更新日から13年以上経過しています。

複数のRSS,XMLを統合して、日付順にソートしてくれるjQuery Pluginを作りました。最近何度か同様の処理のjsを書いたので、プラグインとして纏めておきました。

[概要]

・複数のRSS,XMLを統合して、日付順にソートしてくれます。・各ブログのタイトルを個別に任意のものに書き換える事も可能です。

[他に必要なプラグイン]

・ jQuery v1.6 or later ・ google Ajax API 　※使用するドメインのAPIkeyを取得してください

[デモ]

http://is8r.github.com/jquery-rssbinder/htdocs/

[ソースコード]

https://github.com/is8r/jquery-rssbinder ※githubで公開しています。

[使い方]

ヘッダにスクリプトを読み込み、cssとjsを記載

コピーしました
<script type="text/javascript" src="./share/js/plugin/jquery.rssbinder-1.0.js"></script>
<script src="https://www.google.com/jsapi?key=取得したAPIKey" type="text/javascript"></script>

<!--dyrect-->
<style type="text/css">
/* rssbinder */
#feed
{
	width: 500px;
	margin: 0 auto;
}
ul.list-feed
{
	_zoom: 1;
	overflow: hidden;
    border-top: 1px dotted #ddd;
    border-bottom: 1px dotted #ddd;
}
ul.list-feed li
{
    margin-top: -1px;
    border-top: 1px dotted #ddd;
}
ul.list-feed li a
{
	display: block;
	padding: 10px;
	font-size: 16px;
	line-height: 1.8em;
	text-decoration: none;
}
ul.list-feed li a:hover
{
	background: #f2f2f2;
}
ul.list-feed li .date
{
	font-size: 9px;
	margin: 0 10px 0 0;
	color: #222;
	float:left;
	display: block;
}
ul.list-feed li .title
{
	overflow:auto;
	zoom:1;
}

</style>
<script type="text/javascript"><!--
$(function() {
	var urls = [
		'http://b.hatena.ne.jp/hotentry.rss?mode=general',
		'http://kyoko-np.net/index.xml',
		'http://b.hatena.ne.jp/hotentry/knowledge.rss'
	];
  	$('#feed ul.list-feed').rssbinder({
  		urls:urls,
  		max:20
  	});

});
// --></script>

bodyに要素を配置

コピーしました
<div id="feed">
<ul class="list-feed">
</ul>
</div>