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

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


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

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


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

Speed Up Your WordPress Blog – 6 Tips To Get You Into The Fastlane!

Getting Rid Of The Dead Weight

Is your blog taking ages to load, is it weighed down by too many plugins and widgets? If it is then maybe its time you gave your website a spring clean and got rid of some of the dead weight.

Waiting Time


Recently I had some feedback from a visitor to my blog, he commented how much he liked my site but that the load time was pretty slow. His observations were true, it had become similar to those old Facebook profiles that would take 5 minutes to load.

I wondered how many visitors I had lost because they were too impatient to wait. No one wants to sit watching a frozen screen

I know from my own experience that when I hit a site that takes forever to load I often get frustrated and leave.

This motivated me to take some drastic action…..

6 Tips To Speed Up Your Blog And Move You Into The Fast lane

After doing a bit of googling and experimentation this is what I managed to implement.  Some of these steps might be beyond most peoples comfort zone. If you fall into this category then get an expert to help you. It’s definitely worth the effort and your visitors will thank you.

1 – Reduce the number of posts that  are displayed

If you are using WordPress, go to the SETTINGS menu and select READING now adjust the number of blog posts to display per page. I reduced mine down from 10 to 3. Because many of my posts are quite long I could also adjust my settings so the blog only loads a summary of each post. I could also reduce the number of images that are include in each blog post.


2- Delete any widgets that you no longer use

I’m one of those people who likes to  try everything once; the result of my curiosity is that after months of  adding new buttons, plugins and widgets, I often forget to deactivate them and they start to accumulate. Go through all your widgets and delete all those experiments. Only keep things that have been proven to truly add value to your site

3 –  Install a Caching Plugin

This neat little trick can really speed up the load time for your blogs pages

It works by caching Worpress pages and storing them in a static file for serving future requests directly from the file rather than loading and compiling the whole PHP code and the building the page from the database.

The one I chose was WP-Cache. you can down load it by clicking on the link


4 – Inspect your code with Yslow

Yslow is a firefox browser plugin that you can use to analyse where your blog is getting stuck


It works in conjunction with firebug which is a really powerful tool for inspecting the code on a website


It gives you a breakdown of ways to speed up your site and offers great tips and suggestions.

5 – Reduce Java Script

Too much java script on a page will really slow down your load time, it basically blocks the ability for parallel downloads and this is often where the main problem is located. Any non essential code can be placed in the footer of your blog this way the rest of your blog can load without getting stuck.
Yslow told me that 5 Java script applications were in operation when my pages were loading.

I deactivated 2 of the plugins that were responsible and then set to work hacking up a “View my profile”  widget and was left with the bare bones html code that just displayed my links to my social media profiles and cut out all the extra weight

6 – Clean Up Your Theme

Check out  http://yoast.com/speed-up-and-clean-up-your-wordpress/ he gives some great advice for those who want to get into more in depth details. This stuff is a bit more advanced and only for those who really know what they are doing. Remember, if you start hacking into your wordpress theme to take a backup before you start. That way if things go horribly wrong you can still put things back to how they were before. Another great resource that I found was on graphicrating.com it shows you how to speed up your wordpress blog

The Result

I was  quite happy with the results of my tweaking, There is more I could do,  but for now that seems to have solved the main issues and my blog has been given a new lease of life. Its still not super fast, but that’s mainly due to installing the Facebook Connect plugin, I am still experimenting with it to see if it is actually worth keeping.

I hope this has helped you in some way, I am always interested in learning from the experience of others. Do you have any  tips for speeding up a blog, or know of any other good resources?

If you are reading this on Facebook you can visit my blog going to http://www.iandavidchapman.com

feel free to test out the Facebook Connect plugin and tell me what you think,

Ian David Chapman