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

StackOverflow https://stackoverflow.com/questions/5808240

Вопрос

При использовании виджета или отправки на странице вентилятора (нет Mater, если вы используете тег iframe или FBML для него) наложение для комментариев всегда расположено вправо. видетьhttp://twitpic.com/4q7ggi Например.

Я не могу найти способ заставить виджет уважать границу 520px вкладки Facebook. видеть http://www.facebook.com/pages/ludwig-test/127771653944246?sk=App_101150316644842 Для примера. Кто -нибудь идея, как это решить?

Тиа Руфинус

Это было полезно?

Решение

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

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

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

Вот пример.

Другие советы

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

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;
}

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

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

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

Результат выглядит так в моем случае:

enter image description here

Если вы используете реализацию XFBML Facebook Like Button, вы можете использовать CSS для повторного указания меню «Flyout» относительно его первоначальной позиции вблизи Отправлять кнопка:

enter image description here

Приведенный выше пример с использованием jsfiddle И это CSS:

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

Поскольку содержимое «Флаута» находится внутри iframe Вы не сможете применить к нему какую -либо CSS - что означает, что перемещение индикатора треугольника в правую сторону «Fruyout» невозможно.

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

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

Не отличный ответ, но единственный вариант, который я нашел

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top