Facebook的喜欢按钮对话框显示的页面

Question

我已经放在一起的“社交滑块”，允许访客“喜欢”和“+”一个页面...此滑块的容器显示在绝对右下角浏览器的角落。除非您单击Like按钮，否则所有效果都很好，弹出的允许评论的对话框就在页面之外。

有没有一种方法我没有看到，允许您配置对话框显示的位置/方式？

<div id="social-container"> 
<div class="fb-like" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div> 
</div> 

而CSS：

#social-container { 
     clear: both; 
     z-index: 999; 
     position: fixed; 
     bottom: 120px; 
     right: 20px; 
    } 

Answer 1

前一段时间，你可以改变的CSS的社交插件的一些事情（通过传递一个CSS文件的URL给社会插件代码），但afaik不再可能，你几乎必须把它们照原样。所以，不，这不可能，那些社交插件是一个封闭的系统。你能做的唯一事情就是设计一切，以便类似的按钮位于左侧。

Answer 2

如果您的布局绝望地需要从右侧触发“您是否喜欢此页”框，您是否可以考虑加宽框并将内容排除？

这应该为此弹出内容的出现创建更多空间。

您还应该确保在页面底部使用CSS添加了足够的空间，以便将其扩展为。它的定位很可能不会在它出现时添加自己的空间。

Answer 3

你不能选择弹出框在哪里出现，因为它是一个iframe，并且你不能控制跨域iframe的css（并且没有这个参数）。

，你唯一可以做的就是限制等等按钮iframe的尺寸，使对话框保持隐藏：

#fb-like iframe { 
    width: 62px !important; height: 24px !important; 
} 

Answer 4

这似乎是显而易见的，检查与任何浏览器的工具，你喜欢的元素，发现弹出容器的名称，相应地添加和调整。

例如：

#social-container.popup { 
    position: absolute; 
    right: 150px; 

Answer 5

所以，这是不可能的，这将解决您的问题，因为你似乎有足够能力知道如何做到这一点，发布到实际对问题进行评估没有真正的代码，我不能找出你正在使用的是哪个Facebook API，但是，你不能仅仅捕获点击事件和iframe的宽度，不管它是什么，只是比较偏移量？喜欢的东西 -

$("#social-container").click(function(e){ 
    var facebookSelector = $(iframe selector here); 
    var iframeHeight = facebookSelector.height(); 
    var iframeWidth = facebookSelector.width(); 
    var winHeight = $(window).height(); 
    var winWidth = $(window).width(); 

    if (e.clientY && e.clientX){ 
    //Set the top based on where mouse click occured 
    if (e.clientY > (winHeight-iframeHeight)){ 
     facebookSelector[0].style.top = winHeight-iframeHeight + "px"; 
    } 
    else { 
     facebookSelector.style.top = e.clientY + "px"; 
    } 
    //Set the left based on where mouse click occured 
    if (e.clientX > (winWidth-iframeWidth)){ 
     facebookSelector[0].style.left = winWidth-iframeWidth + "px"; 
    } 
    else { 
     facebookSelector[0].style.left = e.clientX + "px"; 
    } 
    } 
} 

上面的例子少verbose-

$("#social-container").click(function(e){ 
    var facebookSelector = $(iframe selector here); 
    var h = $(window).height() - facebookSelector.height(); 
    var w = $(window).width() - facebookSelector.width(); 

    if (e.clientY && e.clientX){ 
    //Set the top based on where mouse click occured 
    facebookSelector[0].style.top = (e.clientY > h) ? h + "px" : e.clientY + "px"; 
    //Set the left based on where mouse click occured 
    facebookSelector[0].style.left = (e.clientX > w) ? winWidth-iframeWidth + "px" : e.clientX + "px"; 
    } 
} 

你也可以使用像按钮，而不是点击位置的Facebook的位置（你想也好，真的）。

注意事项和附录：
1。如果您的iframe的id（或任何其他内容）由Facebook动态生成，并且您无法控制它，那么这将不会如此轻松。
2.如果Like按钮位于iframe中，防止事件冒泡到您的容器。
3.此示例目前需要jQuery。
4.您的iframe（或其他）必须是position: absolute或position: fixed

Answer 6

这可能是溢出属性的问题。尝试在＃社会的容器或身体添加此：

overflow: auto; 

或

overflow: visible; 

或

overflow: scroll; 

Answer 7

上述解决方案都没有为我工作。我发现一个快速修复about facebook like button showing outside page，它的工作。

希望它可以节省时间，干杯！