Facebook Like Button对话框显示页面

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

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

你唯一可以做的是限制if按钮iframe的大小，以便对话框保持隐藏状态：

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

Answer 2

溢出属性可能存在问题。尝试在#social-container或body中添加它：

overflow: auto;

或

overflow: visible;

或

overflow: scroll;

Answer 3

如果您的布局迫切需要从右侧触发“您喜欢此页面”框，您是否可以考虑加宽框并调整剩余内容？

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

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

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

上面的例子更简洁 -

$("#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中，并且阻止事件冒泡到您的容器，这将不会那么容易 这个例子目前需要jQuery 4.您的iframe（或其他）必须是position: absolute或position: fixed

Answer 6

前一段时间，您可以使用css更改社交插件的一些内容（通过将css文件的url传递给社交插件代码），但是afaik已经不可能了，你几乎不得不把它们视为他们是。所以，不，这是不可能的，那些社交插件是一个封闭的系统。你唯一能做的就是设计所有东西，以便类似的按钮位于左侧的某个位置。

Answer 7

上述解决方案均不适合我。我找到了一个快速解决方法about facebook like button showing outside page并且它有效。

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