Comments on: How to Customize your Facebook Fan Box

By: daddydesign

daddydesign — Tue, 27 Dec 2011 01:31:40 +0000

we are looking into a new way on doing it.. keep checking back

By: Igor

Igor — Wed, 21 Dec 2011 23:34:18 +0000

Works fine for now but I read on facebook that they will not support old API from january

By: Belut

Belut — Wed, 30 Nov 2011 08:59:53 +0000

ofc i will put your credit, my post about this tutorial still on draft.

By: daddydesign

daddydesign — Tue, 29 Nov 2011 17:55:35 +0000

No credit link for us?

By: Belut

Belut — Tue, 29 Nov 2011 13:05:28 +0000

it works for blogger too, i did it on my blogger site trikmurahan.blogspot.com

By: pointbreak

pointbreak — Sat, 26 Nov 2011 19:31:49 +0000

How it’s Work for blogger ?

By: Worke

Worke — Wed, 16 Nov 2011 05:39:28 +0000

HA! GOT IT! Just added on the beginning:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, cite,
del, dfn, font, img, ins, kbd, q, s, samp, strike, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, .reset
{
color:#FFFFFF;
}
.fan_box a{
color:#FFFFFF;
}
.fan_box a:hover{
text-decoration:none;
color:#B1B594;

Thanks again for everything!

Cheers!

By: Worke

Worke — Wed, 16 Nov 2011 05:00:20 +0000

Just to clarify I was referring to the stream, since I’ve posted some youtube videos And text for status update is black and I would like that to be white, since my background is almost black. So it would be nice to know the code for that, changing the colour in the stream.

Thanks once again!

By: Worke

Worke — Wed, 16 Nov 2011 04:29:58 +0000

This is really wonderful!!! Thanks for sharing this knowledge! I was wondering if there is a way to change the colours of the text inside the Facebook Fun Box? For example this blue one as the title, or the grey one as a text on youtube.

Thanks for your answer in advance!

Worke

By: Mashable Inspired Sidebar Social Widget | Wptuts+

Mashable Inspired Sidebar Social Widget | Wptuts+ — Sat, 12 Nov 2011 21:12:52 +0000

[...] Facebook page code source: Daddy Design [...]

By: daddydesign

daddydesign — Sat, 29 Oct 2011 00:03:52 +0000

HI.. We are creating a new tutorial very soon that will have the IE fix in it.. Please keep checking in

By: Belut

Belut — Fri, 28 Oct 2011 23:36:38 +0000

hi, thanks for the css code. it works perfect on firefox, lil messed on chrome, wont show on IE. do you know how to fix it?

my blogger widget code:

By: Stefan

Stefan — Fri, 28 Oct 2011 08:02:03 +0000

Great post, but I am still stuck into changing the default language. Any idea how to translate the messages in the like box?
Thanks! Stefan

By: daddydesign

daddydesign — Wed, 05 Oct 2011 23:38:15 +0000

we are actually in the works of trying to figure this out. We will keep you updated.

By: Kyle

Kyle — Wed, 05 Oct 2011 20:19:23 +0000

Great tutorial. – This worked really well for us a few weeks ago.

Now my challenge to is custom style the FB Like Button but I suspect it is not possible/ against FB Agreement.

Longshot : Do you know how this can be done?

By: How I Designed the new Ajaxxx.com (Part 2 of 3) | Ajaxxx

How I Designed the new Ajaxxx.com (Part 2 of 3) | Ajaxxx — Thu, 29 Sep 2011 03:54:37 +0000

[...] already have it and you’re a web designer, GET IT.The other resource I used was this site: How to Customize Your Facebook Fan Box. This helped me a great deal with how exactly to update the Facebook Like Box itself. Remember, use [...]

By: Joe

Joe — Wed, 28 Sep 2011 18:04:11 +0000

I couldn’t get the fb:fan box to show up in Safari 5 no matter how I looked at it so I ended up looking into the newer iframe solution and found you could still style it with css as per this tutorial. After linking your css you still have to iterate with the ?# but it works and shows up in all my browsers. Hope this helps someone.

By: Weekly Design News – Resources, Tutorials and Freebies (N.72)

Weekly Design News – Resources, Tutorials and Freebies (N.72) — Tue, 27 Sep 2011 08:24:17 +0000

[...] Converting jQuery Code to a Plugin →3D Wall Gallery Tutorial 3D Wall Gallery Tutorial →How to Customize your Facebook Fan Box How to Customize your Facebook Fan Box →MockupBuilder.com MockupBuilder.com →icotrip – [...]

By: Mike

Mike — Thu, 22 Sep 2011 03:10:20 +0000

I stumbled upon your post trying to find a way to remove the logo beside each item in the stream. It is a strange design as it takes up so much space it doesn’t look good if you have a narrow sidebar.

All we want is the stream itself with nothing else (minus the logo of course). I thought there would at least be an rss feed for the stream that we could work with rather than having to mess around with fbml.

Is this the only way it can be done and is it possible to remove the logo? I did remove the float styling from the image and it kinda worked. Looked pretty messy though.

Thanks for your time.

By: Herton

Herton — Wed, 14 Sep 2011 22:07:31 +0000

Great tip, I used it and worked great… The only down part was the fact that I couldn’t update the style sheet so I had to create another one and replace, maybe is a facebook thing… Thank you.

By: Aunt Clara

Aunt Clara — Sun, 11 Sep 2011 22:53:40 +0000

Thanks a lot for the very clear explanation. It was what I had been looking for weeks. Perhaps you can help me with a small issue. I made the widget 160 wide to fit in my right column, however since I can only fit 4 pictures they are now off center (aligned to the right). Is there any way to center them. I tried and just couldn’t.

I will appreciate the help.

By: Qooban

Qooban — Sun, 17 Jul 2011 12:29:29 +0000

According to daithi’s post – there is probably problem with linked CSS file, when you are not logged in to Facebook. It is not working properly then – not all styling is performed. Have you got any clues how to fix it?

By: don

don — Fri, 17 Jun 2011 11:31:13 +0000

i m goning to try

By: Colin

Colin — Mon, 13 Jun 2011 04:22:32 +0000

Just a reply or edit to my not above which might help someone else in the future…

You can use custom background images!!! I didn’t realize the issue was that I was trying to load the image through a relative path ie. url(../img/bg_connect_top.png). So, I changed it to an absolute path url(“http://mywebsite.com/img/bg_connect_top.png”) and it works!!!

Stoked.

By: Colin

Colin — Mon, 13 Jun 2011 04:10:50 +0000

Thanks for this tutorial!

Everything is working fine except for one issue that I’m not sure can be fixed. I am trying to add background images to both the “.fan_box .connect_top” and “.fan_box .page_stream” areas. I’ve added declarations for each part of the background parameter (color, repeat, position, etc.) as well as the !important. When uploading it to the server, everything overrides properly EXCEPT the actual image URL. Instead of my image showing up, I get “url(“http://static.ak.fbcdn.net/rsrc.php/v1/y4/r/-PAXP-deijE.gif”) !important” which is obviously not my image.

Is there any way to possibly bypass this issue? Also, CSS3 gradients will not work either. Any help much appreciated.

Thanks again for the writeup!

By: Markus

Markus — Thu, 19 May 2011 13:17:40 +0000

Hi,

hast anyone already found a fix or some kind of workaround for IE9 ?

Thank you for some feedback!

Constantin

By: Bd

Bd — Sat, 30 Apr 2011 07:08:35 +0000

Thanks! I will helpful to me.

By: daddydesign

daddydesign — Fri, 22 Apr 2011 01:03:55 +0000

yes you do.

By: Robin

Robin — Thu, 21 Apr 2011 15:10:23 +0000

Do you have to use an absolute url for the css?

By: daddydesign

daddydesign — Sat, 16 Apr 2011 02:12:15 +0000

Haven’t had the 1st issue, but yes we dont have a fix for IE9 yet. If anyone does, please share here.

By: Ilana

Ilana — Fri, 15 Apr 2011 00:26:11 +0000

Hey there! This is an excellent trick!! I am having an issue in IE8 that when the page is finished loading all the faces disappear. And in IE9 nothing shows up at all.

Have you run into this issue at all, or have found something that conflicts with this implementation?

Thank You!

By: Den

Den — Wed, 13 Apr 2011 18:58:07 +0000

Worked great…used it on my side project WP blog…thanks for the tips…

By: daddydesign

daddydesign — Sun, 10 Apr 2011 17:42:53 +0000

you can see it working on our sidebar to the right.

By: Ju

Ju — Sun, 10 Apr 2011 13:00:54 +0000

Do these instructions still work? I read somewhere that facebook no longer allows such customisation of the like box. Can anyone please give some example URLS for customised like boxes?

By: Dom

Dom — Thu, 07 Apr 2011 21:49:30 +0000

Thanks so much for the tutorial. That worked brilliant!! Just one thing: I wanted to change the color of the text saying ‘x people like my page’ and for that I edited span.total {} but for some reason it won’t change the color from orange to green. The hex code is correct.

Any idea why that is?

Thanks,
Dom

By: 60 Excellent Web Development Tutorials

60 Excellent Web Development Tutorials — Sat, 02 Apr 2011 04:37:27 +0000

[...] 19. Customizing the Facebook Fan Box Widget with CSS [...]

By: Happy

Happy — Thu, 31 Mar 2011 20:43:13 +0000

YOU ARE LORD! thanks

By: stuff

stuff — Fri, 25 Mar 2011 15:42:03 +0000

great stuff. thanks for sharing.

By: daddydesign

daddydesign — Tue, 22 Mar 2011 01:27:08 +0000

I’m sure there is but we don’t have much knowledge with blogger, anyone?

By: daddydesign

daddydesign — Tue, 22 Mar 2011 01:26:02 +0000

Hi Edvin, we will have to look into this. Thank you for bringing it to our attention. If anyone knows a fix, please reply here.

By: Edvin

Edvin — Mon, 21 Mar 2011 21:13:40 +0000

There is an issue with IE9 with this custom facebook like box, is not being displayed. I have tried opening your website as well in Internet Explorer 9, but the Facebook Fan Box of yours as well is not being displayed.

Any solution?

Thanks

By: Heather

Heather — Sun, 20 Mar 2011 01:32:04 +0000

Is there a way for you to have this work in blogger? The css won’t seem to connect. Thanks!

By: Weekly Inspiration of Designs and Developments #2 | Digital Pizza

Weekly Inspiration of Designs and Developments #2 | Digital Pizza — Fri, 04 Mar 2011 01:34:31 +0000

[...] How to Customize your Facebook Fan Box [...]

By: Christel

Christel — Thu, 03 Mar 2011 16:41:44 +0000

No problem here except for my ‘unlike’ text color that remains blue.

By: Stephanie

Stephanie — Wed, 02 Mar 2011 19:02:20 +0000

Uh! Looks like this is no longer working. All the instances I’ve used it in suddenly show a blank box. Anyone else seeing this?

By: Christel

Christel — Thu, 24 Feb 2011 22:32:35 +0000

Great Tutorial. Thank you soo much. Those Facebook like boxes are so ugly I was doubting about removing it totally when I found your tutorial. Now it is nice and fully integrated.

The only small issue I have is the ‘Like’ or ‘unlike’ link staying fb blue instead of #71A39F despite my span.total code:

span.total{
color: #71A39F;
font-weight: bold;
}

Any idea what I am missing ?

By: woody

woody — Tue, 22 Feb 2011 12:28:15 +0000

Thanks heaps, daddydesign! The old code still works and I’ve got the style I wanted (just wanted to change the FB’s default font). Cheers!

By: Nina

Nina — Fri, 18 Feb 2011 20:27:36 +0000

hey friend,
I need a little help on how to do it for blogger, at least on how to change color of box in transparent or the color of my blog theme?
thanks, will come back for reply

By: Weekly Digest for February 17th | BiscuitJam Blog

Weekly Digest for February 17th | BiscuitJam Blog — Thu, 17 Feb 2011 03:02:04 +0000

[...] Shared How to Customize your Facebook Fan Box | Daddy Design. [...]

By: Sam

Sam — Wed, 16 Feb 2011 13:14:50 +0000

Used to work 100% now without any changes on this end, its not working in Chrome IE or Safari. Only FF.