当前位置：文江博客话题详情

如何修复 Facebook 点赞框中的缩进？

发布于 2024-12-06 11:13:21 字数 2280 浏览 0 评论 0原文

我可以去 Facebook 获取“点赞框”的代码。非常方便。

问题是，这个盒子的显示很差劲。这并不一致。 “流”中的第一篇文章以这种缩进显示：

在此处输入图像描述

流中的下一篇文章以不同的（蹩脚的）缩进显示。

在此处输入图像描述

这是在同一个赞框中，我只是向下滚动。

效果不限于“Facebook平台”的流。我也在其他直播的 Likebox 中看到过它。

我想设置框的样式，尝试使缩进一致，但它似乎呈现为 iframe，这（我认为）意味着我无法设置它的样式，因为 SOP

我该如何解决这个问题？

是否有解决方法可以在最终不是 iframe 的 div 中显示 Likebox？

编辑：错误记录：http://developers.facebook.com/bugs/ 237053466346453

编辑：我比较了 fb:fan 控件和 Likebox 控件。通过 fb:fan ，可以提供自定义 CSS 来设置内容样式。（有一些警告。）我设置文本的宽度和边距，并删除 actorName，这对于每个帖子都是相同的。这是结果：

在此处输入图像描述

左侧是使用以下代码生成的：

  <fb:fan profile_id='19292868552' width='292' 
          connections='0' show_faces='false' stream='true' header='false'
          css='http://example.org/fb/customfanbox.css?_=6392'></fb:fan>

右侧是使用以下代码生成的：

  <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=true&amp;header=false&amp;height=525"
          scrolling="no"
          frameborder="0"
          style="border:none; overflow:hidden; width:292px; height:525px;"
          allowTransparency="true">

对于左侧，如果您不需要 fb:fan 元素，您可以使用指向 fan.php 的 iframe，如下所示：

  <iframe src='http://www.facebook.com/plugins/fan.php?connections=0&css=http%3A%2F%2Fexample.org%2Ffb%2Ffb%2Fcustomfanbox.css%3F_%3D0292&id=19292868552&locale=en_US&sdk=joey&stream=true&width=292&height=560'
          scrolling="no"
          frameborder="0"
          style="border-bottom:1px grey solid; overflow:hidden; width:292px; height:525px;"
          allowTransparency="true">

原文

I can go to facebook and get the code for a "like box". Very handy.

Problem is, the display of this box is lame. it's not consistent. The first article in the 'stream' is displayed with this sort of indentation:

enter image description here

The next article in the stream is displayed with different (lame) indentation.

enter image description here

This is in the same likebox, I merely scrolled down.

The effect is not limited to the stream for "Facebook Platform". I've seen it in the Likebox for other streams as well.

I'd like to style the box, to try to make the indentation consistent, but it appears to be rendered as an iframe, which (I think) means I cannot style it because of the S.O.P.

How can I fix this?

Is there a workaround to display a likebox in a div that is not, eventually, an iframe?

EDIT: bug logged: http://developers.facebook.com/bugs/237053466346453

EDIT: I compared the fb:fan control and the likebox control. With the fb:fan thing, it is possible to provide custom CSS to style the contents. (There are some caveats.) I set the width and margins of the text, and also erased the actorName, which is the same for every post. This is the result:

enter image description here

The left side is produced with this code:

  <fb:fan profile_id='19292868552' width='292' 
          connections='0' show_faces='false' stream='true' header='false'
          css='http://example.org/fb/customfanbox.css?_=6392'></fb:fan>

The right side is produced with this:

  <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=false&border_color&stream=true&header=false&height=525"
          scrolling="no"
          frameborder="0"
          style="border:none; overflow:hidden; width:292px; height:525px;"
          allowTransparency="true">

For the left-hand-side, if you don't want the fb:fan element, you can use an iframe that points to fan.php, like this:

  <iframe src='http://www.facebook.com/plugins/fan.php?connections=0&css=http%3A%2F%2Fexample.org%2Ffb%2Ffb%2Fcustomfanbox.css%3F_%3D0292&id=19292868552&locale=en_US&sdk=joey&stream=true&width=292&height=560'
          scrolling="no"
          frameborder="0"
          style="border-bottom:1px grey solid; overflow:hidden; width:292px; height:525px;"
          allowTransparency="true">

分享到QQ

分享到微博