Update from Facebook Team …
As a Facebook Page owner, you can implement the Fan Box widget on your own website to gain more fans and share your Facebook updates. Implementing requires pasting just 4 lines of code.The widget currently has 3 components: “Button”, “Stream” (optional), and “Fans List” (optional). The widget can fit in a space as small as 200 x 64 (just the “button”) or offer a richer experience including recent posts and other fans at a full 600 x 544 pixels (width adjustable from 200 – 600 pixels).
Some live examples on each Page’s own website for businesses include Coca-Cola, Blackberry, Tide, Herbal Essences, and Threadless.
About Facebook Fan Box
The Facebook Fan Box is a social widget(just 5-10 lines of HTML Code) that allows Facebook PAGE owners(i.e., we) to attract and gain Facebook fans from their own website(i.e., ChiragMehta.info)
The Fan Box lets users:
• See how many users are already fans, and see some of their friends who are
• Read recent posts by from the Page
• Become a fan with 1-click without needing to visit the Page
Code
UPDATE : Use Iframe, for easier access to Fan Box.
<iframe scrolling="no" frameborder="0"
src="http://www.facebook.com/connect/connect.php?id=FACEBOOK_PROFILE_ID&connections=10&stream=1" allowtransparency="true"
style="border: none; width: 300px; height:550px;">
</iframe>
OR you can Copy following code to any page on your site where you want to display a Fan Box.
<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”stram=”1″ connections=”10″
width=”300″></fb:fan><div style=”font-size:8px; padding-left:10px”><a href=”VANITY_URL”>PAGE_NAME</a> on Facebook
Preview
Customizing the Fan Box
The Fan Box gets rendered by the fb:fan XFBML tag. You can customize the Fan Box by changing the defaults for the following attributes in the fb:fan tag:
profile_id: The ID of the Page associated with the Fan Box.
stream: Set to 1 to display stream stories in the Fan Box or 0 to hide stream stories.
connections: The number of fans to display in the Fan Box. Specifying 0 hides the list of fans in the Fan Box.
width: The width of the Fan Box in pixels.
height: The height of the Fan Box in pixels.
Bugs (Discovered as per my Implementation)
Above code works perfectly fine in Mozilla Firefox. The fan box gets rendered properly. But the same code doesn’t render a fan box in IE,chrome and not even in Safari.
Recent Comments