Facebook Like Widget на фан-странице, область комментариев вне видимой области - PullRequest
Новая
       24

Facebook Like Widget на фан-странице, область комментариев вне видимой области

20 голосов
/ 27 апреля 2011

При использовании виджета «Мне нравится» или «Отправить» на фан-странице (не важно, если вы используете для него тег iframe или fbml), наложение для комментариев всегда располагается справа.см. http://twitpic.com/4q7ggi, например.

Не могу найти способ заставить виджет соблюдать границу 520 пикселей на вкладке facebook.см. http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 для примера.У кого-нибудь есть идеи, как это решить?

TIA Rufinus

Ответы [ 5 ]

18 голосов
/ 27 мая 2011

Попробуйте добавить это к вашему CSS: 

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

Это переместит поле для комментариев влево, но маленькая стрелка, указывающая на кнопку, тоже переместится (которую вы можете попытаться накрыть другим элементом). Это будет работать только если вы используете XFBML, а не iframe.

Вот пример .

3 голосов
/ 31 июля 2012

Мне пришлось переместить маленькую стрелку вниз, и вот как я это сделал.

1) Переместите всплывающее окно в нужную позицию. Используйте! Важный оператор, чтобы перезаписать стили по умолчанию. 

.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, чтобы отрегулировать вертикальное положение и переместить фоновое изображение вниз.

Изображение будет выглядеть так: Image overlay for facebook like button popup.

2) Примените overflow: hidden к промежутку, охватывающему iframe. Мы сможем отрезать части iframe, применив margin-top на шаге 3, и заменим их нашими собственными. 

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

Я использую border-top для создания своей верхней границы, так как на шаге 3 мы обрезаем границу и стрелку по умолчанию.

3) Слегка переместите элемент iframe вверх, чтобы обрезать его верхнюю границу и стрелку. 

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

Результат выглядит в моем случае следующим образом:

enter image description here

2 голосов
/ 27 мая 2011

Если вы используете реализацию XFBML кнопки Facebook Like , вы можете использовать CSS, чтобы изменить положение всплывающего меню относительно его исходного положения рядом с Send кнопка:

enter image description here

В приведенном выше примере используется jsFiddle и этот CSS: 

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

Поскольку содержимое "всплывающего окна" находится внутри iframe, вы не сможете применить к нему какой-либо CSS & mdash; это означает, что перемещение индикатора треугольника с правой стороны «выпадающего меню» невозможно.

Веб-браузеры усилили безопасность при межкадровом скриптинге из-за спуфинга и других хаков, поэтому фреймы обрабатываются как отдельные HTML-страницы со своими собственными CSS и JavaScript.

Для любого расширенного стилевого оформления CSS вам придется внедрить iframe виджета Facebook с использованием сценариев DOM ... и даже тогда он может не работать во всех браузерах.

0 голосов
/ 11 июня 2016

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

0 голосов
/ 26 мая 2011

Не очень хороший ответ, но единственный вариант, который я нашел, - это обернуть виджет в абсолютно расположенный элемент Div, чтобы он оставался с левой стороны окна

...