あれは、はてなブックマークが提供しているサービスの1つで、HTMLとJavascriptをコピペするだけで簡単に指定したホストの人気エントリーが表示できてしまう、便利な機能です。
【参考URL】あなたのブログの人気・新着エントリーをブログパーツとして、貼り付けることができます。
http://b.hatena.ne.jp/entrylist/widget?url=http://www.yahoo.co.jp/
貼ってみたらデザインが当ブログに合わなかったので、CSSをいじってスタイルを変えてみたのですが、今ひとつ綺麗に収まらなかったり、設定するのが少し面倒だったり。
なので、途中で頭にきてJavascript側を改変してしまいました。
気づいたら、こんな風に指定すると人気エントリーが出るようになってました。
ソース
<!-- HTMLは外出しして自由に設定できるようにしました --> <div style="border:dotted 1px;" width:200px;>人気エントリー</div> <!-- 大枠です。IDは「hatena_entry」固定です。 --> <div id="hatena_entry"> <!-- ダミーの行エレメントです。IDは「hatena_entry_row」固定です。 --> <div id="hatena_entry_row" style="border: 1px dotted rgb(128, 128, 128); padding: 5px; width: 190px;"> <!-- コンテンツへのリンクのダミーです。styleやclassを自由に指定できます。 --> <a href="javascript:void(0)" id="hatena_entry_link" style="color:gray"></a> <!-- ○○usersと出るところのダミーです。文字usersは書換え可能。 --> <a href="javascript:void(0)" id="hatena_entry_comment_link" style='color:crimson'>users</a> </div> </div> <script type="text/javascript" src="http://www.mwsoft.jp/js/blog.js" charset="utf-8"></script> <script type="text/javascript"> Hatebu.Widget.url = "http://blog.mwsoft.jp/"; Hatebu.Widget.sort = ""; Hatebu.Widget.num = 5; Hatebu.Widget.load(); </script>
どうなってるかというと、HTML側でダミーのレイアウトを先に書いておきます。
それぞれエレメントのIDを、以下のように指定します。
hatena_entry : 大枠
hatena_entry_row : 行
hatena_entry_link : コンテンツへのリンク
hatena_entry_comment_link : ○○usersのように表示される部分
で、JavaScript側(http://www.mwsoft.jp/js/blog.js)では、ダミーで渡された行を複製してIDを変え、コンテンツのタイトルやリンク先、ユーザ数などを設定した行エレメントを追加し、最後にダミーの行を削除しています。
これで頻繁にブログのスタイルを変えたくなっても、HTMLを触るだけなので、割と楽に直せます。
こういう使い方ってして良いのだろうか。使用方法にはスタイルとかはCSSで変えていいよと書いてあったけど、Javascript側については特に何も書いてなかった。APIが用意されていたのでそこから取っても良かったのだけど、1から作るのは面倒だったので……
探したら他にもいろいろやってる人がいて、少し安心した
【参考URL】はてなブックマークウィジェットをhackする
http://www.h-fj.com/blog/archives/2007/12/02-093206.php
【参考URL】はてなブックマークウィジェットをちょっといじってみた
http://pooneil.sakura.ne.jp/archives/permalink/001175.php