Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

ブログ設定のツイート・いいね!ボタンの仕様・横並びデザイン

ブログの設定

 2010年10月21日に環境設定のブログの設定で設置するTwitterFacebookのソーシャルボタンが実装されました。


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

仕様

「Twitter・Facebook」ボタン

挿入箇所

 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="http://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 - 公開。
関連記事
  1. comment
  2. tatsu 2011-02-27 20:38 No.584 #-URL

    良い記事有難う御座います。グーグル・クローム9が横並びデザインになりません。良い方法有りますでしょうか。

  3. Pdy 2011-02-28 00:37 No.585 #-URL

    こんにちは。
    ブラウザ側のstylesheetの関係だと思います。
    次のコードをテンプレートのスタイルシートに追加するとたぶん横に並びます。

    .fc2_socialbtn tbody,.fc2_socialbtn tr,.fc2_socialbtn td {
    display: inline !important;
    }

  4. tatsu 2011-03-01 20:55 No.587 #-URL

    有難う御座います。IE8、FF3.6は記事のCSSで横並びになっていたので、最後に回答いただいたコードをそのまま追加してみましたが、Chome9は横並びにならないようです。

  5. Pdy 2011-03-02 01:33 No.588 #-URLhttp://paro3day.blog4.fc2.com/blog-entry-63.html

    Chrome8から9にアップデートしましたが、こちらで確認した限りでは並んでいます。
    以下(URL)は、同じコードを貼り付けたブログですが、こちらも同様に表示されるでしょうか。
    環境設定から設置した拍手とツイートボタンです。
    http://paro3day.blog4.fc2.com/blog-entry-63.html

    /* スタイルシート */
    table.fc2_socialbtn {
    margin: 0 0 0 4px !important;
    display: inline !important;
    }
    .fc2_footer img {
    vertical-align: top !important;
    }
    .fc2_socialbtn tbody,.fc2_socialbtn tr,.fc2_socialbtn td {
    display: inline !important;
    }

  6. tatsu 2011-03-02 08:38 No.589 #-URL

    Chomeのキャッシュを削除したら適用されました。お手数お掛けしました。

  7. みきこ 2012-11-21 21:32 No.1580 #-URL

    こんにちは。
    参考にさせてもらってます。
    スタイルシートに挿入したのですがIEだとどうも高さが違ってきちんを揃わないのです。
    Twitterのボタンが少々、下にずれているようです。
    きれいに揃える方法はありますでしょうか?
    よろしければお願いします。

  8. Pdy 2012-11-21 22:42 No.1581 #-URL

    こんにちは。
    テンプレートの影響だと思うのですが以下を追加してみてください。

    .fc2_socialbtn tbody,.fc2_socialbtn tr,body .fc2_socialbtn td {padding-top:0 !important;}

    改善されない場合はご利用中のテンプレートの名前がわかれば対処できるかもしれません。

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/634-e6be17c7

  1. trackback