How to use Fanpage Connect

Plugin Installation

Download Fanpage Connect. It’s right there on the right sidebar. Just go ahead and click that and download the plugin.
In your WordPress dashboard, click the Plugins menu, then select Add New.
At the Install Plugins menu, select Upload, then browse for the zip file you downloaded and select it. Once it’s uploaded, Activate it.
In your WordPress dashboard, select the Settings menu, then click on Fanpage Connect. From there, follow the prompts to register and activate the plugin.

Making a WordPress Page a Facebook Fan Page

If you’ve gone through all the trouble of making your Facebook fan page, then creating Facebook fan page enabled pages on your site is a walk in the park – as it should be!

An important note before we start: You can create as many fan page enabled pages that you wanton your site, and they can all interlink – that’s the beauty of using WordPress pages in a Facebook fan page.

However, the most important page to create is the original landing page that we set up in your Facebook Application (the Canvas Tab URL). We’ll assume that this is the page we’re starting with.

When you add a new page or edit an existing one, you’ll see the Fanpage Connect settings box below your editor. Let’s take a look at the settings box:

The Fanpage Connect Settings Box. Sure don't look like much!

By default, new pages are not fan page enabled. So here’s where the magic happens. To make a page Facebook fan page enabled, toggle Make this page a FanPage? to Yes. BOOM! That just happened!

At this point if you save the page, it will fit and behave nicely inside a Facebook fan page. But we’re not done…

Now you’ll see a whole slew of settings, so let’s take this step by step.

This is box title

Important Note! Facebook iFrame tabs are only 500 pixels wide, so make sure you keep your images and video under 500 pixels in width or you’ll get lateral scrollbars!

Facebook Application ID

Here is where we put the Application ID of your Facebook Application. This and the Application Secret are the two values that allow your fan page enabled page to accept Facebook’s “Signed Request” so the page knows if it’s been liked or not. Without these values, your page won’t be able to perform reveals on like or other marketing goodness!

Facebook Application Secret

Again, you can get this value by visiting your application on Facebook. This and the Application ID must be in the settings for any pages that will be your fan page landing tab. Any subsequent fan pages do not need this info since Fanpage Connect keeps track of the user’s session as they browse your fan pages.

Autofit iFrame

Setting this to Yes ensures that the proper code is executed to resize your iFrame on Facebook. This makes sure that the scrollbars don’t show up on your pages.

Debug Mode

If you’re having issues, such as like/unlike actions not having an effect, then setting Debug Mode to Yes will generate your session information. It should contain your Application ID and Secret, user locale, like status, and your php session ID. This can come in handy if something goes wrong. Otherwise, it’s best to set this to No.

Custom CSS Link

If you have a custom template you’d like to use on your fan page, you’d enter the URL here. Fanpage Connect outputs HTML that lends itself very easily to customization. Below is the page layout for a fan page generated by Fanpage Connect:

<div id="fpc-fanpage-wrapper">

	<div id="fpc-header-area" class="full-width">
		<div class="fpc-page">
			<div id="fpc-header"></div>
		</div>
	</div>

	<div id="fpc-content-area" class="full-width">
		<div class="fpc-page">
			<div id="fpc-content">
				WordPress page content goes here
			</div>
		</div>
	</div>

	<div id="fpc-footer-area" class="full-width">
		<div class="fpc-page">
			<div id="fpc-footer"></div>
		</div>
	</div>

</div>

Custom CSS

If you have any final tweaks to your CSS, you can enter it here and it will be rendered to the page.

Custom Template

Fanpage Connect has the ability to use pre-made templates. This is useful if you’ve created a design specific for your company or niche and want to use it easily. At this writing, we’re working on a set of free templates for our users, so stay tuned! To use templates, upload the css file and any supporting images and content to the templates folder in your FanPage Connect plugin directory. Typically, this will be: yoursite.com/wp-content/plugins/fanpage-connect/templates/. The css file in each template directory must be named default.css. If you have any templates uploaded, a dropdown list will be displayed so you can chose which template to use for this fan page.

Custom Header and Custom Footer Content

If you have any extra content to display in your fan page, like your company name, a copyright, etc. then you can insert any HTML content in these boxes. They’ll get rendered to their respective <div> tags: fpc-header.page and fpc-footer.page.