【ココログ】上級テンプレートでココログ「いいね！」ボタンを付けてみた

ココログプロで上級テンプレートを使っている場合に、ココログの「いいね！」ボタンを使えるようにしてみました。最近、ありがたいことにココログの「いいね！」をして下さる方が多いので、「いいね！」しやすいように記事にボタンを付けてみることにしました。

ココログでのブログの開始時期によっては、最初から「いいね！」ボタンが付いていますが、ココログ「いいね！」ボタンが設置される以前に上級テンプレートを使い始めた場合、ココログ側のサポートでは「いいね！」ボタンを設置することはできません。

そこで、上級テンプレートらしく直接テンプレートを書き換える方法で「いいね！」ボタンの設置を行ってみました。

まず考えるのは、どのようなマークアップを入れたらよいか？ということですが、それはわかりませんでした。ココログでは、フッタ部分はモジュール化されており、管理画面での設定によってフッタ部に表示する内容をコントロールできるようになっています。

しかし、上級テンプレートになってしまうと、管理画面での設定自体ができなくなるので、すでに設置されたテンプレートでは手も足も出ません。ではどうするか？実際に「いいね！」ボタンが表示されたページでボタン要素のマークアップを解析し、アンカータグとイメージタグを自前で作ってしまうことにしました。

アンカータグのURLはこんな感じです。ユーザIDと記事URLがパラメータであるようです（4287は私のIDです）。

http://squares.cocolog-nifty.com/likes/new?user_id=4287&url=http://naosan.way-nifty.com/blog/2011/10/post-d72d.html

squares.cocolog-nifty.com

イメージタグのURLはこんな感じです。GIF画像へのURLそのままですね。

http://updates.cocolog-nifty.com/squares/user_blog_resources/like-min.gif

これを組み合わせて、こんなマークアップにすればよさそうです。

<a href="http://squares.cocolog-nifty.com/likes/new?user_id=4287&url=http://naosan.way-nifty.com/blog/2011/10/post-d72d.html"><img src="http://updates.cocolog-nifty.com/squares/user_blog_resources/like-min.gif" /></a>

実際には、URLはページごとに違いますから、MTタグを使って変数にします。

<a href="http://squares.cocolog-nifty.com/likes/new?user_id=4287&url=<$MTEntryPermalink>"><img
src="http://updates.cocolog-nifty.com/squares/user_blog_resources/like-min.gif" /></a>

これを、Main Index Template, Category Archive, Datebased Archive, Indivisual Archiveのそれぞれに追加します。場所は、<$MTEntryPostFooterLinks$>のあとがいいでしょう。

これで、こんな感じでココログ版「いいね！」ボタンが設置されます。

ココログでブログを開設している皆さん、「いいね！」でコミュニケーションしましょう。