Entries

ブログのサイドバーに自分のはてなブックマークのRSSフィードを表示する

 はてなブックマークウィジェットは、ブログに任意のサイトの注目エントリーを貼り付けられるウィジェットですが、私がしたいのは注目エントリではなく、「自分のブックマーク一覧をブログのサイドバーに表示する」 ただそれだけなので、とりあえずGoogle AJAX Feed APIを利用して作ってみました。
 現在(2007-12-27)当サイトのサイドバーには、自分のはてなブックマークのRSSフィードを表示しています。
 このサンプルソースはブログのサイドバーに置くことを前提とし、<ul><li></li></ul>内にはまるように出来ています、リストのスタイルの指定は、CSSで適宜好みに合わせてください。
サンプルソースコードここから↓

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

function readFeed(result) {

	// Xbrowser
	var cls = "class";
	if(/*@cc_on!@*/false){ cls = "className" };

	//rootノードはulタグ	
	var root = document.getElementById("rss_feed");

	if (!result.error) {          
		for (var i = 0; i < result.feed.entries.length; i++) {
			var entry = result.feed.entries[i];

			//タイトル
			var title = document.createElement("li");
			title.setAttribute(cls, "rss_item_title");

			var link = document.createElement("a");
			link.setAttribute('href', entry.link);

			var date = new Date(entry.publishedDate);
			var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			var mon = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			var dat = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			link.appendChild(document.createTextNode(mon+"/"+dat+" "+hours+":"+minutes+"> " + entry.title));
			title.appendChild(link);

			var img = document.createElement("img");
			img.src = "http://b.hatena.ne.jp/entry/image/" + entry.link;
			with(img.style) {
				verticalAlign = "middle";
				marginLeft = "4px";
			}
			title.appendChild(img);
			root.appendChild(title);
		}
	}
	else {
		root.appendChild(document.createTextNode("Error."));
	}
}

google.load("feeds", "1");
function initialize() {
	var rss = "http://b.hatena.ne.jp/koharito/rss";	/*表示するRSSフィードURLを指定*/
	var feed = new google.feeds.Feed(rss);
	feed.setNumEntries(10);	/*表示エントリ数任意指定*/
	feed.load(readFeed);
}
google.setOnLoadCallback(initialize);
</script>
<ul id="rss_feed"></ul>
サンプルソースコードここまで↑

 以下、あなたのブログのサイドバーにブックマーク一覧を表示させるための、とても簡単な手順。

 1.GoogleのAPIキーを取得する。
  Googleからの新たな贈り物、「Google AJAX Feed API」を試そう

 2.上のサンプルソースコードを、あなたのブログの任意の箇所にコピぺ
 ex.)FC2ブログ
   [プラグインの設定]-[公式プラグイン追加]から「フリーエリア」選択、[フリーエリア内容の変更]内にコピペ。


 3.ソースコード内 YOUR_FEED_API_KEY の部分に、あなたの取得したGoogleのAPIキーを指定。
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_FEED_API_KEY"></script>

 4.ソースコード内コメント部分参照、てきとうにお望みのものを指定。
var rss = "http://b.hatena.ne.jp/koharito/rss";	/*表示するRSSフィードURLを指定*/
feed.setNumEntries(10);	/*表示エントリ数任意指定*/

 5.終わり。

 ブログテンプレートをカスタマイズしたことのある方や、[プラグインの設定]をさわったことのある方であれば、とても簡単に設置できると思います。

参考:
Google AJAX Feed APIでとても簡単にRSS Readerを作ってみる
Google AJAX Feed API でブログの人気エントリーを表示するサンプル

追記on2007-12-28:
別にRSS Readerを作らんでもこれでいいのか?↓
http://b.hatena.ne.jp/bookmarklist?url=てけとーMYURL

追記on2007-12-29:
↑でいけるのははてなダイアリの利用者。はてなダイアリーのRSSモジュールを使えば、あなたのブックマークを日記のサイドバーなどに表示させることができます。/はてなブックマークのエントリーを表示する(rssモジュール)

7件のコメント

とブログに縁のない僕が思ったのは、実は僕はhtmlにCのfor文が使えるなんて知らなかったからで。実はCは僕はダメなんですよ。計算部分はいいんだけどね、inputが出来ねえ。それで、matlabとfortran77で凌いでいるんですなあ。
for loopを使うようなhtmlを考えてみようっと。
  • 2007-12-28
  • 投稿者 : 二重虹
  • URL
  • 編集
どんどん便利になってますな。たまにHPをブログでやるべきかと思うことがあります。主にRSSで更新がチェック出来るという機能。RSSリーダーをHPで実現出来ればいいのかも知れないけど、必要以上のことはやりたくないと素直にいうべきか(笑)
こういうのをさくっと好みにカスタマイズしちゃうあたりが素敵です(笑)
  • 2007-12-28
  • 投稿者 : 篁頼征
  • URL
  • 編集
 二重虹さん、こんにちは。いつもコメントありがとうございます。htmlは単なるマークアップ、今更私がというまでもないと思いますが、for文もCも全く関係ないっしょ。二重虹さんの作業にとって以下の助言は的確かどうか私分からないけれど、演算処理はその筋のプロに相談したほうが断然解決が早いと思います、よ……?

 篁さん、こんにちは。
 小説よりも絵よりも、たまにこういうのをいじりたくなるんですよね〜……小説更新しろよという空耳もないわけじゃないんですが、まあぶっちゃけ常連さんは日々のヨタ話を見にきてくれてるわけで、自分的な負い目にはならない(小説待ってる人には申し訳ないが「どれもてきとうに」やるのが当サイトが上手く回るコツかと)。
 転回。
 
 上のソースは、とにかく貼り付けて、指摘した3三箇所を自分用に修正すれば使えるんじゃないかなと思います、難しいこと考えないで、とりあえずさわってみて動くのをみて、面白いと思うかどうかではないでしょうか。
 ブログのサイドバーに貼るんで、既にul,liタグのスタイル指定はCSSのどこかで為されてるはずだし、なーんも考える必要ないんじゃないかと。

 HPにはHPなりのブログにはない良さがあります。ブログでなくてもフィードは吐ける、ただ、一般ユーザーが難しいこと考えないでフィードを提供するにはブログが一番手軽なのではないでしょうか。
以前、3ヶ国語対応の home page を日本語をiso-2022、ゲルマン語をmidle-europeの対応で作ろうと思った事があって(今はUnicodeで済むから良いんですよね)、ま、結局面倒になって止めたんでしけど、そこでif文の入れ方を聞いた時に、これってtexよりプログラム言語的だなって思ったんでね。そうなると、javascriptみたいに易しいと言われている言語は、多少は極めないと行けないなとは思っていて、それで、for文の使い方に感心した訳ですよ。これって掲示板を自前で作るとき(登録者以外が書き込めない奴)に役立つでしょう?
  • 2007-12-29
  • 投稿者 : 二重虹
  • URL
  • 編集
 二重虹さん、こんにちは。イマイチよく伝わらないのですが、まあjavascriptであればさわればそれなりに動くので面白いですよ。
「あけおめ!」
って、「おめえ誰よ?」と問われそうなほどご無沙汰続きの那崎です。

「ほらほら、身体の一部が硬派な那崎ですって」
といっても、硬派な部分を公開するわけにもいかず、説明不足の感は免れません。

とにかく、
「今年もよろしくお願いしまっす!」
思い出せなくても構いませんので、忘れないでくださいね。
那崎さん、あけましておめでとうございます。
ありがとうございます、説明不足でよろしゅうございます、新年早々なにを開陳する気だこのやろー(笑
今年もこんな具合で楽しくお付き合いさせていただきたく存じます、こちらこそ今年もよろしくお願いします。

コメントの投稿

新規

投稿した内容は管理者にだけ閲覧出来ます

0件のトラックバック

トラックバックURL
http://klimit.blog7.fc2.com/tb.php/694-cf077e9c
この記事に対してトラックバックを送信する(FC2ブログユーザー)

Appendix

最近のエントリ

過去の記事タイトル一覧 はこちらから

ブログ内検索

QRコード

QRコード

小説「タトゥー・オブ・ギャラン」も読めるよ!
http://klimit.blog7.fc2.com/

最近のブクマ byコハ

    Read more...on koharitoのブックマーク