20

ファン ページで like または send ウィジェットを使用する場合 (iframe タグまたは fbml を使用するかどうかに関係なく)、コメント用のオーバーレイは常に右側に配置されます。たとえば、http://twitpic.com/4q7ggiを参照 してください。

Facebook タブの 520px の境界を尊重するようにウィジェットを取得する方法が見つかりません。例については、 http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842を参照してください。これを解決する方法を知っている人はいますか?

ティア・ルフィヌス

4

5 に答える 5

18

これをcssに追加してみてください:

.fb_edge_comment_widget {
    margin-left: -350px;
}

これによりコメントボックスが左に移動しますが、ボタンを指す小さな矢印も移動します(別の要素でカバーすることもできます)。これは、iframeではなくXFBMLを使用している場合にのみ機能します。

これが例です。

于 2011-05-27T11:56:47.627 に答える
3

私は小さな矢印を下に動かさなければなりませんでした、そしてそれは私がそれをした方法です。

1)ポップアップウィンドウを目的の位置に移動します。!importantステートメントを使用して、デフォルトのスタイルを上書きします。

.fb_edge_comment_widget {
    top: -224px !important; left: -246px !important; height: 191px;
    background: url(../img/arrow-down.gif) 0 100% no-repeat
}

このスタイルには、ポップアップウィンドウの一番下の行を置き換える新しい矢印画像も含まれています。これには、デフォルトで青(#283E6C)で、内側(#F2F2F2)が灰色の新しい下矢印が含まれています。を使用heightして、垂直位置を調整し、背景画像を下に移動できます。

画像は次のようになります ボタンポップアップのようなFacebookの画像オーバーレイ

2)overflow: hiddeniframeをラップするスパンに適用します。手順3で適用することで、iframeの一部を切り取りmargin-top、独自のスパンに置き換えることができます。

.fb_edge_comment_widget > span {
    height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}

手順3でデフォルトの境界線と矢印を切り取っているため、border-topを使用して独自の上部境界線を作成しています。

3)iframeを少し上に移動して、上部の境界線と矢印を切り取ります。

    .fb_edge_comment_widget > span > iframe {
        margin-top: -7px;
    }   

私の場合、結果は次のようになります。

ここに画像の説明を入力してください

于 2012-07-31T12:14:12.637 に答える
2

Facebook の Like ボタンの XFBML 実装を使用している場合は、 CSS を使用して、[送信] ボタンの近くの元の位置に対して「フライアウト」メニューを再配置できます。

ここに画像の説明を入力

jsFiddleとこの CSSを使用した上記の例:

.fb_edge_comment_widget {
    margin-left: -343px;
}

「フライアウト」のコンテンツは の内部にあるiframeため、それに CSS を適用することはできません。つまり、三角形のインジケーターを「フライアウト」の右側に移動することはできません。

Web ブラウザーでは、スプーフィングやその他のハッキングにより、クロスフレーム スクリプティングのセキュリティが強化されているため、iframe は独自の CSS と JavaScript を使用して別の HTML ページのように扱われます。

高度な CSS スタイリングの場合、DOM スクリプトを使用して Facebook ウィジェットの iframe を挿入する必要があります。それでも、ブラウザー間で機能しない場合があります。

于 2011-05-27T15:34:17.963 に答える
0

これを修正するには、ページの左側に Facebook ウィジェットを配置することを強くお勧めします。他のソリューションは一定期間は機能しますが、将来的には機能しなくなります。その理由は、Facebook がウィジェットを頻繁に更新するためです。

于 2016-06-11T13:51:22.287 に答える