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!

  • I copy the other code from fan box widget to wordpress text widget and save it the code always gone. the code cannot be saved. and then i look my blog there is not show fan box like on preview. same not workig if i copy code from IFrame

    • Hi – thanks for commenting. Can you provide me with a link to your blog? Also, are you using the iFrame code or the standard code provided for the widget?

      • Hi! I’m using self hosted WordPress blog (http://askguyonline.com). I go to my Facebook Fanpage, create a Like Box, but all I get are and iframe and XFBML code (there’s no javascript code), which don’t work at all. I’m now using Facebook FanPage Plugin (SFC) and it works (as you see on my blog), but if I add code from generated iframe code, nothing works.

        What could I do if I want to use code generated by Facebook plugin, not SFC? Where to find the code? Thanks so much!

  • I copy the other code from fan box widget to wordpress text widget and save it the code always gone. the code cannot be saved. and then i look my blog there is not show fan box like on preview. same not workig if i copy code from IFrame

    • Hi – thanks for commenting. Can you provide me with a link to your blog? Also, are you using the iFrame code or the standard code provided for the widget?

      • here's my blog http://agk13.wordpress.com/. all code not works for me.

        • Hi – the reason you aren't able to add your Facebook Fan Box is because your WordPress blog is not a self hosted blog, but a free version of WordPress. I'm not sure 100%, but I don't believe a Facebook Fan Box can be added to a free version of WordPress.

      • here's my blog http://agk13.wordpress.com/. all code not works for me.

  • here's my blog http://agk13.wordpress.com/. all code not works for me.

    • Hi – the reason you aren't able to add your Facebook Fan Box is because your WordPress blog is not a self hosted blog, but a free version of WordPress. I'm not sure 100%, but I don't believe a Facebook Fan Box can be added to a free version of WordPress.

  • here's my blog http://agk13.wordpress.com/. all code not works for me.

  • ok ! thank you very much for helping me robert. I hope you succes. god bless you. Wassalamualaikum

  • ok ! thank you very much for helping me robert. I hope you succes. god bless you. Wassalamualaikum

  • robert, you are right. it's not possible to add a fan box to wordpress.com-blog yet (just wordpress.org). unfortunately.

  • robert, you are right. it's not possible to add a fan box to wordpress.com-blog yet (just wordpress.org). unfortunately.

  • here's my blog http://agk13.wordpress.com/. all code not works for me.

  • EllenLeRoy

    I can’t find the fan box code anywhere on my fan page. I looked and there was no option for one. Did they stop doing it or have they moved it?

  • Hi there – they longer call it a “fan box”, it’s now called a “Like Page”

    Login to Facebook and go to your fan page

    click “Edit Page” directly under the fan page image

    this will take you to your dashboard

    look at the right hand side under “Promote Your Page”

    click “Promote with Like Box”

    Let me know if that works…

  • Shadowman1986yk

    Hi

    Even I’m having the same problem. When I took the iframe code for the Like Box and I try to paste it, it disappears.

  • Fortunately102

    please join us on http://www.blog.mee-go.pl