2011年1月9日日曜日

zenbackをBloggerとTumblrで

年末年始いろんなサイトで関連記事やら関連リンクが全く同じデザインで表示されてるのを見て、なんだろな~、と。

どうもzenbackというブログパーツのサービスみたいで(ちゃんとpowered by zenbackって書いてるのに、気づかずにHTMLソースから追いかけちまった、てへ)。

zb1

zenbackであなたのブログに全てのフィードバックを。

運営は大御所シックス・アパート。エンジンはログリー株式会社のnewziaコネクト。

newziaコネクト | コンテキストマッチサービス

凄いね。こんなスゴイサービスが半年も前からベータテスト始まってたのを全然しらなかった。アルゴリズムは「当社独自の連想検索技術および行動履歴解析技術」ってことで、連想検索というのが気になる(TF/IDF的なことも計算してるんだろうけど、その辺はちょっと不明)。

コンテキストマッチ自体面白い領域なので、そろそろ真面目に取り組まないとな~とは思ってるんだけど、以前作ったものをもっとちゃんとzenbackみたいにエンジン化していきたいなと思ってる次第です。

はい、んで、こんな面白いサービスは早速自分のブログにも導入したくなるじゃないですか。仕込む時点ではBloggerとTumblrではうまく貼り付けられない的な事が書かれてた。

要するにアーカイブページ(一覧ページ)とエントリーページ(個別Permalink)の判定がごにょごにょと。そうかもね、分かりにくいよね。なので、やり方。

Tumblr

TumblrのDashboardからAccountのPreference

zb2

Customize your Blog

zb3

Themeメニューをクリックして以下の部分にzenbackのスクリプトを貼りつけ。

zb4

{block:Permalink}~{/block:Permalink}のあいだです。↑この画像だと同じ場所にTypePad Connectのコメント欄もだしてます。

Blogger

Bloggerもスクリプトを入れる場所が分かりにくいんだけど、それだけじゃなくてXML的にValidじゃないとダメだから、zenbackのサイトで出力されるscriptそのままじゃダメで、ちゃんとCDATAにしてあげないとエラーになります。

これもダッシュボードからデザイン→HTMLの編集へ進んで"ウィジェットのテンプレートを展開"にチェックを入れる。

zb5

<b:if cond='data:post.allowComments'>~<b:else>~</b:if>のelse以降のブロックにスクリプトを書きましょう。

zb6

ちょっと大きなXMLなのでエレメントブロックが分り易見れるようにVS2010で。編集はテキストエディタで十分。

zenbackのダッシュボードからCODEを取得すると

<!-- X:S ZenBackWidget -->
<script type="text/javascript">
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//takepara.blogspot.com&nsid=93212648191094697%3A%3A93212656780978809&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E")); </script> <!-- X:E ZenBackWidget -->

↑こうなので、ちゃんとCDATAにしましょう。

<!-- X:S ZenBackWidget -->
<script type="text/javascript">

//<![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//takepara.blogspot.com&nsid=93212648191094697%3A%3A93212656780978809&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
//]]>
</script> <!-- X:E ZenBackWidget -->

これで関連記事やらなにやらいろいろ表示されますね!リコメンド素敵。