私はFacebookのLikeボタンを得るために以下のコードを使用しました。さて、私はレンダリングされるLikeボタンのサイズを変更したいと思います。 私は全く動作していないwidth属性を試しました。そして、私はFacebookの下のコードで使用されているCSSクラスをオーバーライドしようとしました。しかし、CSSクラスをオーバーライドすることもうまくいきません。 どうすればいいボタンの高さと幅を増やすことができますか教えてください。ボタンはJavaScriptでiframe内にレンダリングされている同様Facebook Likeボタンのサイズを変更する
<div class="fb-like" data-href="http://www.xxxxx.com" data-send="true" data-width="450" data-show-faces="true"></div>
FacebookはのiFrameするFacebookでホストされているとスタイルを上書きすることができないことを、それらが提供する切り取ら。
あなたが好きなボタンのサイズやスタイルを変更できたら、巨大で明るい赤色のボタンがインターネット上に点滅するように見えます。彼らは控えめで、認識しやすく、目立たないように設計されています。
認識可能なキーもここにあります。誰もがFBのようなFBであると思わない単純なリンクをネット上で想像してみてください。単純なリンクをクリックするだけで、あなたが意図していなかったページが好きだったのです。 –
この種類のFacebookボタンのスタイルは変更できませんが、JavaScript OpenGraph SDKを使用すると独自のスタイルを作成できます。この方法でdiv（カスタム情報付き）を使用するか、基本的に画像を使用できます必要に応じてカスタマイズしてください。欠点は、Facebookで生成されたボタンを使用するのと同じくらい単純ではなく、App Idが必要であり、ユーザーがあなたにいくつかの権限を与えることです。
または、iframeをCSSでターゲティングし、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;
}
iPhoneでこれをクリックできないようですが、何もしません。 –
iPhoneで動作しない可能性がありますhttp://ejohn.org/blog/clickjacking-iphone-attack/のため、まだ回避策が見つかりません –
@benあなたは私の問題を解決しました。ありがとう – Ani
.like-btn iframe{margin:0 auto;float;none;border-radius:3px;display:block;max-width:105px;padding-top:2px;padding-left:2px;box-shadow:2px 2px 0px #222;height:35px;border:6px solid #3D58A4 !important;background: #3D58A4}
結果、このCSSを追加IFRAME
今<div class='like-btn'>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=105&layout=button_count&action=like&show_faces=false&share=false&height=35&appId=422608707941592" width="105" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
のためのdivクラスを作成します。
あなたは中央のボタンをしたくない場合は、[ボタンのようなリサイズ/規模のFacebook（高さと幅）]（HTTPのマージン
が重複する可能性のフロートinsteed使用することができます。//facebook.stackoverflowを.com/questions/8676972/resize-scale-facebook-like-button-height-and-width） – Igy
はい、またはhttp://stackoverflow.com/questions/3493117/custom-skin-for-facebook-like-button – Shenaniganz
あなたが聞きたい答えではなくても、ほとんどの投票に役立つ質問の回答に印を付けることを忘れないでください。 – reach4thelasers