customizing facebook like-box

Question

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:

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?

your help is greatly appreciated.

Etom

Same problem here. I can't figure out how to add my custom stylesheet into new <fb:like-box>. Tutorial is out-of-date. – Monocyclic

Answer 1

1. Get XFBML code from here: http://developers.facebook.com/docs/reference/plugins/like-box/#
2. Rename fb:like-box to fb:fan
3. Upload your css file on your web-site
4. Add this params to fb tag: profile_id="ID OF YOUR PAGE" css="http://example.com/css/your-cutom-style.css?1"

Enjoy :)

Kinchinjunga

note that you need to include the profile_id attribute, as metioned by mdpatrick – Onlybegotten

why do i need to rename the like-box to fan? whats the difference? – Aitken

Answer 2

Weltkind got it right. The trick is that, when you change <fb:like-box> to <fb:fan> you must then include the profile_id attribute 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. :)

Kelso

Answer 3

Facebook has a "wizard" that pretty much gives you all the options and styling that is allowed.

http://developers.facebook.com/docs/reference/plugins/like

http://developers.facebook.com/docs/reference/plugins/like-box

Languor

I provided a link for both the like button (first link) and like-box (second link). – Languor

yeah... you cant edit the design there... its their default design.. what i want is i want to change the color, omit the border, change the location of the like button, etc... – Etom

The Like Box is an iframe, so there isn't much you can do with it. Changing the Like Button is against their terms of service. "While you may scale the size to suit your needs, you may not modify the Like Button in any other way (such as by changing the design)." – Languor

ic.. but, there are site that their facebook likebox are customize.. hmmm – Etom

-1 This wizard pretty much donesn't allow you to style anything except width. – Monocyclic

@PetrPeller, your down-vote was not justified. This is the correct answer... you can not style the FB Like Box beyond what the FB wizard allows. – Telpher

@Sparky672 See the Weltkind's answer – Monocyclic

@PetrPeller, As per Weltkind, that's no longer a Like Box, it's a Fan Box. Besides, the FB TOS seems pretty clear about all this. – Telpher

@Sparky672 Fan Box is just an older name for the same thing (in the older API). The question is how long will FB support it. – Monocyclic

@PetrPeller, not for much longer is my guess. And I know they don't want you altering their branding which is why the new API does not allow this. – Telpher

Answer 4

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.

if you have a link i could help you some more.

Masonite

ive done that in my code, its just that when i change the fb:like-box to fb:fan, the fb like-box disappears. that is why i thinking that tutorial is already obsolete. the fact that the code given to him by the facebook is not the same that was generated in the facebook like-box page. – Etom

Answer 5

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

Cowl

Answer 6

You can customize the facebook like box by using html code. The simplest way, follow this step.

<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.

You can get reference here

Faceoff