Facebook Like Button 对话框显示页面答案

【问题标题】：Facebook Like Button dialog showing off the pageFacebook Like Button 对话框显示页面
【发布时间】：2015-07-16 02:10:08
【问题描述】：

我制作了一个“社交滑块”，允许访问者“点赞”和“+”页面...此滑块的容器显示在浏览器的绝对右下角。一切正常，除了当您单击“赞”按钮时，弹出的允许评论的对话框不在页面之外。

有没有一种我看不到的方法可以让您配置该对话框的显示位置/方式？

<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;
    }

【问题讨论】：

您真的希望在没有任何代码的情况下获得帮助吗？
css 中的 Z 索引。需要您的代码。是在 facebook 中托管还是代码？
贴一个显示问题的网址，我会尽力为您提供可行的解决方案。
@dcolumbus：我们要求代码的原因是您所描述的内容来自您的站点范围的 CSS（它创建了被溢出的边界框）和实现之间的相互作用你的容器（它提供了强制溢出的定位）。如果我们可以看到一个完整的示例页面，我们可以为您提供一个 CSS 覆盖，可以重新定位 FB 弹出窗口或其他东西 - 但如果没有这些，我们将在黑暗中拍摄导致问题开始的 CSS与。
弹出的评论框看起来像是由 js 注入的，而不是 iframe 的一部分，如果是这种情况，那么您可能可以覆盖 css 以将其与气球箭头一起重新定位...但是是非常非常肮脏的工作:) 你知道你可以为同样的目的编写你自己的应用程序

标签： html css facebook iframe

【解决方案1】：

您无法选择弹出框的显示位置，因为它是 iframe，并且您无法控制跨域 iframe 的 css（并且没有此参数）。

你唯一能做的就是限制like按钮iframe的大小，让对话框保持隐藏：

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

【讨论】：

【解决方案2】：

可能是overflow属性的问题。尝试在#social-container 或正文中添加：

overflow: auto;

或

overflow: visible;

或

overflow: scroll;

【讨论】：

【解决方案3】：

如果您的布局迫切需要从右侧触发“您喜欢此页面”框，您是否可以考虑扩大框并将内容范围扩大到左侧？

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

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

【讨论】：

【解决方案4】：

这似乎很明显，使用您喜欢的任何浏览器工具检查元素，找到弹出容器的名称，添加并相应调整。

例如：

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

【讨论】：

【解决方案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";
    }
  }
}

上面的例子不那么冗长-

$("#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 like 按钮的位置，而不是点击位置（或任何您想要的，真的）。

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

【讨论】：

【解决方案6】：

前段时间，您可以使用 css 更改社交插件的某些内容（通过将 css 文件的 url 传递给社交插件代码），但是现在不可能了，您几乎必须将它们视为他们是。所以，不，这是不可能的，那些社交插件是一个封闭的系统。你唯一能做的就是设计所有的东西，让点赞按钮在左边的某个地方。

【讨论】：

【解决方案7】：

以上解决方案都不适合我。我找到了一个快速修复 about facebook like button showing outside page 并且成功了。

希望它可以节省其他人的时间，干杯！

【讨论】：