0

私のページには Facebook の「いいね」ボタンがあります。

<div class="fb-like" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"/>

また、'fb-root'div と SDKもありますjavascript(ボタンは正常に機能します)。

何らかの理由で、いいねボタンがオンになっている場合 (訪問者が Facebook アカウントに接続していて、以前に私のページに「いいね!」をしたことがある場合に発生します)、ボタンは魔法のようにその幅を (最後の 1 秒間の JavaScript で) 縮小し、他のボタン ( twitter/g+) 非表示にします。1 秒間は問題なく整列し、その後「崩壊」します。

CSS やサイトの他の多くのコンポーネントを無効にしようとしましたが、役に立ちませんでした。状況を説明する画像を添付しました。

編集：私が見つけたもの。width 属性は、オーバーライドされているように見える属性です。設定時width = 2000（非常に高い）、いいねボタンが有効な場合（ユーザーが接続されていない/いいねされていない）、ボタンは確かに2000px幅が広いですが、以前にいいねされたユーザーが接続されている場合、そこに2000pxの幅が1秒間表示されます。そして、再び「崩壊」します。

EDIT2: 犯人は見つかったようですが、原因と修正方法がわかりません。facebook ボタンのトグルで生成されたコードが、幅を 100 ではなく 72 に設定しているようです。

有効化されたボタンの生成コード:

<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial">
<span style="height: 20px; width: 100px;">

いいね（無効）ボタンの生成コード：

<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial">
<span style="height: 21px; width: 72px;">

どんな助けでも大歓迎です。ありがとうございました！

ここに画像の説明を入力

4

2 に答える 2

0

あなたは使用しようとすることができます

<div style="width: 100px;"></div>

コードをラップします。通常、プラグインは、ページの読み込み時に親要素の幅に自動的に適応します。

親要素の幅がデータ幅よりも小さい場合、Facebook ボタンが縮小する可能性があります。これが、ボタンのサイズが変化する理由である可能性があります。

于 2015-06-10T02:50:08.630 に答える
0

さて、これをCSSに追加することになりました：

div.fb-like > span {
min-width:100px;
}

おそらく最善の方法ではありませんが、今のところ機能しています。

于 2012-08-17T20:11:58.240 に答える