5

我已经将一个“社交滑块”放在一起，允许访问者“喜欢”和“+”一个页面......这个滑块的容器显示在浏览器的绝对右下角。一切都很好，除了当您单击“赞”按钮时，弹出的允许评论的对话框不在页面之外。

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

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

在此处输入图像描述

4

7 回答 7

2

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

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

#fb-like iframe {
    width: 62px !important; height: 24px !important;
}
于 2012-11-13T17:10:25.340 回答
2

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

overflow: auto;

或者

overflow: visible;

或者

overflow: scroll;
于 2012-11-16T16:21:58.957 回答
1

So, it's unlikely this will solve your problem, since you seem competent enough to know how to do this, posted no real code to actually asses the problem, and I can't figure out exactly which facebook API you're using, BUT-

Can't you just capture the click event and the width of the iframe or whatever it is and just compare the offsets? Something like -

$("#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";
    }
  }
}

The above example less 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";
  }
}

You could also use the position of the facebook like button instead of the click location (or whatever you want, really).

Caveats and Addendums:
1. This won't work so easily if the id of your iframe (or whatever) is being dynamically generated by facebook and you have no control over it
2. This won't work so easily if the Like button is in the iframe and prevents event bubbling up to your container.
3. This example currently requires jQuery.
4. Your iframe (or whatever) must be position: absolute or position: fixed

于 2012-11-15T15:31:03.703 回答
1

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

前任：

#social-container.popup {
  position: absolute;
  right: 150px;
于 2012-11-13T21:20:13.380 回答
1

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

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

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

于 2012-11-12T16:45:51.923 回答
0

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

于 2012-11-09T17:27:50.860 回答
0

以上解决方案都不适合我。我找到了一个关于 facebook 的快速修复，比如显示在页面外的按钮，它起作用了。

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

于 2014-07-26T08:51:49.160 回答