CODEWITHSUNDEEP
cssiframefacebookfacebook-like
EVG
EVG

Reputation: 285

customizing facebook like-box

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.

Upvotes: 17

Views: 38388

Answers (6)

Miral Viroja
Miral Viroja

Reputation: 323

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

Upvotes: 0

Weltkind
Weltkind

Reputation: 687

  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 :)

Upvotes: 21

Brent Baisley
Brent Baisley

Reputation: 12721

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

Upvotes: 2

mdpatrick
mdpatrick

Reputation: 1092

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

Upvotes: 5

Marc
Marc

Reputation: 11

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

Upvotes: 1

tobiasmay
tobiasmay

Reputation: 197

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.

Upvotes: 1

Related Questions