Yann “Bug” Dubois

Hey, did you know you could post your blog in a Facebook page and benefit from all of Facebook’s social bells and whistles without even installing a single plugin?

All you need to do is to get a free Facebook Application ID, create a Facebook “Fan page”, configure the Facebook app to grab a page from your blog, smack it onto a custom tab in the Fan page and bingo!

Let’s review in detail how this works step-by-step…

1 – Log into your personal Facebook account and connect to the “developer” app

If you don’t have one, now is the time to create a Facebook account! This account will be your developer’s account, and it needs to be the same account that you will use to create the blog “Fan page” inside Facebook. Otherwise Facebook won’t allow you to connect your custom “blog displaying app” with your “fan page”, except if you make your app public. Which it doesn’t need to be.

Now at the very bottom of the page, click on the “developers” link.

If it’s the first time you go there, you will be asked to grant access to the “developer app” to your account. Accept, and then click on the “Start now” green button in the upper-right corner of the page.

Click right away on the “Go to the Facebook Developer App” link.

Save this page as a bookmark, because you may have to come back here often and it seems there’s no link provided anywhere else in the Facebook interface.

2 – Create a new Facebook application

Click on the “Setup new application” button.

Choose a useful name for your application (like your blog’s name), and agree to the Facebook terms, then click “Save changes”.

You can fill up the optional information fields in the “Basic” settings tab, but don’t worry too much about those, they’re not mandatory and everything will work fine if you leave it blank. Your “blog displaying” app is not meant to get public anyways.

Click on the “Authentication” tab on the left, and check the Installable to… “FacebookPages” option. This is important.

Next click on the “Profiles” tab on the left, and choose a “tab name” that will be displayed on your Fan page. Make it short and meaningful: your blog content will appear under this tab name in your page.

Now you should switch to the “Canvas” tab on the left. Choose a Facebook “Canvas Page URL”. Again this is an internal name that won’t be displayed to the public, so choose whatever simple name you like (use only lowercase letters).

Now is time to make the single important choice in your configuration, which is decide the page URL of your blog that you will use to serve a stripped-down version of your blog appropriate for displaying inside Facebook.

For the following of this tutorial, let’s decide the Facebook blog page will be served from:

http://<your-blog.name>/facebook/home

The important point to remember here is that it’s probably good practice to choose a second-level URL, because Facebook will try to use two levels of URL directories to interact with your blog.

So in our example, Facebook will send http requests to both:

http://<your-blog.name>/facebook

and

http://<your-blog.name>/facebook/home

Only the second page url however needs to return something meaningful to Facebook. The first one should preferably display a blank page.

We’ll see how to achieve this in a moment.

Fill in the “Canvas Callback URL” field with the first-level blog page URL. In our example this will be:

http://<your-blog.name>/facebook

Now go back to the left-side “Profiles” configuration tab and fill in the “Tab url” field so as to complete the second-level blog page URL mentioned before. In our example this will be:

home

So that the full “Tab URL” now reads:

http://<your-blog.name>/facebook/home

Click on the “Save changes” button on the bottom of the page… your Facebook apps’ configuration is now over! – You’ll be able to come back to this confguration settings anytime later if you want to fill-up more optional fields to beef-up your app.

3 – Create a Facebook fan page

From your account profile, click on the“Advertising” link at the very bottom of the page. Then click on “Pages” next to the flag icon at the top of the page. Then click on the green “Create a Page” button.

Choose the type and name of your business (this would again be your blog’s name), confirm you’re authorized to create the page, type in your full name as a signature, and click on the “Create Page” button.

You can customize this fan page to your likings later on. This is outside the scope of this tutorial.

You must however fill-in a minimum of information so that Facebook allows you to publish the page. So upload a Page photo and fill-in basic contact information. Also remember to fill-in your blog’s website address in the “Detailed info” tab.

Save this basic information, and Facebook should now tell you “This Page has not been published. To make this Page public, publish this Page.” Let’s do so!

4 – Configure a custom tab to display your blog

Now we need to go back to our application’s page to connect it with our newly created fan page.

So let’s use the formerly created bookmark to switch to Facebook Developer App“. (keeping it open in a second browser tab or window makes things even simpler if you like).

Here’s the tricky part where Facebook’s interface does not help us. But once you find out how it works it’s simple. So let me share the secret

Click on your application’s link in the upper-right box to go back to configuration mode.

Now click on “View application profile” on the right.

Now in the upper-left part of the application profile page, there is a small triangle with “more” written next to it. Let’s click on that.

You should see the option “Add to my Page”. If it’s not the case, you need to wait a few minutes so that Facebook has time to propagate the creation of both your new page and new app to all of it’s servers. If you still don’t see the option after a few minutes, go check back you app’s settings, and be sure your fan page is actually published.

Click on “add to my page”, and then click on “Add to page”  Next to the appropriate page info and close the box.

You’re almost there!

5 – Make the custom tab default fan page landing box

Go back to your fan page manager and choose to “View page”.

Now click on the “+” plus sign at the right of your default page tabs, right after “wall”, “info”, “photos”, “discussions”. The name of your brand new app should appear in the drop-down list. Choose that. This will add the tab to your page.

Now don’t worry if the page actually displays errors or strange parts of your blog. We still need to configure WordPress to display the right content in there. But that should prove Facebook already established a connection with your blog! Don’t worry either if the page stays blank. We’re not there yet.

Click on the “Wall” tab, and then click on the “settings” button in the upper-right corner of the wall content section.

This will open an options box, where you can change the “Default Landing Tab for Everyone Else”. In the drop-down list, choose your custom tab name.

Okay! The Facebook configuration is over, let’s continue to configuring WordPress!

6 – Configure WordPress to serve a custom stripped-down page for displaying inside Facebook

Now, for real WordPress folks, this is the easy part.

What we want basically is to setup a custom page template tailored to display a basic version of our blog’s post list. And then just create a page with the appropriate URL that Facebook will query and display inside the above-created fan page.

So first, let’s create a strippped-down page template. You can do that by copying the existing page.php template in your /wp-content/themes/<active-theme-name> directory. Make a copy and rename it “facebook.php”.

Now edit that template with your favorite text or php/xml editor. Here’s what you need to add at the very top of the template file:

<?php
/*
Template Name: Facebook
*/
global $more;
$more = 0;
query_posts( 'showposts=10' );
?>

And in the page’s code, get rid of all the calls to display page headers, side bars and footer. So let’s erase those lines:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Also get rid of all code referring to external Javascript calls (such as advertising display), and to objects. Facebook won’t allow things such as “<noscript>” tags and a few more. You’ll see what else needs to be gotten rid of later on by trial and error. Facebook will display error messages when something is wrong.

Save the customized facebook.php template file and put it in your above-mentioned active theme template directory.

Now go to the WordPress admin, and create the page hierarchy.Create a new page with the first-level slug we chose up there during step 2.

In our example the page title (and thus its slug) should be:

facebook

Before publishing this page in WordPress, be sure to setup the page template to the newly created “facebook” page template. Leave the page content blank.

Now create the second page level. In our example the page title (and thus its slug) should be:

home

Again, leave the page content empty but make sure to choose the “facebook” page template. Make that page a “child page” of the above-created first-level page by setting it’s “parent” page to “facebook”.

That’s it. You’re all set.

Go back to Facebook and refresh the fan page custom page screen by pressing ctrl+F5.

You should now see a stripped-down version of your blog’s front page appear inside Facebook.

Now you can go back to your WordPress template to customize the look and feel of that page so that it fits Facebook’s design as well as possible. And get rid of “illegal xml” errors if Facebook displays any.

Enjoy!

Want to see an actual example? Here it is!

PS: If you wonder if steps 1 to 5 allow you to display just any web page content inside Facebook, the answer is…yes! You can display just about anything in there as long as it satisfies Facebook’s strict XML content parsing rules (no Javascript, no objects, etc.) – So in effect, this tutorial is not limited to WordPress at all.