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

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>

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

スポンサーリンク

『BloggerにFC2拍手を導入する方法 【拍手ランキングブログパーツ】』へのコメント

  1. 名前:Anonymous : 投稿日:2012/01/15 22:38

    こんにちは。エントリを参考にして設置してみたのですが

    テンプレートの形式が適切でないため、解析できませんでした。 すべての XML 要素が適切に閉じられているかどうかを確認してください。
    XML エラー メッセージ: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    Error 500

    と出てしまいました。
    もう少し自力でがんばってみますが、もし解決法をご存知でしたら教えていただけないでしょうか?

  2. 名前:管理人 : 投稿日:2012/01/15 23:57

    ■変更前
    <img 省略 >

    ■変更後
    <img 省略 />

    imgタグの最後を />で終わるようにしてみてください。
    半角だとうまくかけないので、全角で書いてますが
    実際には半角で・・。

  3. 名前:Shelly : 投稿日:2013/12/30 10:00

    こんにちは。管理人様のように、シェアリンクと同じ場所に拍手ボタンを設置するのはどうしたら良いのでしょう??上記のようにしたら良いのでしょうか?? post-footerのタグが見つからなくて…すみませんが、教えて頂けますでしょうか。

  4. 名前:管理人 : 投稿日:2013/12/30 13:24

    記事に追記しました。
    シェアリンクなどは、忍者のおまとめボタンをいうのを利用しています。

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。