bloggerサイドバーに記事に関連するはてなブックマークを表示する(テンプレートソース有り)。
bloggerサイドバーに記事に関連するはてなブックマークを表示できたらいいなと思い、テンプレートいじり倒して無理やり80%ぐらい達成。
トライしたのは「関連するマイはてなブックマーク」と「関連するはてな注目エントリー」のふたつ。
個別の記事ページではその記事についてるラベルと同じタグがついてる「自分のはてなブックマーク最新3件」と「はてなの注目エントリー最新3件」を表示、トップやカテゴリーページでは表示されているすべての記事についてるタグに関して「自分のはてなブックマーク最新3件」と「はてなの注目エントリー最新3件」を表示するようにしてみた。
以下のようなページを読んでなんとなくインスピレーションを得て、
JSON feed を利用してエントリーに関連する del.icio.us ブックマークを表示 - 2xup.org
小粋空間: RSS Feed(フィード)を表示する
下のページで紹介されているfeed2JSを利用して実現してます。
クリボウの Blogger Tips: Feed2JS の使い方
一見成功しているようで実はマイはてなブックマークのほうは日本語ラベルのものはきちんと処理されていなくて単純に自分のブックマークの最新3件が表示されてしまっている、なぜだろう?
おそらくfeedURLに含まれてる日本語がURLエンコードされてないのが原因だとは思うのだけど、だとすれば逆に注目エントリーのほうは日本語ラベルでもきちんと表示されているのが不思議。。
この辺が解決できればテンプレートソースを公開できるかなあ。。
追記:2007/5/19
マイはてなブックマークのほうで日本語ラベルのものがうまく処理されない問題は未解決ですがとりあえずテンプレートソースを公開します。
ただ、個々が使用しているテンプレートに依るところもあると思うので必ずしも単純なコピペではうまくいかないことも予想されるので軽くいくつかポイントを解説。
まず今回テンプレートをいじる際に参考にしたのは以下のページ
Blogger Help : Page Elements Tags for Layouts
Blogger Help : Widget Tags for Layouts
Blogger Help : Layouts Data Tags
やり方の発想としては簡単で、
「はてなブックマークの各フィードはURLの中にタグ名を入れてしぼりこむことができるので、
Feed2JSのフィードパスの中にどうにかbloggerのテンプレートタグから各記事についてるラベルを抽出して入れ込む」
というものです。
でいろいろと研究したところ、
・記事についているラベルの情報を取得できるウィジェットはBlog Postsウィジェットしかない(ウィジェットのtypeをBlogにする)。
のでtypeがBlogのウィジェットを作成することになります。
さらに注意点としては
・ブラウザ上でテンプレートをいじる場合は、挿入したい任意の位置にイチからウィジェットのコードを記述する。簡易テンプレート編集画面で追加した別のtypeのウィジェットのコードを雛形にウィジェットタイプを書き換えて作業すると、保存したあとにウィジェットtypeが強制的に元のtypeにもどされてしまい、うまくいかない。
・イチからtypeがBlogのウィジェットを記述して保存後、もう一度テンプレートソースをのぞくと、本当は必要のない大量のコード(Blogタイプのウィジェットが本来持つべき要素が記述されていると思われる)が追加されているが表示はうまくいくので気にしない(だいぶソースが見づらいですが・・)。
※このあたりはもしかしたらテンプレートを一度ダウンロードして編集後にアップロードすればあまり気にならない問題かもしれません。
で、以下が今回のテンプレートソースです。
「関連するマイはてなブックマーク(ただし日本語ラベルはうまくいかない)」<b:widget id='Blog3' locked='false' title='ブログの投稿' type='Blog'>
<b:includable id='main'>
<h2>関連するマイはてなブックマーク</h2>
<div class='widget-content'>
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
<h3><a expr:href='"http://b.hatena.ne.jp/kemworld/" + data:label.name + "/"'><data:label.name/></a></h3>
<script expr:src='"http://feed2js.org//feed2js.php?src=http%3A%2F%2Fb.hatena.ne.jp%2Fkemworld%2Frss%3Ftag%3D" + data:label.name + "&num=3&targ=y&utf=y&css=bmfeed&html=p"' language='JavaScript' type='text/javascript'/>
<noscript>
<a expr:href='"http://feed2js.org//feed2js.php?src=http%3A%2F%2Fb.hatena.ne.jp%2Fkemworld%2Frss%3Ftag%3D" + data:label.name + "&num=3&targ=y&utf=y&css=bmfeed&html=y"'>View RSS feed</a>
</noscript>
</b:loop>
</b:loop>
</b:widget>
「関連するはてな注目エントリー」<b:widget id='Blog2' locked='false' title='ブログの投稿' type='Blog'>
<b:includable id='main'>
<h2>関連するはてな注目エントリー</h2>
<div class='widget-content'>
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
<h3><a expr:href='"http://b.hatena.ne.jp/t/" + data:label.name + "?sort=count"'><data:label.name/></a></h3>
<script expr:src='"http://feed2js.org//feed2js.php?src=http%3A%2F%2Fb.hatena.ne.jp%2Ft%2F" + data:label.name + "%3Fmode%3Drss%26sort%3Dhot%26threshold%3D3&num=3&targ=y&utf=y&css=bmfeed&html=p"' language='JavaScript' type='text/javascript'/>
<noscript>
<a expr:href='"http://feed2js.org//feed2js.php?src=http%3A%2F%2Fb.hatena.ne.jp%2Ft%2F" + data:label.name + "%3Fmode%3Drss%26sort%3Dhot%26threshold%3D3&num=3&targ=y&utf=y&css=bmfeed&html=y"'>View RSS feed</a>
</noscript>
</b:loop>
</b:loop>
</b:widget>
上でも書いているように、「関連するマイはてなブックマーク」のほうは日本語ラベルがうまく処理されず、単に自分の最新ブックマークが表示されてしまいます。
どなたかこの問題解決されてる方・してみた方、いらしたらぜひコメント等で教えていただけませんでしょうか~♪
「関連するはてな注目エントリー」のほうは日本語ラベルも通ってきちんと表示されます。
フィードURLをちょっといじれば表示件数も調整できるし、注目エントリーだけじゃなくて人気エントリーを表示することもできます♪
0 件のコメント:
コメントを投稿