Yann "Bug" Dubois

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.

La version française de cet article est disponible ici.

Pages : 1 2 3