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放在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

在PC浏览器中查看相同页面：
http://s16.postimage.org/nukby1dj9/xotc_browser.png

请注意，弹出窗口顶部的小箭头现在不再与“发送”按钮对齐（由于我的css）。请注意它如何将位置切换到弹出窗口的左侧或右侧，具体取决于查看位置（移动或PC浏览器）。

（我也在Lumina 920上尝试过，但问题与iPhone相同）

Answer 3

这个Facebook插件不允许你指定一个自定义的css文件，就像一些较旧的那样，除了弄乱iFrame样式/大小之外，改变外观将非常困难。您的css更改将不适用于Facebook呈现的iframe内容，因为它托管在其他网站上，因此将应用跨域限制。

Answer 4

我遇到了同样的问题并使用以下方法解决了这个问题：

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

尝试使用您想要放置的左，上，右，下值。

Facebook发送按钮弹出窗口

4 个答案: