Facebook发送按钮弹出窗口

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

在此先感谢！

来源

2011-06-14 techguy

谁能帮我解决这个问题？ – techguy 2011-06-15 05:56:25

这个Facebook插件不允许你指定一个自定义的css文件，像一些较旧的css文件这样做，除了搞乱iFrame样式/大小之外，改变外观将非常困难。您的CSS更改将不适用于Facebook呈现的iframe内容，因为它位于不同的站点上，因此将会应用跨域限制。

来源

2011-06-18 18:19:22 bkaid

感谢您的信息！ – techguy 2011-06-20 05:37:20

我也想将此按钮添加到页面的右侧，在移动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放置在点击属性中的锚点标记中，或者最好使用您自己的Javascript添加它。

来源

2011-06-22 19:05:03

谢谢Thomas..will试一试，现在让你 – techguy 2011-06-23 05:37:32

不工作：/ .... – vini 2012-02-17 13:55:27

我有同样的问题，用下面的来解决这个问题：

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

尝试用左，上，右，下值，只要你想将它放置玩。

来源

2011-11-25 02:32:22 Gab

这也将重新定位按钮，而不仅仅是点击发送按钮时出现的弹出框。所有东西都放在iframe本身，所以操纵iframe会导致操纵我认为不符合操作要求的所有内容。 – 2011-12-09 06:54:46

到目前为止，我已经试过最好的解决办法是这样的：

.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浏览器）。

（我试过在鲁米娜920为好，但作出了同样的问题，因为iPhone）

来源

2012-12-14 14:56:29

Facebook发送按钮弹出窗口

回答

相关问题