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

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

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

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

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

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

アンカータグの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

イメージタグの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$>のあとがいいでしょう。

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

Cocolog_like_01

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

コメント

  1. ひで より:

    facebookのいいね!をつけたいと思っていましたが、上級テンプレートでないとできないようでした。
    デザイン等を変更するのに、ちょっと面倒かなと思って躊躇していました。容量も十分ですし・・・。
    私の場合は、nifty側で供給待ちになっています。なぜniftyだけつけないのでしょうか。

  2. なおさん より:

    ひでさん、コメントありがとうございます。
    最近のココログは、上級テンプレートがほとんど触る余地がないです。モジュールで隠されまくっています。ですので、容量に不満のない限りは、乗り換えの必要はないですね。
    NiftyもSNSモドキをやっているので、FBやGoogle+はコンペチターなのでしょうね。Twitterもそうなんですけどこっちはサポートしていますね。
    同じプロバイダ系でもウェブリブログ(BIGLOBE)とかは全部付いていますねぇ。やっぱりニフティの体質と思いますね。