FC2ブックマークの登録人数表示ボタンを設置する

静かなブームというか、ハッキリいうと利用状況がかなり寂しいFC2ブックマークなんですが、調べてみると他社のソーシャルブックマークサービスと同じように登録された人数を表示できるとのこと。ちゃんとした設置の仕方を書いてあるページもあまりないようなので、「このエントリーを含むFC2ブックマーク」ボタンを作ってみました。目につかない限りは普及もしないでしょうし、FC2Blogの方は使ってみてはいかがでしょうか？

FC2ブックマークって使ってます？

先日テンプレートをカスタマイズしたついでに各ソーシャルブックマークサービスの登録人数を表示するボタンを設置したので、それについてのまとめでも書こうかと思っていました。しかし、すでにちゃんとしたまとめが存在していたので、同じことをしても意味がないと判明。

creazy photograph
各ソーシャルブックマークサービス（SBM）のブックマーク数画像表示APIを調べた

でも上記のリンク先で始めて知ったんですが、FC2ブックマークも被ブックマーク数を表示する機能があったんですね。公式を見ても検索しても出てこなかったので、あること自体知りませんでした。(こういうことはきちんと公式でわかるようにしておくべきだと思いますが……。)

しかし、知っただけで満足してはしょうがないので、FC2Blogユーザの方なら(画像のURLをちゃんと指定すれば)ソースをコピー＆ペーストするだけで簡単に設置できるボタンを作りました。興味がある方はご利用ください。(他のBlogサービスでも使えるタイプも「多分」できると思ってますけど、とりあえず今回は(変数を使ってるので)FC2Blogユーザのみです。)

なお、これは以下のサイトを参考に作らせていただきました。貴重な情報ありがとうございます。

poets
Ｆブ カウンターを設置

SweetSpot
Bookmarked.

「このエントリーを含むFC2ブックマーク」のみのタイプ

テンプレートをカスタマイズして、ボタンを設置したいところに以下のソースを貼り付けてください。
<a href="http://bookmark.fc2.com/search/detail?url=<%topentry_enc_link>" title="このエントリーを含むFC2ブックマーク" target="_blank">
<img src="画像のURL" alt="このエントリーを含むFC2ブックマーク" style="border:0" />
</a>
<a href="http://bookmark.fc2.com/search/detail?url=<%topentry_enc_link>" target="_blank">
<img src="http://bookmark.fc2.com/image/users/<%topentry_link>" style="border:0" />
</a>
ソースでは途中で改行されていますが、IEでの表示が変になる場合があるので貼り付けるときは改行を消すことをお勧めします。画像は下のものを用意しましたので、使用する場合は保存してご自分のBlogにアップロードしてから使ってください。(FC2ブックマークのアイコンになるべく似せるように作りましたが、いちおう自分でドットを打った自作アイコンです。使う場合はご自由にどうぞ。気に入らない、見にくい場合は別途何かアイコンを用意してください。)

・「このエントリーを含むFC2ブックマーク」ボタン[サイズ 16×16 GIF]


設置に成功した場合、このように表示されるはずです。(ブックマークされていない場合はアイコンのみ。)

このエントリーを含むFC2ブックマークボタン

なお、上記のソースを参考にしたサイトでは画像を呼び出す変数に<%topentry_enc_link>を使うとのことでしたが、私が試した限りは正常に画像を呼び出すことができませんでした。下記のような状態になってしまいます。(IEの場合。Firefoxの場合は何も表示されない。)
被ブックマークリンクエラー

解決法が見つからなかったため、ここでは<%topentry_link>を使用しています。

ボタンをクリックした場合の挙動ですが、ブックマークが一件でもされているとFC2ブックマークの画面にジャンプします。(Googleの例)

しかし、一件のブックマークもされていないと、元のページにリダイレクトされて戻ってくるだけのようです。はてなブックマークなどとは挙動が違いますが、これは「仕様」のようなので仕方ありません。

「FC2ブックマークに追加」ボタンを使ったタイプ

上のものとは違い、画像ボタン自体は「FC2ブックマークに追加」するタイプです。人数の画像が「このエントリーを含むFC2ブックマーク」へのリンクになっているため、上のタイプと違いブックマークされていないときにリダイレクトされてしまう動作が起きません。(1ピクセルの画像が表示されるため、物理的にクリックするのが難しい。)

ただし、ボタン自体はFC2Blogはデフォルトで「ブックマークする」ボタンがあるためあまり意味はありませんが。使い方は上と同じように、ボタンを設置したいところにソースを貼り付けてください。
<a href="http://bookmark.fc2.com/user/post?title=<%enc_blogname>
%20<%topentry_enc_utftitle>&amp;url=<%topentry_enc_link>" title="FC2ブックマークに追加" target="_blank">
<img src="画像URL" alt="FC2ブックマークに追加" />
</a>
<a href="http://bookmark.fc2.com/search/detail?url=<%topentry_enc_link>" title="このエントリーを含むFC2ブックマーク" target="_blank">
<img src="http://bookmark.fc2.com/image/users/<%topentry_link>" style="border:0" />
</a>
繰り返しになりますが、実際に貼り付けるときは改行を消した方がいいと思われます。画像は下のFC2デフォルトのものをお勧めします。保存してアップロードしてもいいですし、Blogの管理画面に同じ画像がありますのでそちらを使ってもいいでしょう。

・「FC2ブックマークに追加」ボタン[サイズ 18×18 GIF]
b-button.gif
設置に成功した場合、このように表示されるはずです。 (ブックマークされていない場合はアイコンのみ。)
FC2ブックマークに追加

なお、「ブックマークする」ボタン自体の挙動は、エントリの最後に自動で挿入されるものとまったく同じです。(動作確認済み。)

注意など

自分ができる範囲でチェックしましたが、環境によってエラー等がある場合は指摘をよろしくお願いします。(上の画像を使う場合)画像は保存した後、自分のBlogからアップロードして使ってください。このソースはFC2Blogにしか使えませんが、(もしかしたら)各社Blog変数に変えることによって動くかもしれません。

それといわゆる「動作チェック」ができるように、このエントリには自己ブックマークしておきます。宣伝のようになってしまったらごめんなさい。