Add A Facebook Fan Box To WordPress {HOW TO}

Add Facebook Fan Box To WordPress

A Facebook Fan Box is a great way to build fans to your Facebook Fan Page directly from your WordPress blog.  Having a Facebook Fan Box on your WordPress blog allows for “one click” fan conversions, without people ever having to visit Facebook.

Here’s how to add a Facebook Fan Box to WordPress

First, you need to locate your Facebook Fan Box application:

1. Click “edit page” which is located directly under your picture (your Facebook Fan Page picture)
2. Look on the right hand side of your dashboard page and find “Promote Your Page” – you may need to scroll down a bit to see it
3. Under “Promote Your Page” you’ll see the “Promote With A Fan Box” link

Once you’ve clicked “Promote with a Fan Box”, you’ll be taken to the admin dashboard for your Facebook Fan Box.

Notice the options that you have:

1) Chose your Fan Page (if you admin more than one page, the drop down will show the pages to chose from) – also, notice that you can select to include “stream” and “fans”.  Go ahead and click those on and off and notice the change in the fan box on the right.  Basically, you are deciding what content to include in your Fan Box.

2) Next, in section #2, you have the pre formatted options to embed into Blogger or Typepad.  For WordPress users, I recommend you chose “other”.

I recommend iFrame for WordPress Blogs

Once you’ve selected “other”, you will see directly underneath the box of code a link called “Visit our wiki for advanced options »”

You need to click that link to get to the section that will give you the iFrame code for adding your Facebook Fan Box to your WordPress blog.

The reason I recommend you use the iFrame code is because of experience.

I have found that the standard embed code for Facebook Fan Boxes are not always compatible to all browsers when embedded into a WordPress blog.

For example, in Firefox, if you’re using the standard embed code for your Facebook Fan Box in a text widget, then the Fan Box will not always appear to your visitors.  They will be presented with an empty white box.

So go ahead and click the link called “Visit our wiki for advanced options”.

Now scroll down to the section called:

Using an IFrame instead of JavaScript

In that section, you’ll see the iFrame code with the yellow background.

Go ahead and copy that entire block of code.

Adding The Code To Your WordPress Blog

Now that you’ve copied the code, it’s time to add it to your WordPress blog.

Go to the dashboard of your WordPress blog and we are going to add the code into a text widget for your sidebar.  So add a text widget to your sidebar – or to wherever you are wanting to place the Facebook Fan Box.

Go ahead and paste the iframe code into that text box and click “Save”

Finalizing Your iFrame code for your Facebook Fan Box

Finally, in order to get your Facebook Fan Box working correctly, we need to make a couple of tweeks.

1) You need to add your Facebook Fan Page ID to your iFrame code.

Look at the iFrame code you’ve placed in your text widget and find the part that says:

id=YOUR_PAGE_ID

You’ll replaced the “YOUR_PAGE_ID” with your actual Facebook Fan Page ID.

Find your Facebook Fan Page ID simply by visiting your Facebook Fan Page and then clicking on the profile pic you’re using for your Facebook Fan Page > then look up at the URL in the address bar – you’ll see at the very end of that URL your page ID – just copy the number portion of that ID and paste it into the iFrame code replacing YOUR_PAGE_ID.

2)  Connections & Streams

Right after your page id part of the iframe code, you’ll see the connection and streams attributes:

connections=10&stream=1

The settings are by default set to 10 (connections) and 1 (stream).

This means your Facebook Fan Box will show 10 fans and the stream will be active (1 = active).

You can tweek this if you like – for example here at Social Media SEO, I DO NOT have my stream active – I only want my Fan Box to show 10 of my fans.

To turn off the stream, change the “1” to a “0” (0=inactive, or not showing).

You can also tweek the height and width to be more customized to your WordPress blog.

3)  The URL Link at the bottom

Finally, there’s the portion of the iFrame code that looks like this:

<div style=”font-size:8px; padding-left:10px”><a href=”URL_TO_YOUR_PAGE”>PAGE_NAME</a> on Facebook</div>

I actually just recommend deleting that all together because if you don’t, you’ll have a text link underneath your Facebook Fan Box.

Of course the link will direct people to your Facebook Fan Page, but you’ve already got a Fan Box on your blog now, so why clutter things up?

And that’s it…

If you have any questions, let me know in the comments below!