A Way of Code

興味の赴くままに書き綴っていきます。

はてなブログにZenbackを埋めて関連記事を生成する方法

はてな

ブログの関連記事を生成するには、Zenbackサービスを使うと便利です。小飼弾さんの404 Not Foundで使用されていることで有名です。
http://zenback.jp/

はてなブログの記事本体にzenbackのコードを埋め込んでみました。
挙動が不安定ですが、興味のある方は試してみてください。

  • 頻繁に２エントリ目以降のzenbackが読み込まれない
  • たまに脚注記法が適用されて表示がおかしくなる
  • <head>部にrssのリンクが無いので、関連記事が出ないんじゃないか疑惑
    • →生成されました。/feedへのリンクが貼ってありましたね (2012/2/27追記)

とりあえず記事ごと表示すればにzenbackが読み込まれるのでまいっか。

＃ご利用は自己責任で

前提

1. はてなブログには、2012年2月現在、HTMLテンプレート機能が無いため、記事ごとにzenbackのコードを埋め込む必要があります。
＃サイドバーに埋めた場合、各ガジェットのリンク先は、記事ではなく常にトップページになってしまいます。

2. 編集モードを「はてな記法モード」にしておきます。

zenbackに登録する

以下のページで、利用規約等々に同意したらあなたのブログページを登録します。
＃ブログURLの末尾に/を付けて登録しないと挙動がおかしくなります。

http://zenback.jp/

登録すると以下のようにコードが生成されます。
f:id:toggtc:20120226065243p:plain
そのコードをコピーして、変更を加えます。

方法A コピペ用

さっとコピペしたい人のためにコードを貼っておきます。

[]<script type="text/javascript" src='http://widget.zenback.jp/?base_uri=http%3A//YOUR_URL&nsid=YOUR_NSID&rand='+Math.ceil((new Date()*1)*Math.random())></script>[]

YOUR_URLはあなたのブログURLを指定してください。(http://より後ろの部分です）
YOUR_NSIDはあなたのnsidパラメータ値に置き換えてください。

方法B 自分で修正する

はてなブログにzenbackのコードを貼り付けるには、以下の修正が必要です。

  • 前後のコメント部分を削除
  • document.writeを使わず、<script></script>を直接記述する
  • 前後にはてな記法［］を挿入する

（赤字…削除部分、青字...追加部分、緑字...変更部分）
変更前：
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//hoge.hatenablog.com&nsid=99999999999999999999999999999&rand="+Math.ceil((new Date()*1)*Math.random())+"'type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->

変更後：
［］<script type="text/javascript" src='http://widget.zenback.jp/?base_uri=http%3A//hoge.hatenablog.com&nsid=99999999999999999999999999999&rand='+Math.ceil((new Date()*1)*Math.random())> </script>［］

あとは出来上がったスクリプトコードを、記事の最後に貼りつけてください。コードは改行せず、一行にしておく必要があります。
＃改行を<p>タグに変換されてしまうので

なぜコードの修正が必要なのか

  • コメントの除去
  • document.writeの除去
    • →はてなブログはクライアントサイドで脚注の展開をしているっぽい(´・ω・｀)
    • （はてなダイアリーでどうだったかは知らないです）
    • document.writeのところに、［］を付与すれば脚注評価がキャンセルできるかもしれない、試していないけど
  • ［］の付与
    • →注釈記法の回避

実際に、はてなブログにzenbackのスクリプトをそのまま埋め込むと、おかしな表示になります↓

*1:new Date()*1)*Math.random(

ソースを確認してみたところ、はてなブログ内で以下のように変換されていました。

Math.ceil((new Date()*1)*Math.random())
↓
Math.ceil<a href="#f1" name="fn1" title="new Date()*1)*Math.random(">*1</a>")

＃上記コードで、fn1というname属性はfotternote(脚注)のことですね。

((new Date()*1)*Math.random())が、注釈記法に引っかかるようです。

zenbackをフルで入れると、コメント欄とはてなスターが遠くなるので、ガジェットを絞ったほうがいいかもしれませんね。
あと、ページが重いとタイムアウトが走るのか、読み込み中で止まってしまうようです。
はてなのJavaScriptを把握していないので、全ての状況でこの方法でうまくいくかは分かりませんが、興味のある方は試してみてください。

それからそれから、Firefox便利ですね。表示されたページの見たい部分を範囲選択or全選択して、右クリックして"選択した部分のソースを表示"ってするとJavaScript展開後のHTMLが表示できる！