Adding a Facebook Fan list to your blog or website

Today I would like to share that how to add a Facebook fan list to your blog or website (like I have added here at right sidebar). This is the best way for your blog/website readers to connect with you on Facebook.

The Facebook Fan Box is a social widget that allows you to attract and gain Facebook fans from your own blog/website. Before you add a Fan Box to your website, you need the following:

a) A website, and the ability to modify files on your website.
b) A Facebook Page that promotes your website (you must be an admin of the Page).
c) A basic understanding of HTML, so you can edit the pages on your website where you want to place the Fan Box.

Now lets add fan box to your blog/website

The Fan Box is based on the fb:fan tag. The easiest way to add the Fan Box to your site is to use the Add a Connect Widget wizard, which you reach in one of three ways:

» Under your Page's profile picture, click the Add Fan Box to your site link.



» Under your Page's profile picture, click the Edit Page link, then click the Add Fan Box to your site link under Promote Your Page.



» Following this URL to the wizard: http://www.facebook.com/developers/wizard.php then selecting the Page from the Make a Fan Box for this page list at the top of the wizard.

The Fan Box wizard appears.



Use the check boxes on the wizard to specify which elements of the Fan Box you want to show.

» Checking the Include stream check box displays your Page's stream on your site. The stream updates each time the Page loads.

» Checking the Include fans check box displays a certain number of your Page's fans. You can change this setting, as described below.

The wizard automatically generates the JavaScript code you need to easily add the Fan Box to your site. The wizard creates a Facebook application and corresponding API key. If you already have an API key from your Facebook Connect site or another Facebook social widget like the Comments Box or the Live Stream Box), you must replace the auto-generated key with that API key.

The JavaScript code the wizard generates looks similar to this:

<script src="http://www.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("API_KEY", "");</script>
<fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300"></fb:fan>
<div style="font-size:8px; padding-left:10px"><a href="VANITY_URL">PAGE_NAME</a> on Facebook</div>

Copy above code to any page on your site where you want to display a Fan Box.

Important: If you want to place a Fan Box on a page on your site that already references Facebook Connect (that is, the page contains one script that calls FeatureLoader.js.php and another that calls FB.init), then you must not reference these scripts again. You simply can just put in the fb:fan tag where you want the Fan Box to appear. As in:

<fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300"></fb:fan>

Adding Facebook fan box to blogger

» Get the code for your Facebook Fan Box like above. This can be done in a few ways, see the image above, or visit the fb Fan Box Wizard.

» Sign in to Blogger and go to Layout > Page Elements.

» Click Add a Gadget.

» Choose Basics > HTML/Javascript

» Add a Title and paste the code for your Facebook Fan Box under Content.

» Click Save.

» Preview and edit again if necessary.

» Don't forget to Save the changes once you are finished.

You can edit this part according your choice:

fb:fan connections="6"
width="200"
height="554"

I request you all please become a fan of Tutorialfeed on Facebook by clicking here or by clicking at right side bar fan box. Exchange and share your ideas, tips, tutorials, resources etc. at TutorialFeed on Facebook.

Do you have any opinion, leave a comment.