facebook fan box

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

July 10, 2009

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

add a fan box

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

copypastecode

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

appearance

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

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

textwidget

Paste The Code Into Your Widget

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

paste code

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

fanonblog

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

  • 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
  • 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?
  • 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?
  • 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....
  • 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?
  • 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.
  • 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?
  • 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...
  • Hey kudos to you for such a useful and detailed post...
    Post got Tweeted by me :)
  • 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.
  • 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.
  • 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!
  • 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_McLaughlin
    Facebook - http://www.facebook.com/StockCoach
  • marklewin
    This is great information. Thank you.
  • OnlineStrategy
    Thanks for posting this. Clear and succint!
  • Darryl Kraemer
    Nice tutorial. Thx for sharing!
  • This is very good information, thanks again for sharing. I'm becoming a fan of the fan.
  • 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.
  • Manuel
    Awesome article!! How did you add the Login with Facebook, Twitter, OpenID buttons to your blog? :)
  • 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.net/

    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
  • kalipaige
    How do you get the short link:

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

    When I do it, I end up with
    http://www.facebook.com/pages/myfanpage/reallyl...
  • Thanks for this post. Very helpful.
  • 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
  • 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.
blog comments powered by Disqus