We Are Communication Architects

Building brand awareness through content creation and community engagement.

November 18th, 2010

Integrating Facebook Tabs with WordPress Content

Though there are several steps and a few workarounds that are needed, WordPress and Facebook do play nice together. What we are trying to accomplish here is to permit a client with a WordPress site to create a page using a pre-defined template that will display on their Facebook page. This will allow them to continue to use the WordPress administrative back-end they are used to in order to manage a Facebook Tab.

Without any more hesitation, let’s get started!

First head over to http://www.facebook.com/developers/createapp.php in order to get your application set up.

Fill in the application name, “Agree” to those facebook terms,and then click the “Create Application” button.

Once the application is created you will need to click on “Facebook Integration” and fill out the following section.

Your “Canvas Page” will be the iFrame page on Facebook where your application will be hosted. In this case I will call it “voce-wordpress-tab”. Set the Canvas Type to be iFrame and the iFrame Size to be Auto-resize. The “Canvas URL” will be the location of your WordPress editable page is published to. Next step is setting up the tab.

In the Page Tabs section fill out the Tab Name field with the name that you want to appear on your page tab. In the Tab URL field you will need to add a question mark (?) so that Facebook can communicate with your WordPress site.

Submit your changes and let’s get the WordPress side of things up and running.

In your text editor of choice you will need to create a new WordPress page template for your tab.

<?php
/*
Template Name: Facebook Tab
*/

?>
<style type="text/css" media="screen">
  #fb_tab{width:500px;}
  .fb_content p {text-align:center; font-family: helvetica, arial; font-size:20px;}
</style>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <div id="fb_tab">
    <div class="fb_content">
      <?php the_content(); ?>
    </div>
  </div>

<?php endwhile; else: ?>

  <div id="fb_tab">
    <p>Sorry, no posts matched your criteria.</p>
  </div>

<?php endif; ?>

This is a much stripped down example, making sure there is no header, footer, or sidebar calls. When Facebook calls up your WordPress page inside of a tab it is converting it from HTML to FBML. Many standard HTML tags such as <body> will cause the following error:illegal tag “body” under “fb:tab-position” during the conversion to FBML. If you style the page using images from your template in order to get custom background images etc, you will need to give the full path to the image inside the inline style sheet. Save your template and create your page.

Just like a normal page creation inside of WordPress, just make sure you set your page attributes to your new Facebook Tab template.

Publish your page and take a look at it locally. It should look just as you want it to on your Facebook page.

Heading back over to Facebook lets check out our iFramed page to check the connection using the url for your canvas page. ( http://apps.facebook.com/your-canvas-page-name/ ) You should see your WordPress page inside of a Facebook frame.

Next we want to add the tab to our page.

Go to the main applications page at http://www.facebook.com/developers/#!/developers/apps.php and select the Application Profile Page link.

Next we want to select the “Add to my Page” option.

A popup should appear and ask you which page you want to add the tab onto.

Click the “Add To Page” button, go to your page, and you should see your new tab.

One important note to remember is that the styles that work inside of the iFrame will not always work inside of the tab due to the conversion to FMBL. This will require a lot of experimenting with styles. For example using .fb_content {text-align:center;}  will not work on paragraph tags inside of the tab. You will have to use .fb_content p {text-align:center;} to drill down the style a bit further to combat the FBML conversions.

Leave a comment with any questions or issues that you run into along the way, as Facebook is an always evolving landscape for developers.

About the Author
Hampton Paulk is an Applications Developer on the Voce Connect Platforms team, bringing over 10 years of experience with branding, interface design and more to the projects he works on for Voce's clients. @hamptonpaulk on Twitter.

Filed in Development, Programming, WordPress

Add Your Comment2 Responses to “Integrating Facebook Tabs with WordPress Content”

Tatiana on March 5th, 2011 at 9:00 pm

Thanks so much for the tutorial!

Would you think about offering the WordPress Facebook Tab theme for download?

Pagetopia.com on July 20th, 2011 at 11:52 pm

@Tatiana, you don’t need the theme – just use any theme (the default Kubrick or TwentyTen will work fine). Upload the page template the author has kindly provided, and use that (it removes anything you don’t need).

If you need any more info, contact me at Pagetopia.com – always happy to help