2008年6月12日木曜日

hatena-bookmark-anywhere-0-1-each-articles.jsを公開しました

有益なコメントが多いはてなブックークのコメントを、1ページに複数のコメントのリストを表示できるように改造した、hatena-bookmark-anywhere-0-1-each-articles.jsを公開しました。

この版は、元々masuidriveさんが作られたhatena_bookmark_anywhere.js(今開いているページのコメントのリストを1つ表示)を改造したもので、ソースレベルでの互換性がないことから、別の版としてリリースする事になったものです。(基本的な流れは同じです)

基本的に先日の「調子に乗ってbloggerにhatena_bookmark_anywhere.jsを組み込んでみました 」から変わってはいません。

masuidriveさんと相談して、別々のファイルとして公開して行こうという流れになったので、公開記事としてまとめ直しただけのものです。

設置方法

1.zipファイルからJavaScriptファイルを取り出す

ここからzipファイルをダウンロードし、解凍してhatena-bookmark-anywhere-0-1-each-articles.jsを取り出し、hatena-bookmark-anywhere-each-articles.jsと名前を変えておく。

2.JavaScriptを設置したいページに設置する

これは2つ方法があり、

2-A.JavaScriptファイルを別途用意できる場合(キャッシュ効くのでおすすめ)

<script src="[設置パス]hatena-bookmark-anywhere-each-articles.js" type="text/javascript" charset="utf-8"></script>

として読み込む。

2-B.hatena-bookmark-anywhere-each-articles.jsの内容をHTMLのHEADに設置する(Bloggerなどはこちらでも良い)

HTMLやテンプレートファイルの適当な場所に、以下のようにScriptを仕込む

<!-- start of Hatena bookmark anywhere -->

<script type='text/javascript'>

/*<![CDATA[*/

(ここにhatena-bookmark-anywhere-each-articles.jsの内容をコピペする)

/*]]>*/

</script>

<!-- end of Hatena bookmark anywhere -->

3.はてなブックマークのコメントリスト表示エリアとパーマネントリンクを指定する

<div class='hatena_bookmark_anywhere' target_url='http://example.com/path/to/yourblog'/>

  • divタグじゃなきゃいやん。ハードコーディングしちゃってるしー。
  • classプロパティは 'hatena_bookmark_anywhere'とする。もしコレ以外だったら何もしない。もしクラス名を変えたかったらライブラリの__hatena_bookmark_anywhere_special_class_nameを変更する事。
  • target_urlプロパティは該当ブログのパーマネントリンクを入れること。空だったら何もしない。もしイヤンならライブラリの__hatena_bookmark_anywhere_target_url_prop_nameを変更する事。
  • idプロパティなんてデザイン要素としては使う必要ないのかもしれないけど、ライブラリの内部で動的にidを付けちゃってるので、指定しても無駄無駄。クラス当てようね。
  • なにかと被ったらごめんなさい。
  • Firefox2 on MacOSX10.5とsafari3.0 on MacOSX10.5しかテストしてませんです。
  • あとは基本的にhatena_bookmark_anywhere.jsと同じ

もし、Blogger用に使いたければ以下のようにすれば良い。

Bloggerの管理画面から、レイアウト→HTMLの編集→ウィジットのテンプレートを展開にチェック→以下のタグを探す

<div class='post-footer-line post-footer-line-3' />

これを以下のように変更

<div class='post-footer-line post-footer-line-3'>

<div class='hatena_bookmark_anywhere' expr:target_url='data:post.url'/>

</div>

0 件のコメント: