From Facebook Developer Wiki

Pages are becoming an important part of a user’s experience on Facebook. The users who manage these Pages are looking for easy ways to provide great content for their Pages. By allowing these Page administrators the ability to connect with your website and easily share your content to their fans, you will increase the distribution of your site or blog dramatically.

Benefits

Giving Page administrators the ability to connect and publish content to their Pages from your site or blog is beneficial for a number of reasons.

• Allows users to publish directly to their Pages using Facebook Connect.
• Helps users become fans of a Page from a website.

How It Works

When a Page administrator visits your site and has already connected with Facebook, you can allow the user to publish your content to their brand Page on Facebook by integrating these practices.

Scenario 1: Posting to a Page from a Connect Site

The user visits your site and connects with Facebook. By asking for the publish_stream extended permission, the user can allow your site to publish to their Page’s stream.

Once a user grants the permission for their Page, your application can publish content to the page’s Wall at any time.

Scenario 2: Users Can Become a Fan of Your Page on Your Site

You can also promote your Facebook Page directly on your site, allowing your users to become a fan, view the latest Page stories, and even see which friends are fans as well.

Scenario 3: Interacting with Your Fans on Your Page With a Custom Tab

When a user visits your Page on Facebook, you have the ability to create highly engaging experiences with interesting tabs. Tabs can be added to your Page and can be custom built or built by third party application developers.

Threadless created a tab called ‘New Tees’ that allows their fans to comment, vote and ultimately purchase their latest t-shirt designs.

Implementation

Authorizing a User to Post to Their Page from Your Site or application

To allow a user to post to their Page, the user will need to grant the publish_stream extended permission for both the user and the Page.

In JavaScript you can do this with the following method:

The first parameter is the permission name, the second is a callback function, the third, when set to true, enables the profile selector drop down, and the last parameter allows you to filter which Page IDs you show in the drop down.

You can grab a list of a user's Pages with the following FQL:

For more information on this method please see Stream.publish

Adding the Fan Box to Your Site

The easiest way to add the Fan Box to your site is to use the Add a Connect Widget wizard.

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 [Category:Social_Widgets|social widget] like the [Comments_Box|Comments Box] or the [Live_Stream_Box|Live Stream Box]), you must replace the auto-generated key with that API key.

The JavaScript code the wizard generates looks similar to this:

Copy this code to any page on your site where you want to display a Fan Box and replace API_KEY, YOUR_PAGE_ID, VANITY_URL, and PAGE_NAME.

Important: If you want to place a Fan Box on a page on your site that already references [Facebook_Connect|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:

Customizing the Fan Box

The Fan Box gets rendered by the [fb:fan|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. Specify either the profile_id or the name, but not both.
• name: The Page's name (the name after the final backslash) or username (if one was specified). Specify either the profile_id or the name, but not both.
• stream: Set to 1 to display stream stories in the Fan Box or 0 to hide stream stories. (Default value is 1.)
• connections: The number of fans to display in the Fan Box. Specifying 0 hides the list of fans in the Fan Box. You cannot display more than 100 fans. (Default value is 10 connections.)
• width: The width of the Fan Box in pixels. The Fan Box must be at least 200 pixels wide at minimum. (Default value is 300 pixels.)
• height: The height of the Fan Box in pixels. The height defaults based on the elements you include in the Fan Box. For a Fan Box that contains only the Become a Fan button, but no stream or friends, the height is 64 pixels. If you include all the features, the Fan Box is 554 pixels high. If you change the number of connections shown, you may need to edit the height to ensure they are all visible.
• css: The URL to your own style sheet. See fb:fan for policies on using your own CSS.

Using an IFrame instead of JavaScript

We highly recommend Using JavaScript to add a Fan Box, as it allows your site to add more social widgets (other Fan Boxes or Live Stream Boxes) easily in the future.

If you are unable to use this method for some reason, you can use add a Fan Box using an HTML iframe tag, like this:

You need to specify your Page ID in the iframe src attribute. You also must specify the URL to your Page in the anchor tag in the div.

You can choose to hide the stream from the Fan Box by changing 1 to 0 in the stream URL parameter.

You can modify the number of fans to display by changing the setting for the connections URL parameter. Setting connections to 0 hides your fans. You cannot specify more than 100 fans.

You can reference a style sheet by passing css, a URL-encoded GET parameter, to the iframe src. Your style sheet can modify the Fan Box's colors and fonts, but it cannot delete, obscure or modify:

• Your Page title and icon
• The Become a Fan button
• The order of the elements (button, stream, fans)

Adding a Custom Tab to Your Page

Custom tabs are basically applications that are enabled to work within tabs. To add a custom tab, follow these steps.

1. Follow the steps here to create an application
2. Once you have an application created and callback URL set, within your application settings click Profile and enter the name and URL of your new tab.

For more information and Tab specific behaviors, please see guide to creating Profile Tabs.

Best Practices

• Create separate pages for different sets of content across your site. For example, if you are a news site, you can have separate pages for News Headlines, Sports Stories, and for each columnist.
• Create a content management system so that new content from your site is automatically posted to your pages.
• Add the Fan Box (and all relevant fan boxes) to each page on your site so that users can easily become fans of your page. This will allow you to then post content to the streams and drive new traffic back to your site
• Create a tab instance of your Connect site allowing users to show off the content they have created on their Facebook profile.