Facebook 发送按钮弹出窗口

Question

我正在研究 FB 发送按钮并在新网站上实现它。问题是 FB 在单击“发送”按钮时显示的弹出窗口位于“发送”按钮下方。任何人都可以让我知道我们如何设置“弹出窗口”(单击发送按钮时出现的对话框)可以自定义显示在发送按钮上方而不是下方。

提前致谢!

Answer 1

我也想将此按钮添加到页面右侧，但在移动 iframe 使其可见时遇到问题，因此决定在对话框窗口中打开发送按钮。 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 放在点击属性的 anchor 标记中，或者最好使用您自己的 Javascript 添加它。