以下のコードを使用して、Facebook の [いいね] ボタンを取得しました。さて、レンダリングされる Like ボタンのサイズを変更したいと思います。まったく機能しない width 属性を試しました。そして、以下のコードで使用されている CSS クラスを facebook でオーバーライドしようとしました。ただし、CSS クラスのオーバーライドも同様に機能しません。いいねボタンの高さと幅を大きくする方法を教えてください。
<div class="fb-like" data-href="http://www.xxxxx.com" data-send="true" data-width="450" data-show-faces="true"></div>
または、CSS を使用して iframe をターゲットにし、CSS3 を使用して拡大縮小することもできます。このようなもの：
#fbiframe
{
transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}
この種の Facebook ボタンのスタイルを変更することはできませんが、JavaScript OpenGraph SDKを使用すると独自のボタンを作成できます。このようにして、div (カスタム情報を使用) を使用したり、画像を使用したり、基本的にカスタマイズしたりできます。しかし、あなたはそれを望んでいます。欠点は、Facebook で生成されたボタンを使用するほど簡単ではないことと、アプリ ID が必要であり、ユーザーがいくつかの許可を与えることですが、それ以外は好きなように使用できます。
Facebook のようなボタンは、提供される Javascript によって iFrame にレンダリングされます。その iFrame は Facebook によってホストされ、スタイルをオーバーライドすることはできません。
当然のことですが、いいねボタンのサイズやスタイルを変更できた場合、インターネット全体で巨大な真っ赤な点滅ボタンが表示されます。これはひどいことです。目立たず、認識しやすく、目立たないように設計されています。