Facebook Fan Page Widget for Any Web Site – Add Fan Box

Facebook has upped the ante again making it one step easier to grow your fan-base on Facebook and integrate Facebook into your web site.  Having just been released, Facebook makes it easy giving you a snippet of code and offers a breadth of customizability.

The Fan-Box widget, Facebook says, is designed to convert your web site traffic into fans of your Facebook page.

“Users can view the most recent posts from the Page, see a list of other fans (including their friends), and, most importantly, become a fan without leaving the site,” Facebook Product Manager Mark Kinsey says. “Additionally, if a user visits the site and isn’t logged in to Facebook, the user can log in and become a fan directly inline as well.”

One of the cool things is that if you click on “Become a Fan”, and you’re not logged onto Facebook, a pop-up window will come up asking for your Facebook login credentials.  As soon as you log on, the pop-up goes away and you’ve become a fan.  In other words, from a technical side, Facebook can authenticate your visitors right through your web site, without taking them away from your page.  Very cool, indeed.

So, how to you get the Fan-Box widget into your site?  Easy.  You have to be logged on, go to the Facebook page you are wanting to add to your site, and right below your page’s picture in the upper left, it will say “Add Fan Box to your site”.  Once you click on the link, you’ll be taken to a new page that gives you a preview to the right, and a code box to the left.  From here, just copy the code and paste it anywhere in your site you want your Fan Box to be displayed.

Tips: The minimum width of the Fan Box is 200 pixels, and the default height is 554 pixels.  The default width is 300 pixels, and this is easily changed as it is found right in the code.  However, the height isn’t quite as obvious.  If you do shrink down the width, the height will need to be increased a little so as to accomodate the “fan” thumbnails.  In order to increase the height, you’ll need to add a little snippet of code: After where it reads [width="216"] add [height="600"], without the brackets or comma, changing the number to whatever works for you.

That’s it!

Similar Posts

None Found

Comments

About Author