BloggerにFC2拍手とランキングを組み込む

FC2拍手の導入方法

「ブログ用の拍手タグ作成」を選択して、FC2ブログを選択すると以下のようなコードが作成されると思います。

<a href="http://clap.fc2.com/post/ＦＣ２のユーザーＩＤ/?url=<%topentry_enc_link>&title=<%topentry_enc_utftitle>" target="_blank" title="web拍手 by FC2"><img alt="web拍手 by FC2" src="http://clap.fc2.com/images/button/white/ＦＣ２のユーザーＩＤ?url=<%topentry_enc_link>&amp;lang=ja" style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;" /></a>

Bloggerに導入するために以下のように変更します。

<a expr:href='&quot;http://clap.fc2.com/post/ＦＣ２のユーザーＩＤ/?url=&quot; + data:post.url + &quot;&title=&quot; + data:post.title + &quot;(&quot; + data:blog.title + &quot;)&quot;' target='_blank' title='拍手する by FC2'><img alt="拍手する" expr:src='&quot;http://clap.fc2.com/images/button/white/ＦＣ２のユーザーＩＤ?url=&quot; + data:post.url' style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;" /></a>

ＦＣ２のユーザーＩＤだけ書き換えてそのまま、テンプレートのpost-footerあたりに挿入すればよいと思います。

FC2拍手ランキングの導入

FC2拍手は、ゆるいコミュニケーションが取れると思います。当Blogが続いているのはFC2拍手のおかげです。一時はやめようと思ったのですが、拍手が案外ついてたのでWordpressからBloggerに引っ越しして再度投稿をはじめて見たのです。

FC2拍手ランキングを作成しようと思ってExcelをつかって集計とかしていました。今回記事を書くのにあたって再度見たら、それ用のブログパーツがあるんですね。昔はなかったような気もするんですが、どうだったか忘れました。

ブログパーツ作成から、拍手ランキングブログパーツ作成ができます。javascriptのURLをHTMLエンコードして置き換えてからサイドバーに張り付ければ動作します。

カスタムを選択して、CSSを自分で記述するとブログにあったデザインでの導入も可能です。
カスタムを選択してスタイルシートなしでも、シンプルながらも標準で用意されているものよりもきれいに表示されるような気がします。

当Blogでは右画像のような感じにしました。使ったスタイルシートを載せておきます。

<style>
#fc2clap_rank_table { border-spacing:0px 3px; }
.fc2clap_rank_item { display:none; }
.fc2clap_rank_items1 { display:none; }
.fc2clap_rank_form { vertical-align:top;}
.fc2clap_rank_clap { text-align:right; width:4em; }
</style>

【関連ある記事】
・FC2拍手の画像が表示されないことがある
・WordPressにFC2拍手を設置する｜某氏のたわごと