Facebook点赞框外部CSS

Question

我需要自定义“点赞”框的布局，但我在以下 iframe 中找不到任何可行的方法：

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%platform&width=700&connections=5&stream=false&header=false&height=180&css=http%3A%2F%2Flocalhost%2Fq.css" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:700px; height:180px;" allowTransparency="true"></iframe>

之前的 Facebook 点赞框有加载外部 CSS 的选项，我尝试了一下，但它没有与上述 iframe 选项一起上传。

我应该在哪里找到解决方案？

请帮助我将外部 CSS 设置到这个点赞框中。

谢谢， Rohit

- Rohit Desai

Answer 1

您仍然可以使用css选项，但是您需要使用不同的iframe URL：

http://www.connect.facebook.com/widgets/fan.php?href=FACEBOOKPAGEURL&width=185&colorscheme=light&show_faces=true&border_color&stream=false&header=true&height=280&css=CSSFILE

编辑于2013年3月14日

这个解决方法已不再适用。

- Ben Bos

---

注意：所有属性都相同，所以海报是正确的，将 http://www.facebook.com/plugins/likebox.php 替换为 http://www.connect.facebook.com/widgets/fan.php 就可以正常工作。 - Ciantic

是的，它使用旧的fanbox。您指定的CSSFILE应该是一个公开可访问的URL。然后Facebook会将一个<link>注入到iframe的html源代码中，指向该CSS样式表。根据我的经验，这不是一个直接的链接，而是一个链接到http://...fbcdn.net/fbml_static_get.php?...的PHP应用程序，该应用程序检索您的公开可访问的CSS，然后进行处理和缓存。但是FB表示，所有FBML端点都将在2012年6月1日之前停止运行。https://developers.facebook.com/roadmap/。因此，可能这种方法只能再工作几个月。 - Cheeso

Answer 2

我尝试将一个Likebox链接到本地css文件，但没有成功。在Facebook论坛上研究这个问题时，我读到管理员的帖子说，Facebook希望在Likebox之间保持一致的格式，因此只能调整少量属性，而且那些属性都是初始Likebox代码中标准的。Facebook的文档还有很多需要改进的地方。

- JimB

Answer 3

我也尝试过为Like Box添加样式，但新的插件不支持iframe中的“css=”选项。

我仍在使用旧版Like Box插件，但CSS已被缓存，无法更新。

http://www.facebook.com/connect/connect.php?id=60159065762&connections=0&stream=0&css=http%3A%2F%2Fdescargas.mundijuegos.com%2Fcss%2Ffb2.css%3F12

我所知道的唯一使用自己的CSS的方法是使用脚本格式和"fb:fan"插件。

更新

如果您使用“fb:fan”插件，它会生成一个iframe。 您可以复制此URL并直接使用它（http://www.facebook.com/plugins/fan.php?....）。

- DanielBlazquez

---

绕过缓存很容易。您需要在每次加载页面时指定不同的CSS URL。一种方法是从PHP程序中回显CSS。对于要提供给Facebook的CSS URL，请将URL传递给PHP程序，附带一个虚拟查询参数和一个随机生成的值。 http:.//example.com/generateCss.php?_=309339。由于这是每次唯一的URL，FB不会缓存CSS。但是，这种方法可能会停止工作，因为它依赖于FB端的FBML程序，并且FBML将于2012年6月1日关闭。 - Cheeso

Answer 4

Facebook不再支持CSS。所有使用CSS的Facebook设计技巧将不再起作用。然而，Facebook现在允许通过show_border=false参数呈现无边框的likebox插件。 但是，如果您想为您的like box添加一些颜色渐变以匹配您博客的丰富多彩的主题，您可以使用SVG。阅读本指南 - http://www.howtokickblogger.com/2013/08/style-facebook-like-box-with-svg.html

- Sara Farooqui