20

Facebookのいいねボタンに関連付けられたポップアップコメントボックスを移動する必要があります。この質問が何度も聞かれ、解決されてきたことを理解しています。

以前の質問: Facebook のファン ページのいいね! ウィジェット、コメント領域が表示領域外にある

私と同じ問題のスクリーンショット: http://twitpic.com/4q7ggi

ここでの違いは、Facebook が過去数か月の間に実装を変更し、いいねボタンとコメント ポップアップの両方が 1 つの iframe 内に含まれるようになったことです。コンテンツを自動的にいいね! することでユーザーを利用する悪意のある Web サイトから保護する唯一の信頼できる方法であるため、彼らがこれを行った可能性が高いと思います。ただし、CSS を適用してコメント ボックスの位置を変更することはできません。

私はHTML5のようなボタンの実装を使用しています. 例を確認するには、Facebook の参照ページで [いいね] ボタンをもう一度クリックしてから、コメント ポップアップ要素を調べます。いいねボタンとコメント ポップアップの両方が同じ iframe 内に含まれていることがわかります。

4

4 に答える 4

4

これは過去に私のために働いた。

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget span iframe {
    /* Now you can apply css here */
    bottom:0!important;
}
于 2013-03-15T17:03:50.110 に答える
2

同じ生成元ポリシーに違反しているため、iframe 内のコメントボックスの CSS を変更することはできません。

このポリシーは、同じサイトからのページで実行されているスクリプトが、特定の制限なしに互いのメソッドとプロパティにアクセスすることを許可しますが、異なるサイトのページにまたがるほとんどのメソッドとプロパティへのアクセスを防ぎます。

ボックスへの送信メッセージは、iframe 内に存在しないため、CSS で変更できます。

于 2013-02-27T00:40:30.467 に答える
1

これは私にとってはうまくいきます。ここにフィドルの例があります。私がしたことは、css による簡単な変更だけでした。

.fb_edge_widget_with_comment span.fb_send_button_form_widget {
  top:100px!important;  /*for example*/
  left:100px!important;        /*for example*/
}

これが役に立てば幸いです。

于 2012-12-19T11:57:34.547 に答える
0

Facebook の例を確認したところ、次のコメント ボックスが表示されました: http://screencast.com/t/fRQyUzqek

このクラスを調べて、スタイリングを適用しました。

.-cx-PRIVATE-pluginCommentFlyout__full {
    top: 100px!important;
    left: 100px!important;
}

そして、それはコメントボックスを移動しました。ただし、これはインスペクターで直接行ったので、CSS で使用する場合は、親セレクターも含める必要がある場合があります。

お役に立てれば！

于 2013-01-23T20:07:13.830 に答える