Move/Position Facebook Like Button Комментарий Popup

Мне нужно переместить всплывающее окно комментариев, связанное с кнопкой facebook. Я понимаю, что этот вопрос был задан и разрешен несметное количество раз.

Ранее спрашивали: Facebook Like Widget на странице Fan, область комментариев из видимой области

Снимок экрана с той же проблемой, что и у меня: http://twitpic.com/4q7ggi

Разница здесь в том, что я считаю, что Facebook изменил реализацию в течение последних нескольких месяцев, так что и кнопка Like и всплывающее окно комментариев содержатся в одном iframe. Я ожидал бы, что они, вероятно, сделали это, потому что это был бы единственный надежный способ защиты от вредоносных веб-сайтов, использующих пользователей с помощью автоподобного контента. Однако это означает, что я не могу применить CSS для перестановки поля комментариев.

Я использую реализацию кнопки HTML5 как ту же, что и в официальной ссылке на facebook для таких кнопок http://developers.facebook.com/docs/reference/plugins/like/. Чтобы увидеть пример, снова нажмите кнопку на странице ссылок на facebook, а затем просмотрите элемент всплывающего окна комментария. Вы увидите, что и кнопка типа и всплывающее окно комментариев содержатся в одном и том же iframe.

Ответ 1

В прошлом это работало для меня.

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget span iframe {
    /* Now you can apply css here */
    bottom:0!important;
}

Ответ 2

Вы не можете изменить CSS поля комментарий внутри iframe, потому что это нарушение той же политики происхождения:

Политика разрешает скрипты, запущенные на страницах, происходящих из одного и того же сайта, для доступа к другим методам и свойствам без особых ограничений, но предотвращает доступ к большинству методов и свойств между страницами на разных сайтах.

Сообщение отправить сообщение можно изменить с помощью CSS, поскольку оно не находится в iframe.

Ответ 3

это работает для меня, вот пример fiddle. Все, что я делал, было простой модификацией css:

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

надеюсь, что это поможет.

Ответ 4

Я проверил пример Facebook, и я вижу этот блок комментариев: http://screencast.com/t/fRQyUzqek

Я проверил и применил стили к этому классу:

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

И это переместило окно комментария. Тем не менее, я сделал это непосредственно в инспекторе, поэтому, когда вы используете его в своем CSS, вам может потребоваться включить родительские селекторы, чтобы быть действительно конкретным.

Надеюсь, это поможет!