CSS 自定义 Facebook 点赞框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4064038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
customizing facebook like-box
提问by EVG
I would like to customize the design of my facebook like-box. ive already search the net and follow all the instructions, here's the link ive tried but its seems obsolete:
我想自定义我的 facebook 点赞框的设计。我已经在网上搜索并按照所有说明进行操作，这是我尝试过的链接，但它似乎已过时：
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/
there are lots of tutorial in web, but have the same solution.
网上有很多教程，但都有相同的解决方案。
been stuck for almost 2 hours in this. can anyone knows how to customize the like-box?
在这被困了将近 2 个小时。谁能知道如何自定义like-box？
your help is greatly appreciated.
非常感谢您的帮助。
回答by Weltkind
- Get XFBML code from here: http://developers.facebook.com/docs/reference/plugins/like-box/#
- Rename fb:like-box to fb:fan
- Upload your css file on your web-site
- Add this params to fb tag: profile_id="ID OF YOUR PAGE" css="http://example.com/css/your-cutom-style.css?1"
- 从这里获取 XFBML 代码：http: //developers.facebook.com/docs/reference/plugins/like-box/#
- 将 fb:like-box 重命名为 fb:fan
- 在您的网站上上传您的 css 文件
- 将此参数添加到 fb 标签： profile_id="ID OF YOUR PAGE" css="http://example.com/css/your-cutom-style.css?1"
Enjoy :)
享受 ：）
回答by mdpatrick
Weltkind got it right. The trick is that, when you change <fb:like-box>to <fb:fan>you must then include the profile_idattribute as well, or it won't show anything!If you renamed your fan page URL like I have, the original number can be taken from the insights page. I'd upvote Weltkind, but I don't have enough reputation to yet. Doh. :)
Weltkind 做对了。诀窍是，当您更改为时<fb:like-box>，<fb:fan>您还必须包含该profile_id属性，否则它不会显示任何内容！如果您像我一样重命名了您的粉丝页面 URL，则可以从见解页面获取原始编号。我会赞成 Weltkind，但我还没有足够的声誉。多。:)
回答by Brent Baisley
Facebook has a "wizard" that pretty much gives you all the options and styling that is allowed.
Facebook 有一个“向导”，可以为您提供所有允许的选项和样式。
http://developers.facebook.com/docs/reference/plugins/like
http://developers.facebook.com/docs/reference/plugins/like
http://developers.facebook.com/docs/reference/plugins/like-box
http://developers.facebook.com/docs/reference/plugins/like-box
回答by Marc
You can't customize the iframe method. However, you can customize the xfbml method via your own css. See this page: How to Customize your Facebook Fan Box
您无法自定义 iframe 方法。但是，您可以通过自己的 css 自定义 xfbml 方法。请参阅此页面：如何自定义您的 Facebook 粉丝框
回答by tobiasmay
what exactly is your problem? the instructions on the link provided do work pretty good. be sure to update the "?1" parameter of your css file everytime you make changes and upload it.
你的问题究竟是什么？提供的链接上的说明确实很好用。每次进行更改并上传时，请务必更新 css 文件的“?1”参数。
if you have a link i could help you some more.
如果您有链接，我可以为您提供更多帮助。
回答by Miral Viroja
You can customize the facebook like box by using html code. The simplest way, follow this step.
您可以使用 html 代码自定义 facebook like box。最简单的方法，按照这个步骤。
<div id="facebooklikebox-3" class="widget widget_FacebookLikeBox"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/607728429342897" width="290" show_faces="true" border_color="AAAAAA" stream="false" header="true" class=" fb_iframe_widget" fb-xfbml-state="rendered" ><span style="vertical-align: bottom; width: 290px; height: 400px;"><iframe name="f25883e0a8" width="290px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="yes" title="fb:like_box Facebook Social Plugin" style="border: none; visibility: visible; height: 400px;" class=""></iframe></span></fb:like-box></div>
<div id="facebooklikebox-3" class="widget widget_FacebookLikeBox"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/607728429342897" width="290" show_faces="true" border_color="AAAAAA" stream="false" header="true" class=" fb_iframe_widget" fb-xfbml-state="rendered" ><span style="vertical-align: bottom; width: 290px; height: 400px;"><iframe name="f25883e0a8" width="290px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="yes" title="fb:like_box Facebook Social Plugin" style="border: none; visibility: visible; height: 400px;" class=""></iframe></span></fb:like-box></div>
Put this code in your html code and replace iframe's url to your facebook page url.
将此代码放入您的 html 代码中，并将 iframe 的 url 替换为您的 facebook 页面 url。
You can get reference here
你可以在这里得到参考
