我正在致力于FB发送按钮并在新网站上实现它。问题在于点击发送按钮时FB显示的弹出窗口位于发送按钮下方。任何人都可以让我知道我们如何设置“弹出”(点击发送按钮时出现的对话框)可以自定义显示在发送按钮上方而不是下方。Facebook发送按钮弹出窗口
在此先感谢!
我正在致力于FB发送按钮并在新网站上实现它。问题在于点击发送按钮时FB显示的弹出窗口位于发送按钮下方。任何人都可以让我知道我们如何设置“弹出”(点击发送按钮时出现的对话框)可以自定义显示在发送按钮上方而不是下方。Facebook发送按钮弹出窗口
在此先感谢!
这个Facebook插件不允许你指定一个自定义的css文件,像一些较旧的css文件这样做,除了搞乱iFrame样式/大小之外,改变外观将非常困难。您的CSS更改将不适用于Facebook呈现的iframe内容,因为它位于不同的站点上,因此将会应用跨域限制。
感谢您的信息! – 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添加它。
我有同样的问题,用下面的来解决这个问题:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -290px !important;
}
尝试用左,上,右,下值,只要你想将它放置玩。
这也将重新定位按钮,而不仅仅是点击发送按钮时出现的弹出框。所有东西都放在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
同一页:
http://s16.postimage.org/nukby1dj9/xotc_browser.png
注意的弹出窗口顶部的小箭头现在不再与发送按钮对齐(由于我的CSS)。注意它是如何将位置切换到弹出窗口的左侧或右侧,具体取决于它被查看的位置(移动或PC浏览器)。
(我试过在鲁米娜920为好,但作出了同样的问题,因为iPhone)
谁能帮我解决这个问题? – techguy 2011-06-15 05:56:25