Facebook кнопка отправки

Question

Я работаю над кнопкой FB Send и внедряю ее на новом сайте.Проблема в том, что FB, отображаемый при нажатии кнопки «Отправить», находится ниже кнопки «Отправить».Может кто-нибудь дать мне знать, как мы можем настроить «всплывающее окно» (диалоговое окно, которое появляется при нажатии кнопки «Отправить»), которое можно настроить так, чтобы оно отображалось над кнопкой отправки, а не под ней.*

Answer 1

Я тоже хотел добавить эту кнопку справа от страницы, возникли проблемы с перемещением фрейма так, чтобы он был виден, поэтому вместо этого решил открыть кнопку отправки в диалоговом окне.http://developers.facebook.com/blog/post/514/

Для этого вам потребуется использовать JS SDK, а также предоставить кнопку или ссылку, которые откроют диалоговое окно отправки.Вот пример кода, который делает ссылку похожей на кнопку отправки

HTML

<a class="fb-send-button"><i></i><span>Send</span></a>

CSS

.fb-send-button {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  color: #3b5998;
  -moz-outline-style: none;
  text-decoration: none;
  background: #eceef5;
  border: 1px solid #cad4e7;
  display: inline-block;
  padding: 4px 5px;
  white-space: nowrap;
  padding: 2px 5px;
  font-family: 'trebuchet ms', sans-serif;
  font-size: 11px;
}
.fb-send-button:hover {
  border-color: #9dacce;
  text-decoration: none;
  color: #3b5998;
}
.fb-send-button span {
  line-height: 14px;
  line-height: 13px;
}
.fb-send-button i, .fb-send-button img {
  float: left;
  height: 14px;
  margin-right: 3px;
  width: 14px;
}
.fb-send-button i {
  background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/z7/r/ql9vukDCc4R.png);
  background-position: -1px -47px;
}

Javascript

FB.ui({
    method: 'send',
    name: 'Facebook Dialogs',
    link: 'https://developers.facebook.com/docs/reference/dialogs/'
});

Вам потребуется уже загрузить Javascript SDK на вашу страницу, и вам нужно будет либо поместить вышеуказанный JS в тег привязки в атрибуте on clickили, желательно, добавив его, используя свой собственный Javascript.

Answer 2

Лучшее решение, которое я пробовал до сих пор, это:

.fb_edge_widget_with_comment span.fb_edge_comment_widget {
   left: -45px !important;
}

Это временное решение перемещает всплывающее окно в несколько центрированную позицию под кнопкой Отправить, что делает его доступным на мобильном телефоне.

Вот как это выглядит на iPhone (обратите внимание, что он все еще слишком широк для мобильных устройств):
http://s16.postimage.org/3xeep2uo5/foto_1.png

Та же страница, что и в браузере ПК:
http://s16.postimage.org/nukby1dj9/xotc_browser.png

Обратите внимание, что маленькая стрелка в верхней части всплывающего окна теперь больше не выравнивается по кнопке «Отправить» (из-за моей CSS). Обратите внимание, как он меняет положение на левую или правую сторону всплывающего окна, в зависимости от того, где оно просматривается (браузер мобильного или ПК).

(я тоже пробовал на Lumina 920, но выдал ту же проблему, что и на iPhone)

Answer 3

У меня была такая же проблема, и я использовал следующее для ее решения:

.fb_edge_widget_with_comment span.fb_edge_comment_widget {
    left: -290px !important;
}

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

Answer 4

Этот плагин Facebook не позволяет вам указывать пользовательский файл CSS, как это делают некоторые старые, поэтому будет довольно сложно изменить внешний вид, не мешая стилю / размеру iFrame. Ваши изменения CSS не будут применяться к контенту iframe, который Facebook отображает, потому что он размещен на другом сайте, поэтому будут применяться ограничения между доменами.