При использовании подобной формы или отправки виджета на странице вентилятора (без матер, если вы используете тег 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) Переместите всплывающее окно в нужную позицию. Используйте параметр! 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, чтобы отрегулировать вертикальное положение и переместить фоновое изображение снизу.
Изображение будет выглядеть так:
.
2) Примените overflow: hidden к span, который обертывает 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;
}
Результат в моем случае выглядит следующим образом:
Если вы используете XFBML-реализацию Facebook Like button, вы можете использовать CSS для перестановки меню "всплывающее" относительно его исходного положения рядом с кнопкой Отправить:
В приведенном выше примере, используя jsFiddle и этот CSS:
.fb_edge_comment_widget {
margin-left: -343px;
}
Поскольку содержимое "вылета" находится внутри iframe, вы не сможете применить к нему CSS; значение, перемещение индикатора треугольника в правую сторону "всплывающего окна" невозможно.
Веб-браузеры ужесточили защиту межкадровых сценариев из-за подмены и других хаков, поэтому iframe обрабатываются как отдельные HTML-страницы со своими CSS и JavaScript.
Для любого продвинутого стиля CSS вам нужно будет вставить Facebook-виджет iframe с помощью DOM Scripting... и даже тогда он может не работать в разных браузерах.
Не отличный ответ, но единственный вариант, который я нашел, - это обернуть виджет в абсолютно позиционированном Div, чтобы сохранить его в левой части окна.
Чтобы исправить это, я настоятельно рекомендую разместить виджет Facebook в левой части страницы. Любое другое решение может работать в течение определенного периода времени, но в будущем не удастся. Причина в том, что Facebook часто обновляет свой виджет.