Sunday, August 2, 2009

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.

Facebook Fan Box

» 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.

Facebook Fan Box

» Following this URL to the wizard: 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.

Facebook Fan Box

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="" 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"

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.

Related Posts :


Knoxville Website Design said...

Integrating Facebook with websites is something more and more people want. Thanks for this information.

Jacky said...

Very useful and clear information. Thank's. I will try to implement a Facebook Fan list on my website.

new york web development company said...

very helpful for me. Thanks for this blog.

Salman said...

Nice I will try this

Blogging Tips

Admin said...

more download

Matt Hardy said...

Hey, it is a very nice and easy tutorial for adding facebook fans on a blog.

thixna said...

thanks for information,,,,, nice way to advertise something.
I will try it soon.

yogi afrianto said...

nice posting

The Sweet 7 said...

I have spent the day trying to figure this out. After giving up, and having a strong drink. I decided to try again and found your site. Amazingly, I got it fixed and working. THANK YOU!

Darshit said...

how to place the 'iframe' code , which is given by FB wizard these days.

Web Design Company said...

Very thanks for providing the information.

Thomas said...

What great blog. I really like the template you used and I found your post extremely informative. Keep it up.

Buy facebook fans said...

Twitter and Facebook allow you to share your news or information with the world.

Florida Insurance said...

Well i would just like to say that thank you so much facbook fans for all your help its very nice work you done there

Sagging skin said...

I definitely enjoying every little bit of it.It is a very nice and easy tutorial for adding facebook fans on a blog. I have bookmarked to check out new stuff you post.

Eazy Teez said...

Thanks, I was looking for this. It works like a charm and very simple to implement.

Buy Facebook Fans said...

This sought of information is quite useful and get the basic concept and i will try it definately

web India said...

Thanks.I like this work.

ralph lauren coupons said...

Thanks for the share

ipad 3 said...

Thanks for sharing this great information. I really enjoyed reading about this,and I'm going to let other people know about this as well.

social media for planner said...

Very helpful tutorial. I'll love to try it. Thanks!

Business Logo Design said...

Nice tips share. I will try to connect my fanpage to my blog.

frank said...

Useful tips.. going try this.. thanks

play poker said...

excellent tips and i must be the one is going to try it asap so thanks for sharing the nice stuff.

Gilbert Homes said...

I am implementing this as we speak. Awesome screenshots and very helpful script. Thank you!

ytube216 said...

Yes, the picture, screenshot described everything .....

Facebook Application said...

Pretty insightful post. Never thought that it was this simple after all. I had spent a good deal of my time looking for someone to explain this subject clearly and you’re the only one that ever did that.Keep it up.

Anonymous said...

Although she asserted that she believes she was hypnotized, she remembered the incident.
After many years of professional hypnotists struggling
to to educate the public about the nature and benefits of hypnosis there is little
good to say about this disappointing exploitation of their profession.
Linear thinking falls apart when one is unknowingly missing a
piece of the puzzle.

Feel free to surf to my web site ... how to hypnotize someone

Post a Comment


Copyright © 2009 -