BloggerにFC2拍手を導入する方法 【拍手ランキングブログパーツ】

Blogger

FC2拍手の導入方法

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

・<%topentry_enc_link>
・<%topentry_enc_utftitle>
あたりをBloggerのテンプレートタグに置き換えればOKです。
自動生成されるコード
<a href="http://clap.fc2.com/post/FC2のユーザーID/?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/FC2のユーザーID?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/FC2のユーザーID/?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/FC2のユーザーID?url=&quot; + data:post.url' style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;" /></a>
FC2のユーザーIDだけ書き換えてそのまま、テンプレートのpost-footerあたりに挿入すればよいと思います。

追記:2013/12/30
テンプレートに追加

テンプレート->HTML編集で上記の画面になります。
編集できるテキストエリアの部分をクリックしてから、「CTRL」+「F」キーを押すと、検索窓が出てきますので、そこで検索したいキーワードをいれて検索をかけると、その場所に飛んでくれます。

[blogger]忍者おまとめボタン「も」利用して、記事の下にソーシャルボタンを付ける! - Sunabox

FC2拍手以外のボタンは、忍者おまとめボタンを導入していて、その後ろに、FC2拍手のタグを書いています。

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>

【ブログ内で関連ある記事】

スポンサーリンク