How to (fully) integrate WordPress with Facebook

January 3, 201128 Comments
Facebook Twitter Pinterest Plusone

There are a number of Facebook tutorials, including my own offering examples of FBML to add additional functionality to a Facebook fan page.

However, on many occasions these tutorials fall short of the mark, with no server side functionality currently available via FBML, connecting to databases, or consuming information from other sources is difficult.Third party services fill the gap, but are often expensive, or cumbersome to implement.

One of the most common questions I get asked regarding FBML is how to integrate a WordPress blog, or blog posts on a Facebook fan page tab. This tutorial takes you through the steps of doing just that, with no third party application required.

For my own Facebook page, I have opted to offer exclusive content (not available on my main blog) via Facebook. In addition to that, fans and non fans see a different opening tab, giving them incentive to ‘Like’ the page.

Here’s what we are going to end up with:

1). A tease and reveal tab created via a Facebook application
2). Exclusive content which is only available to Facebook fans
3). Some added spice in the form of Facebook Javascript (FBJS) to cycle the posts elegantly.

Here’s what the final result looks like:

See the example live here. (Obviously) you’ll have to fan this page to see the posts.

Step by Step

Here’s what we need to do. Step by Step.

1). Create a new WordPress category to house the exclusive content
2)
Find the new category ID
3).
Exclude the category ID from your RSS feed and main blog
4). Obtain a Facebook application key and application secret
5). Download the latest Facebook libraries.
6). Setup a directory in the root of your WordPress install
7). Ammend and upload the required files
8). Change Facebook application settings to point to your new files.

Step 1. Create the new category

A relatively simple process, creating a new category in WordPress is as simple as going to the category section and adding the details. Further information (for those who need it) can be found on the codex.

Doesn’t really matter what you call this. The important part of the process, is working out what the unique “category ID” for the newly created category is.

Step 2. Find the new category ID

The category ID can be found simply from within the WordPress admin section. When you have created the new category simply hover over its name, and you’ll see this in the toolbar..

wpcat

Unsurprisingly, cat_ID represents the new category ID. Keep this handy, as you are going to need it to exclude the category from your main blog.

Step 3. Exclude the category

There are three places we are going to remove this category. One is the sidebar of your WordPress blog, the other is inside the main blog loop – and finally the third is your RSS feed.

1) Removing from the sidebar

See Under ‘ Hiding the category for the sidebarin this post, which uses a very similar technique to create a custom newsletter using WordPress.

2 & 3) Removing from the main loop and RSS

I’ve used a custom plugin that I’ve created to handle this. You can download it here, but please remember to set the $category_id_to_remove variable at the top of the plugin prior to upload. It looks something like this for you code junkies curious.

add_filter('pre_get_posts', 'exclude_category');
function exclude_category($query) {
//HEY YOU! - REMEMBER TO SUBSTITUTE THIS VARIABLE NOTICES THE MINUS SIGN TOO.
$category_id_to_remove = '-1127'; // this should be changed to the catID
$query->set('cat', $category_id_to_remove);
return $query;
}
?>

Ammend,  upload and install in the usual way that plugins are installed. To test that you have successfully excluded the category, simply create a post and assign it to that category. It shouldn’t appear in either your RSS feed, or your main blog. Sorted.

Step 4. Facebook app keys

To obtain Facebook application keys, you’ll have to create an application first. Visit this URL to begin the setup of a fresh application.  You can call this whatever you like. Accept the terms and click next, you may be required to fill in a captcha prior to moving on. You’ll be presented with a number of options, which we will have to fill in later. Right now, the only tab you are interested in is the “Facebook integration” option. You should be able to click on that to obtain both the ‘application secret’ and ‘application key’. Save these as you’ll need them for later steps.

Step 5. Facebook API Libraries

Facebook don’t make things terribly easy for developers, as there’s a fair bit of hunting around before finding the API libraries for PHP. They do however make life much easier for getting the information out of the Graph API.

These are currently housed at Githubs, and are available via this download link.

Download and extract the class (facebook.php). (As this file may change / get updated). I have however included this at time of writing in the main demo download below.

Bear in mind that this is the new Graph API – and not the old Restful API.

Step 6. Setup a directory

You can do this locally, prior to installation. You’ll need a directory for images, and the main code files which I’ve already written for you.

Download the full zip folder here.

These connect through to WordPress etc . Should look something like this.

Facebook.php – The main API class downloaded earlier
incfunctions.php – Any additional PHP functions (I’ve used a trimming function to shorten my posts)
Index.php – The main FBML page used by Facebook
tinthumber.php – A generic image resize PHP script, makes things pretty.

Step 7. Ammend the files

The only file that you will have to deal with is “index.php” everything else should be fine as is. The following are the sections of code that may need tweaked.

Lines 7 & 8:

$appapikey = ‘YOUR API KEY HERE”;
$appsecret = ‘YOUR APP SECRET HERE';

refer to Step 4 if you can’t remember what these are.

Line 9:

$main_app_location_http = ‘http://www.yourdomain.com/facebook/';

Change this to whatever server domain you’ve installed on. Will be the same as the domain for your WordPress install, inside a sub directory.

Line 48:

$number_of_posts = 5;

Change this to determine the number of WordPress posts that will be shown / cycled through inside your FBML application.

Line 54: IMPORTANT

AND $wpdb->term_taxonomy.term_id IN(1127)

Change 1127 to be the same category ID that you determined in Step 2.

Line 110:

Determines what image / HTML to show to visitors who aren’t currently fans of your page..

Save the file with your settings, and upload it. At this point viewing the URL in the browser (http://www.yourdomain.com/facebook/) should show you the content shown at line 110.

Step 8. Change Facebook settings

Now that your application has been created, and uploaded, all that is left to do is to perform a few tweaks to the application page to set it all up. Log back into Facebook and follow these steps:

To set the app settings

1) Visit the following Developer Apps URL
2) Select the application name that you set in step 4 and click edit settings.
3) Click Facebook Integration
4) Set the canvas page name to anything you want
5) Set the canvas URL to the HTTP location you uploaded everything to. (Will be the same as the variable $main_app_location_http used earlier.
6) Set canvas type to FBML
7) Set tab name to ‘Extra content’
8) Set tab URL to ‘index.php’

Save changes and click ‘Back to My Apps’ at the top of the page.

To add the application to your fan page


1) Click Application Profile Page
2) Click ‘Add to my Page’ – if you an admin of several fan page, select the appropriate one.
3) Visit your fan page
4) Click the + icon beside your tabs, and select ‘Extra Content’

Voila! That should be you up and running now, having created your first Facebook FBML application. Simples!

You should be able to expand upon the code that I’ve provided, and I’ll be adding to my own offering as I now have a fair idea how things work. Next stage will be to perhaps syndicate some RSS, or integrate my Twitter account.

Articles which proved to be useful:

Facebook JS slider – I’ve used a large proportion of this code to give the sliding left and right effect.

How to detect fan of a Facebook page. – Hooray for the REQUEST object giving additional information from Facebook. var_dump to the rescue.

Some things developers need to know when developing for Facebook

JQuery isn’t supported, Facebook don’t allow you to link to external scripts when creating a canvas application. Instead a JS library called FBJS is used. That said – an open source project to mirror JQuery functionality inside Facebook looks promising.

Body tag’s are not allowed inside FBML canvas.

When creating an application for a tab, some functionality will be restricted, particularly user auth calls as tabs can’t redirect.

$is_fan = $_REQUEST['fb_sig_is_fan']; this code works out if the current user session is a fan of the page or not without needing to find the user ID. The above paragraph explains why userId can’t be fetched normally.

Facebook tab widths for designs are 520px.

Finally..

You can of course change the images which are used, and the surrounding HTML to create your own custom FBML app. Standard WordPress programming can be used because of the inclusion of the core libraries at the top of the script, so those of you familiar with writing plugins or custom code should be right at home. Let me know your thoughts in the comments.

Filed in: Programming
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (28)

Trackback URL | Comments RSS Feed

  1. Slide Buddy says:

    Thanks for this tutorial. I wasn’t aware you can integrate a user’s wordpress account into facebook, you certainly learn something new everyday.

  2. Martin says:

    grassyass :-) – trying it now…

  3. Zoid says:

    Hi, Great Post!!!

    Is there a way to integrate a WordPress-Mu blog with Facebook using the method described above?

  4. Keeley says:

    Has facebook changed anything with the app tab? I built an app with your tutorial and was able to load it on to my facebook page a month ago and now it wont show a tab when I try and reinstall it. The tab is nowhere to be found.

  5. Paul Anthony says:

    Not that I know of Keeley – perhaps try and see if the app appears on the + icon to the right hand side of the tabs. Failing that, check you’ve got a page, rather than a personal profile.

    Paul.

  6. Genesis says:

    Hi i cant get off from Step “2 & 3) Removing from the main loop and RSS” HELP! >_<

  7. I keep getting this error:

    Parse error: syntax error, unexpected T_NEW in /nfs/c04/h05/mnt/61275/domains/preview.purposedc.com/html/facebook/facebook.php on line 4

    Any help for the non-programmer?

  8. Paul Anthony says:

    Looks very much like an old version of PHP? Are you running PHP 4 or 5 on the server?

    What’s at line 4?

  9. Think I’m using PHP4…

    Line 4:
    throw new Exception(‘Facebook needs the CURL PHP extension.’);
    it’s the same as in the file from Githubs

  10. Fixed! This only works with PHP5+

  11. Azzam Sheikh says:

    Strange on my side that as an admin I only see the main image primary image and not the secondary image with the blog post. hmmmmm

  12. AdamC says:

    I am getting a 501 error when trying to view my application. http://www.ctxexecutives.net/facebookapp/
    I can’t seem to figure out why. Everything is correct in the code.

  13. Paul Anthony says:

    Try turning errors on, and checking your version of PHP Adam. Some of the libraries aren’t compatible with earlier versions.

  14. Adam says:

    I narrowed it down to including the facebook.php file. I do not know why it would do that when I include the file considering I included facebook.php into a blank php document and it worked. Luckily I know php pretty well and worked my way through it and got it to work.

    I didnt want to make the users become a fan first so I just took out the facebook part and left the wordpress stuff. Thanks for your tutorial though! I am gonna see if I can get the facebook part to work later. but for now, it works. :)

  15. Paul Anthony says:

    No worries, glad you got it sorted. Any probs with the Facebook , feel free to pop back here.

    Paul.

  16. Adam says:

    I added fb:comments to my facebook page. Look at it here: http://apps.facebook.com/ctxexecutives
    I didn’t have to use the facebook.php either.

  17. Paul Anthony says:

    Good work. Looks great! – and a simple addition that adds a little extra functionality easily. Was it just a matter of adding the tag to the page or did you have to do something else?

  18. Stan says:

    Unfortunately doesn’t seem to work if i’m browsing the FB using a https connection. Any way of getting around this?

  19. Paul Anthony says:

    What problems do you have Stan.. you can’t view things or…what error do you get?

    Paul.

  20. Simon says:

    I did something similar to this the other day.

    For use by other sites too, not just wordpress.

    I even built a mini CMS for it’s content.

    Take a look at http://www.uksitebuilder.net/2011/05/create-facebook-secret-fan-page/

    and let me know what you think

  21. Cathy says:

    Something strange going on… I clicked the link to the Facebook page but it went to your wall, not the landing page. Then I found the landing page by clicking Extra Content, but couldn’t see the Like Button anywhere.

  22. Paul says:

    I did the steps outlined above except I didnt exclude it from my regular loop yet.
    Here is my fb page.
    http://www.facebook.com/imperativedesign?sk=app_219436678080799

    when you go to it though it only shows the teaser image not the post I put in the category so far.
    Also when I included the FB facebook.php file and went to test the app it said that i was missing base_facebook.php so I installed that too.

    Any ideas?

  23. Paul Anthony says:

    Paul – are you using the new version of the API or the one included in the zip file above?

  24. Mo-ayad says:

    Hi, Paul

    The Facebook Fan page now doesn’t have tabs but more like apps you control which to appear (I’m sure you understand what I mean)
    Now, I’m the furthest person possible from web developing/designing whatever you call it..so I’d be really frustrated if after all the hard work of deciphering this looks-so-easy-toturial-but-not-to-me thing and it doesn’t work.

    I just need a confirmation from you of whether it still work with exactly those steps (except when adding the created tab of course)…

  25. Paul Anthony says:

    Hi Moy-ad,

    Take a look at my page:

    http://www.facebook.com/webdistortion – you can see its still working as links down the left of the page.

    Paul.

Leave a Reply

Back to Top