• 仕様
• デザインをリセットする（ボタン部分に表示されている枠線や背景色をなくす）
• FC2ブログ拍手・ブックマークの横に並べる
• TwitterとFacebookボタンのあいだの余白を増やす
• Facebookボタンの横幅を増やす（いいね！カウントが隠れる場合）

　テンプレートに直接設置する方法については、公式サイトやツイートボタンの設置方法、Twitter+Topsy設置をご覧ください。

仕様

挿入箇所

　FC2ブログ拍手やFC2ブックマークと同じです。
　[環境設定][ブログの設定][記事の設定][拍手ボタンの表示位置]によって決まります。

『追記リンクの前』…記事本文の直後。

『追記リンクの後』…トップページなどでは<!--/more-->変数の直後（more変数がない場合は表示されない）。個別ページでは記事本文の直後。

挿入されるコード

　有効にすると、div.fc2_footer要素内、拍手・ブックマークの後にtable要素が挿入されます。

<div class="fc2_footer">
 <a href="javascript:;" onClick="javascript:window.open('http://blogvote.fc2.com/pickup/ブログID/1/clap');">
  <img src="https://blog-imgs-1.fc2.com/image/clap/number/white/1.gif" style="border:0;" />
 </a>
 <a href="http://bookmark.fc2.com/user/post?title=記事タイトル&amp;url=記事URIエンコード">
  <img src="http://blog92.fc2.com/image/b-white.gif" alt="FC2ブックマークに追加" style="border:0;" />
 </a>
 <table class="fc2_socialbtn" style="margin-right:auto;margin-left:0">
  <tr>
   <td style="vertical-align:top;" class="fc2button-twitter">
    <script type="text/javascript">
     document.write('<a href="http://twitter.com/share" class="twitter-share-button" data-url="記事URI" data-text="記事タイトル" data-count="horizontal" data-lang="'+(window.navigator.language || 'ja')+'">Tweet</a>');
    </script>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
   </td>
   <td style="vertical-align:top;" class="fc2button-facebook">
    <iframe src="http://www.facebook.com/plugins/like.php?href=記事URIエンコード&amp;layout=button_count&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:80px;" allowTransparency="true"></iframe>
   </td>
  </tr>
 </table>
</div>

　Twitterボタンが有効でFacebookボタンが有効でない場合は、fc2button-facebookのtd要素は出力されません。Facebookボタンのみ有効な場合は、fc2button-twitterのtd要素は出力されません。

動作環境

　TwitterボタンはJavaScriptオフだと機能しません。

　基本的に古いブラウザでは正常に動作しないと考えた方がいいかもしれません。例えば、IE7以下やFirefox2などです。

　IE7で「'}'がありません」のエラーが表示される現象は、文字コード utf-8 を指定することで回避できるのではないかと思います。ページ表示の際にエラーが発生することはなくなりますが、ツイートボタンをクリックしたときにボタンが消失するなど正常に動作しないことがあるかもしれません。

<script charset="utf-8" type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

• ▲

デザイン

　テンプレートに依存するため、すべての値に !important をつけていますが、優先順位を把握している場合は !important を適宜削除してください。

デザインをリセットする（ボタン部分に表示されている枠線や背景色をなくす）

　線や背景色を削除します。

　利用中のテンプレートのスタイルシートに次のコードを追加します。

.fc2_socialbtn, .fc2_socialbtn td {
 margin: 0 !important;
 padding: 0 !important;
 border: 0 none !important;
 background: none !important;
}

FC2ブログ拍手・ブックマークの横に並べる

　利用中のテンプレートのスタイルシートに次のコードを追加します。4pxは左余白です。数値を増やすと拍手・ブックマークボタンとの間隔が広がります。

table.fc2_socialbtn {
 margin: 0 0 0 4px !important;
 display: inline !important;
}

　拍手とブックマークボタンの位置をトップに揃えるときは次のコードも追加します。

.fc2_footer img {
 vertical-align: top !important;
}

TwitterとFacebookボタンのあいだの余白を増やす

　利用中のテンプレートのスタイルシートに次のコードを追加します。4pxが余白です。数値を増やすとTwitterとFacebookボタンとの間隔が広がります。

.fc2_socialbtn .fc2button-twitter {
 padding: 0 4px 0 0 !important;
}

Facebookボタンの横幅を増やす（いいね！カウントが隠れる場合）

　利用中のテンプレートのスタイルシートに次のコードを追加します。105pxが横幅です。数値を増やすとFacebookボタンの表示範囲が広がります。

.fc2button-facebook iframe {
 width: 105px !important;
}

• ▲

更新履歴

• 2010 11-17 - 公開。

関連記事

• カテゴリ編集・一覧ページの仕様変更 指定件数表示と検索
• ブログIDや画像などのファイルからFC2ブログアドレスを調べる方法
• コメントの名前などを必須項目に、パスワードの最低文字数を指定
• ブログ設定のツイート・いいね！ボタンの仕様・横並びデザイン
• ブログの設定更新時と更新後のブログ初回アクセスに時間がかかる
• FC2ブログ検索フォームプラグイン（OR検索、コメント、トラックバック）
• FC2ブログタイトルに＜!search_area_start＞が表示される、スクリプトが動かないときの対処法