Dummies Guide to Integrating Facebook into WordPress

by Tim M on September 21, 2009

* Update Oct 7 2009 – I wrote a 40 page guide subsequent to posting this article; you can download it from here.*
This Web2.0 Stuff

Warning, this post may seem a little techy, but it’s all very easy and straight forward – just use the links I provide and take your time and you should have FB Connect up and running in 30 mins. Your blog into FB app – 10 mins.

This Web2.0 business can be a bit overwhelming: Facebook, Twitter, FriendFeed, Ning, Vimeo, Digg, Delicious, StumpleUpon – the list of sites and services is ever-expanding and pretty confusing (have you see Foursquare yet?).

For me though, two services clearly stand out – Twitter and Facebook. Both are great for communicating with users and getting information and news out. I don’t have a personal FB account as I personally abhorr the crap people put on FB – it’s a great business tool, nothing else (FB have done a great job of convincing people it’s a great personal “tool” too). Some people dribble rubbish onto Twitter too, but increasingly it’s becoming a great business tool.

The killer reason I use Facebook and Twitter is for interactivity and integration with people. Remember you want to create a tribe, and you should go to where your customers are, and this, in increasing numbers is on Facebook.

So read on if you want to get a lot more eyeballs on your website, and bring your site into Facebook and therefore people from FB back to your site.

This is a beginner’s guide only; there is a lot of really spiffy stuff you can do with Facebook but this will just deal with getting Facebook Connect working on your site, getting your blog’s feed into a Facebook App, as well as covering some of the other stuff you can do with Facebook like creating pages and adding your blog to Networked Blogs so you can add them to blog networks and create widgets for your WordPress site. All these are great for interactivity and social proof (i.e. “oh, this site has 2000 followers on their FB Networked Blog so I’ll join too).

I won’t deal with Twitter as it’s a snap to integrate as a WordPress widget, you can find information on that here.

So onto Facebook!

Below I’ve created a very quick and dirty map of how I am pulling bits and pieces of FB together into the website. Feel free to copy any elements and code, I’ve grabbed code and ideas from elsewhere anyway.
FB map


Facebook Connect

I recently needed to integrate Facebook Connect into wherespresso.com and tdftips.com so that users could sign in to make comments and submissions and share comments back to their wall.

This is beneficial for a couple of reasons. Firstly, it makes signing in to make comments familiar (hundreds of millions have FB accounts) and seamless for users. If the site visitor is already logged in to FB, FB Connect (FBC) and your site will know this, and a small window will display showing the user they are logged in (see below).

loggedin

Secondly it’s a form of social proof that people are on your site; it improves adhesion, cohesion and by people using their FB account to comment, chances are they’ll share this comment on their wall, which improves the visibility of your site.

Facebook Connect relies on you creating a FB Application which will give you an API key and App password to use on the WordPress side.

Creating your FB App
Creating an app is very easy; you can get some instructions on that here and create the app here. Creating an app provides a handle or holder for FB Connect and Blog Feed->FB functionality.

This is a pretty handy guide (as is this) but I found some configuration items missing. I’ve detailed these below, as well as what you should use. I’ve left most of my fields free in the App settings in Facebook; stuff like privacy information page, support page etc will be dealt with later when more users use the app. As the app is simply for Facebook Connect and drawing the blog’s RSS feed into FB, I’ve only configured minimal settings.


Missing Configuration Items

I couldn’t find info on the Connect URL setting on Google but eventually worked it out (thanks to this link).

The missing stuff I needed was Connect URL and Base Domain. In your app’s settings, under “Connect”, set

Connect URL -> your blog/site’s home URL WITH “http://”
Base domain -> your blog/site’s home URL WITHOUT “http://”

The other settings are all straight forward, for tdftips.com, I set the following items. I will be making more changes as I understand more about the API and capabilities.

Basic: App name=tdftips.com
Authentication: Installable to Users and Pages, both Callback URLs are just the site’s home URL (with “http://”).
Profiles: Tab Name is “tdftips.com”, Tab URL is http://apps.facebook.com/tdftips/, Default column=wide, Info/Profile Publisher/FB Page Administration sections ALL left blank for now.
Canvas: Canvas Page URL is http://apps.facebook.com/tdftips (this is searchable/resolvable so make it meaningful), Canvas Callback URL is http://tdftips.com, Optional URLs – blank, Canvas Settings Render=iframe, iframe size = resizable, Canvas width=full, Quick transitions = off
Advanced: leave for now

Getting FBC Working on WordPress
After creating your FB app, you need to install the FBC WordPress plugin and add the API Key and Secret in the widget configuration. Easy so far right?

You need to do two things now; add a special html file to your domain and configure your theme to display the FB Connect login at comments.

Create a file called xd_receiver.html with the below contents and upload to your home/target directory. You can copy-paste the code from this site (for some reason even though I enclose this code in code tags, WP is still rendering it as html).
xdcode
Now comes the tricky part. If you’re using the WordPress Thesis theme, go and read this link on how to get the FBC function working for comments. I added the code to my custom_functions.php file so when Thesis was upgraded, all my custom changes wouldn’t be overwritten (Mr Chris Pearson is an awfully clever guy).

Add the following code to custom_functions.php. Replace “[API_KEY]” with your key. You can copy-paste the code from this site (for some reason even though I enclose this code in code tags, WP is still rendering it as html). Remember to remove “ ” and use the path that resolves to the location of your xd_receiver.html file.
custom
If you’re not using Thesis, go read this link which describes how to make the magic happen. This link also details some handy tricks for customising the look and feel of the Facebook logged-in/avatar box. I didn’t implement that, but you could easily put it in your theme’s css file, or if you’re a Thesis ninja (you really should be), then you can add it to your custom.css file.

After that, go to a post and look at the comment field. You should see the FB login box (see below).
comments

You can disable WordPress’s standard comments option by including the below code in your comments.php file.

I tried this and even when I was logged out of FB, the standard WP comments form didn’t appear, which is annoying. You want someone commenting using FB OR standard WP comment form, not both, or neither. If someone has the correct code to get that working, I sure would like it.

You can run a few test posts and make sure it’s all working.

Blog RSS Feed into Facebook

Now, this is really easy. Assuming you’ve already created an app, and added your site’s info in there (just use the home URL for blog’s; FB picks up the RSS feed by itself, even if you redirect it to Feedburner) you can now install WPBook WordPress plugin. Activate this plugin then wack in your API Key and Secret.

If you go to your canvas page URL, you should be able to see your site being sucked into Facebook land.
rss

Yay! Now, send that Canvas Page URL to your friends and get them to add it to their profiles. Once 10 of them have done that you can submit the app to the FB app’s directory and (pending approval) everyone can add it.

You can see the apps I made here and here. You can see how they work at tdftips.com and wherespresso.com.

Fan/Brand Pages
Now, creating the apps is all well and good, but what you want is FB pages (fan pages) for your site/brand.

The reason I created the app and got it submitted was so then people could add it to a FB Page I created for tdftips and wherespresso. I then could have a FB page that automatically had the blog fed to the FB page, FB fans of the page etc.

Create a page here. You can then get a fan page widget and put it on your page.

Sweet as.

That’s it, feedback, questions, load them up in comments below.

More reading at:
http://developers.facebook.com/get_started.php
http://developers.facebook.com/connect.php
http://wiki.developers.facebook.com/index.php/Facebook_Connect
http://wiki.developers.facebook.com/index.php/WP-FBConnect
http://www.smashingmagazine.com/2009/09/14/how-to-integrate-facebook-with-wordpress/

Edit (22nd Sept): a timely post from Darren at Problogger about how to bring other Web2.0 elements together.

Comments:

Previous post:

Next post: