**THIS TUTORIAL IS ONLY APPLICABLE TO FAN PAGES.  IT DOES NOT APPLY TO A REGULAR FACEBOOK FRIEND PAGE**

Since Facebook announced the ability to have your own personal url for your Facebook Pages, there has been an amazing increase in Fan Pages.  One awesome feature that has recently been released is the ability to add a Facebook Fanbox Widget. 

Like most new and cool things, I immediately had to try & add it to my page.  So, I visited Facebook and noticed that the code was giving as a <script> which is not on the approved widget list yet on our network.  But, as I scrolled down a little further, I found a version of the code in <iframe> which is supported by the network.

So what are Facebook FanBoxes?

The fanboxes are almost like mini versions of your fan page.  It allows people to become a fan of your Facebook page right from your blog.  It also shows some of your fans on rotating basis.  The other fun thing is that you can bring in your wall from your Facebook page to show what is happening on Facebook on your blog. 

How to install Facebook Fanbox on your ActiveRain Blog.

The <iframe> widget is rather generic and if you just copy & paste the generic version of the widget, it will be too wide & look funny on your blog here on ActiveRain.  But, like any good community builder, I have taken the time to make the necessary changes so that the widget will look right on your page. 

Two Versions for Your ActiveRain Blog.

The first version includes your stream from your Facebook Page Wall into your ActiveRain Blog.  The finished product will look very similar to my personal widget over on the right.  The first step is to copy this piece of code in it's entirety:

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php? id=YOUR ID NUMBER&connections=6&stream=1" allowtransparency="true" style="border: none; width: 205px; height: 600px;"></iframe> <div style="font-size:8px; padding-left:4px"><a href="YOUR FACEBOOK URL">YOUR FANPAGE NAME</a> on Facebook</div>

After you have copied the code above, you will then go to My Settings on your ActiveRain Blog. Paste the code into the Blog Description box.  Once you have copied & pasted the code into your blog, it is now time to alter the coding to make it your personal page.  Start by opening up a new tab on your web browser & bring up your Facebook FanPage.  You are going to need to tab back & forth between the 2 pages to get all the information needed to customize your page.

You will notice 3 parts of the code above that I have placed in BOLD print.  The reason for this, is that these three sections you must enter your information or the widget will not work properly.  Also, it will be very generic & not customized to you.

The first section you are going to change is Your ID Number.  This is found by visiting your facebook fan page. Under your profile picture there is a link to add a fanbox to your site.  Click on that link. DO NOT USE THE CODE THAT APPEARS NEXT ON FACEBOOK.

Once it opens, you will want to copy 12 digit id number that is at the end of the URL.  This is YOUR ID NUMBER. 

Once you have that ID number go back to the code and replace the words YOUR ID NUMBER with the 12 digit number.

The next step is to get the link for your page.  If you are lucky enough to have over 100 fans already, You have a custom URL.  Mine is http://facebook.com/socialmediatips that would be the URL I would place in mine.  But, if you do not have the vanity URL yet, your URL would look more like this: http://facebook.com/Real-Estate-Client-Referrals/101152061373.  The number at the end of the URL is very important as that is part of the URL identifier so make sure you include it as well. You will paste the entire URL into the YOUR FACEBOOK URL section.

The third & final customization to the code is to title the fanbox widget at the bottom of your widget.  I titled mine Social Media Tips, but yours might be Miami Real Estate, or Denver Locals, whatever you want to name it.  The choice is yours.  I would keep it to less than 5 words. 

After making these changes to the code, make sure to click Update to save changes!

Some of you may not wish to have the wall included into your widget out of fear of what some of your friends might say, or to just make things simpler, so I have also customized the widget without the wall feed included.  To make this widget on your blog, you will want to copy this code:

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php? id=YOUR ID NUMBER&connections=12&stream=0" allowtransparency="true" style="border: none; width: 205px; height: 440px;"></iframe> <div style="font-size:8px; padding-left:4px"><a href="YOUR FACEBOOK URL">YOUR FANPAGE NAME</a> on Facebook</div>

As above, follow the 3 simple steps to Customize your widget on your blog by changing the ID Number, URL & Fanpage Name. Once the changes have been made, DO NOT FORGET TO CLICK UPDATE ON YOUR ACTIVERAIN SETTINGS PAGE.

I will leave you with this final thought.  While it seems like this is a rather complex & long laborious process, it really is not.  I have already taken the hard part out by making the customizations to the html code to make this widget work properly and look good on ActiveRain. 

My guess is that if you follow the steps above you can add this widget in less than 5 minutes.  When Clint Miller Contacted me yesterday to add the widget to his Real Estate Client Referrals blog on ActiveRain, we were able to have it up & running in about 2 minutes time. 

Also, if you are familiar with HTML codes you can make a few more customizations to this widget.  For example, you may not want 12 of your friends showing at a time, or maybe you wish for none to be showing.  This coding is fully customizable.  If you would like some of those changes but are not familiar with HTML codes, let me know in the comments section and I will try to make the changes & post them below.  One suggestion is this.  Make sure to keep your friends showing on the widget in multiples of 3.  If not, you will run into issues.

Lastly, if you have not already joined the ActiveRain Page, what are you waiting for?  Use the Fanbox on the right of my page & become a fan today!