This post is about Customizing Facebook Fanbox Widget for wordpress ,if you don’t know what is facebook fanbox is please first read-Fan Box : Facebook pages widget for your blog
If you are blogging and have placed a facebook fanbox widget on your blog ,and want to change the way that box looks ,then read on.
May be you can tweak its colors or may be change the background color of your facebook fanbox.
Here have a look at what i have done with my fanbox.
It’s not so good-looking but a lot can be done with it.
I know that I have not designed it properly,but then I am not a designer I just make things work the way they should.
Enough of that ……Now here is what your facebook fanbox iframe code would look when you get it from facebook.
"http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script><script type="text/javascript">FB.init("7f7ce0be4660e5312fa83f0af6368841");</script><fb:fan profile_id="181283852393" connections="20" width="1000" height="95" ></fb:fan> <div style="font-size:10px; padding-left:20px"> <a href="http://www.facebook.com/pages/Indore-India/what-what/181283852393"></a></div>
To make the fanbox take design of your css simply put the location of css file just after the height of your facebook fanbox.To see the code just slide this panel and you will see how I have placed mine.
"http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script><script type="text/javascript">FB.init("7f7ce0be4660e5312fa83f0af6368841");</script><fb:fan profile_id="181283852393" connections="20" width="1000" height="95" css="http://what-what.net/wp-content/themes/thesis_16/custom/custom.css?9> font-size:10px; padding-left:20px"> <a href="http://www.facebook.com/pages/Indore-India/what-what/181283852393"></a></div>
Once that done start tweaking the colors and the shape of your facebook fanbox.
Word of caution :- The question mark that you see at the end of your css,just put the number that you have revised your facebook css files.(Facebook works according to the cache storage )
Ex- You start to style your facebook fanbox for the first time and as you save your css files,change the number to 2 and from their on the keep on increasing the number as once per css editing.
You can see it took me 6 revisions so I have used the number 7,as the cache was already stored for the first editing.
I know this really fussy but then its always great fun in making things work the way you want it.
This useful tutorial is presented by our guest author Shoaib , who writes at what-what.net. If you like to Write for Shoutmeloud read : Shoutmeloud Revenue Sharing Program.
Related posts:
- Fan Box : Facebook pages widget for your blog
- How to Add Facebook Fan Page Widget on your blog?
- How to Create A Facebook Fan Page For Your Blog
- Facebook Fan page VS Google Friend Connect
- How to show your Twitter Tweets into Facebook Profile
- Official facebook Share Count button from facebook
- Twitter Fan Widget: Showoff your followers in WordPress Sidebar
- Facebook :Find Your Real Friends On Facebook
{ 2 trackbacks }
{ 23 comments… read them below or add one }
Thanks for the tip
facebook fan page has become a symbol of blog popularity and these tips will surely help
A good number of fan base always attract people, more over Fan page also helps you to drive traffic from facebook.
Thank you for this tips, Hi I have listed your blog on my most favorite blog list.
it is will be nice if we can customize it according our themes.
Thank
Best Regard
@Anish -ur welcome
@Dinesh-Just try on and almost anything is possible……
@Blogger Template Place-Yeah you can,that’s the basic logic behind this….
I never thought that we can modify facebook fan page.
Thanks for share this trik. Is that facebook fan page give any traffic to you it dont give any of the traffic to me . can you please tel how to get from it.
Just connect youe wordpress blog with your fb account and the next time you make a post in ur blog it will publish to your and ur friends facebook wall ,this is the way that ur fb pals will come to know that u have a blog and have made post.
You can also check out the the post on how to integrate fb into your blog here:-http://www.shoutmeloud.com/integrating-facebook-friend-connect-with-thesis-wordpress-theme.html
Really unique design.
Thanks for nice post.
These tips will help in playing with the facebook widgets..
It will! most important it will help in customizing and proper placement of your facebook fan box.
Thanks for the tips. I am using this widget in my blog. Its very helpful and needed to be placed in every blog.
Thanks for your comment Deepika and it is indeed helpful.
I have not put FB widget for a long time now but I should put it back soon. Thanks
Tinh you should. Capturing Facebook users on fan page is more like increasing your subscribe count, because they will keep getting update from your blog on their homepage.
Thanks, I will do this now
@Rk n Deepika -ur wlecome
Hi,
as anyone noticed that the custom styled fanbox does NOT show on iPone? Any advice / workaround?
TNX
J
Hey John ,it does work on iphone,I tested it just right now ,though it takes sometime to open(this even happens if your browse via your pc orMac as well.
Hey Furry,
jep, I noticed it working last night (must be a cache issue – even though I’m using the …css?bla=$time hack).
BUT: for some reason white spaces in iframes are rendered as line breaks on the iphone…? Anybody have the same experience or better yet a solution?
Tnx
J
Can you kindly provide the CSS markups specifically used by the Facebook Fan Page embed? I reviewed the CSS file at http://what-what.net/wp-content/themes/thesis_16/custom/custom.css and could not find any particular section used specifically for the widget. Thanks!
Hey Ernie,
only sensible way is to use firefox w the Firebug extension…
greetz
J