How To Integrate Facebook With WordPress

Advertisement

Facebook is one of those Web phenomena that impress everyone with numbers. To cite some: about 250 million users are on Facebook, and together they spend more than 5 billion minutes on Facebook… every day. These numbers suggest that we should start thinking about how to use Facebook for blogging or vice versa.

We did some research to find out how the integration of Facebook with WordPress and vice versa works, or — in other words — how you can present your WordPress blog on Facebook or use the functionality of Facebook on your WordPress-powered blog. Both of these can be achieved with a set of WordPress plug-ins, a couple of which we’ll present here in detail.

1. Integrating A WordPress Blog Into Facebook

Integrating a WordPress blog into Facebook is actually quite simply achieved via the Facebook API. The Facebook API makes programming applications that can be spread via Facebook almost a piece of cake. A lot of interactive browser games are on Facebook, such as the currently popular “Mafia Wars.” This game allows users to start a mafia family with their friends, with the goal of becoming an important figure in the virtual underground crime scene. To start a clan, you invite other friends on the network to join. This is the growth strategy of any application on Facebook: the simple snowball effect.

The applications sustain themselves through earnings generated by displaying advertisements, which also makes Facebook an even more attractive platform to develop on. This symbiosis generates growth for both Facebook and its applications. Deutschsprachige Version des Artikels1

Plug-In Installation and Configuration

John Eckman developed the WordPress plug-in Wordbook2 in early 2009. This plug-in allows WordPress blog owners to integrate their blog in Facebook. This gives a blog two lives: one as an application on Facebook (such as, for example, my private FreigeistBlog3) and one at the original URL (http://freigeist.devmag.net4).

To access a blog via Facebook, you need to first grant access to the application. To do this, go to the so-called “canvas” page, which is where the Facebook twin of the blog lives (my example5). However, granting access to the blog’s application means that the administrator of the blog also has access to information about you as a user (this is what most applications aim for: information such as date of birth, gender and educational status allows them to display quite targeted ads).

The application we’re dealing with is a simple blog and, in this sense, quite innocent, but we should state outright that the Facebook API as it is now treats blogs and websites as applications, which may not be appropriate, given the issue mentioned above. Facebook users who authorize the blog application can now easly send comments and share posts from within Facebook. The data, however, is still stored in the original database on the server where the blog is installed.

This makes it look as though Facebook serves merely as a simple feed reader. Yet, we get some other benefits. The blog on Facebook can be used to create a community around it by taking advantage of Facebook’s snowball effect, because friends of the blog’s users will see in their activity stream that they have been participating on the blog. Furthermore, it means that Facebook users will see new posts from your blog whenever they sign in to Facebook and can easily follow comments, making your blog more accessible.

To create a Facebook twin of your blog, first you have to set up a new application6. To do this, you need a Facebook account and have to register as a developer using the preceding link. All of this can be done in a few minutes.

Create a new Facebook application
Create a new Facebook application

Once you have agreed to the terms of use, give your application a name. Then you will receive your API key and a secret, which you will need later.

Settings for a Facebook application7
Settings for the Facebook application. Large view8.

Then, you have to submit a so-called “post-authorize callback URL.” This is the address on your server to which Facebook will send a notice whenever a user authorizes access to the application. By the same logic, there is also the “post-remove callback URL,” which receives a notice when a user removes the application. Both of these events are handled by the Wordbook plug-in. You merely need to write the address of the blog’s root directory with a trailing slash.

Callback URLs definieren9
Facebook application settings: Define callback URLs. Large view10.

The third step is to claim your canvas page, which is the page through which a Facebook user accesses your blog, and a canvas callback URL, which is the page from which content is retrieved. Again, include a trailing slash, or else internal links on your blog won’t work with their Facebook twin.

Define canvas page11
Facebook application settings: Define canvas page. Large view12.

Now you have some choices to make, namely, how to set up your canvas page. You have a choice between iFrame and FBML. FBML is a Facebook XML scheme with which you can use specific Facebook tags (such as tags to display user profiles). You can also use it to access certain Facebook procedures. However, the Wordbook plug-in works with iFrames, which allow Javascript and other tags, and which FBML does not support.

To distinguish between them rather crudely, you can say that iFrames give the developer more flexibility but, unlike FBML, restrict access to Facebook procedures. Another advantage of iFrames is that code that Facebook retrieves from the canvas callback URL need not be parsed by the FBML parser, which could yield a performance gain. With iFrames, only internal links on the blog need to be adjusted. And the “resizeable” option allows Facebook’s JavaScript code to adjust the size of the iFrame to Facebook’s layout.

Now the hard work is done. All that’s left is to install the Wordbook plug-in using the standard WordPress method13: install and activate. Then you can change the plug-in’s settings on the settings panel, and here you will need your application ID and the secret. You also have to tell the plug-in where the canvas page is located, so that internal links can be adjusted.

Settings for the Wordbook plug-in
Adjusting the settings of the Wordbook plug-in

And that’s it! If you want, you could activate or deactivate some other options, such as the commenting function and whether users can add your application to their profile by displaying the latest posts from your blog in their profile.

Browsing through a blog via Facebook14
Browsing through the blog via Facebook. Large view15.

The plug-in allows you to play around a little bit. But as we said, you are somewhat limited in how fully you can integrate your blog into the Facebook canvas. But the next plug-in we’ll look at integrates a bit of Facebook into your blog.

2. Integrating Facebook In A WordPress Blog

To begin, a little history lesson is needed. Many users do not like having to register for each blog where they would like to post comments, especially if they already have accounts on so many other social networks, such as Facebook and MySpace. So a single online ID for several purposes would be ideal, wouldn’t it? That’s the idea behind the OpenID16 protocol, which started in 2005. It decentralizes the identification of users for various providers and services. In essence, you can create an account on Facebook and connect it to services such as MySpace or even a personal blog. If you want to change your profile for all of these services, that too is decentralized: you simply change the settings on your Facebook account. OpenID is a chance to make the Web and its services more easily accessible. There are reasonable risks and concerns involved, but also many opportunities.

Facebook announced in 2007 that it would implement OpenID, and others followed, which explains why we now find more and more buttons that say “Connect with Facebook” or “Google Friend Connect.” This leads us to our second plug-in, Facebook Connect WordPress plug-in17, which almost seamlessly integrates Facebook into your blog.

The plug-in allows users to comment on a blog using their Facebook account; and if they are already signed in or on Facebook, they need not sign in again. Users do not have to register for a unique account on the blog because the plug-in retrieves the user’s information directly from the Facebook API. With access to the user profiles on Facebook, you can display your users’ profile pictures, which adds a personal touch to your blog.

The plug-in integrates a lot of Facebook functions: for example, users can send invitations and share stories and comments on Facebook, which gives your blog the benefit of word-of-mouth marketing. To do this, you need to activate the plug-in option that publishes a user’s activity in their respective activity feed. Last but not least, you can enable a gadget that displays the profile pictures of your blog’s most recent visitors, similar to “Google Friend Connect.”

Facebook Connect Implementation as seen on Sociable.es18
Facebook Connect implemented on sociable.es (in Spanish)

This plug-in essentially does the opposite of Wordbook (which integrates Facebook functionality into your blog).

Plug-In Installation and Configuration

Again, as in the previous section, you will need to create a new Facebook application.

Create a new Facebook Application19
Creating a new Facebook application. Large view20.

You will also have to define the callback URLs, which point to the root of your blog.

Defining callback URLs for the new application21
Defining callback URLs for the new application. Large view22.

Again, most of the work is now done, and you can soon start having fun and being creative. Just a few steps remain. First, download the plug-in from the website (see link above) and upload and enable it. A big part of the plug-in consists of the “Facebook Connect” library, which is provided by Facebook. You might stumble over the two xd_reciever files, one in HTML and one in PHP. They play a key role: enabling the so-called cross-domain communication (hence, the xd) between your blog and Facebook.

So why are these needed? Typically, HTTP requests are sent with the XMLHttpRequest object. However, the typical security settings on browsers allow XMLHttpRequest to send requests only to the domain where the original request was sent to. In our case, requests are send to and from Facebook. This cross-domain communication is achieved with iFrame cross-domain communication. With this, the application opens an iFrame on facebook.com with the relevant requests; for example, to retrieve information on whether a user is logged into Facebook.

These requests are sent to Facebook through the iFrame via the URL, with which the iFrame is opened. The request is checked, and now the Facebook script that was called via the iFrame opens an iFrame on the application page, where the outcome of the request is sent to, again with the query string of the URL. The result of any requests lands in the query string of the xd_receiver.htm file on your own server. This circumvents the problem of being unable to use XMLHttpRequest.

Now back to the plug-in. Once you have installed and activated the plug-in, you can add the plug-in as a widget to your blog’s sidebar. However, you first need to enter your API key and secret.

Settings for Facebook Connect WordPress plug-in23
Settings for Facebook Connect WordPress plug-in. Large view24.

As you will see, a whole lot of options are enabled by default, such as automatically publishing comments if they are posted through a Facebook account (the rationale being that you don’t have to moderate them because they come from actual people using Facebook and not spambots).

If you activate the sharing function, the plug-in adds a “Share” button automatically below each post. You can also activate the option that publishes a user’s comments in their activity feed on Facebook, thus making their activity on your blog visible to their friends.

After you have adjusted the settings, you will be notified that you need to define templates for the presentation. These need to be “synchronized” with Facebook. Scroll down a bit to generate and activate these templates. You can change the language manually here as well.

Alter Facebook Connect template settings25
Adjust Facebook Connect’s template settings. Large view26.

The first template controls how a user’s activity is posted in their activity feed on Facebook. However, you can also include the activity feed of your users in your gadget, as done on sociable.es (see link above). The last step is to go to the widget set-up page and include the gadget as a widget in your sidebar.

Including the Facebook Connect Widget into the sidebar27
Including the Facebook Connect widget in the sidebar

Here again, you have some choice over the configuration, especially with regard to changing the language, showing a big or small “Connect to Facebook” button, etc. After installing the plug-in, you may want to see what else you can do with it. The implementation on sociable.es is quite a nice one.

Further Resources

These two plug-ins are quite specific in what they do. However, a wide variety of Facebook plug-ins are available for platforms other WordPress. Here is a list, certainly not comprehensive:

  • Movable Type28
    A plug-in by Six Apart for adding Facebook Connect to a Movable Type blog, allowing any Facebook user to sign in. It is still in beta.
  • WordPress-FacebookConnect29
    This plug-in is quite similar to the one on sociable.es. It has the same features, such as single sign-on, publishing comments to news feeds and displaying profile pictures. However, it has not been updated since the beginning of the year. Still, there is a nice tutorial30 by the developer Adam Breckler.
  • WordPress Fotobook31
    With this WordPress plug-in, you can import all of your photo albums from Facebook onto a WordPress page.
  • Drupal’s Facebook Connect module32
    With this Drupal module, you can allow Facebook users to connect to your blog through their account. Similar to the plug-in by sociable.es.
  • Gigya WordPress plug-in 33
    This plug-in integrates not only Facebook but Twitter, MySpace and other OpenID providers into your blog for community building.
  • StatusPress34
    This small plug-in displays your Facebook, Twitter or Last.fm status on your blog.
  • Quailpress35
    Integrate Facebook-sharing functionality on your blog with this plug-in. However, it has not been actively developed for some time. And with the sociable.es plug-in, it is practically redundant.

(al)

Footnotes

  1. 1 http://www.drweb.de/magazin/wordpress-facebook-integrieren/
  2. 2 http://www.openparenthesis.org/code/wp
  3. 3 http://apps.facebook.com/freigeistblog/
  4. 4 http://freigeist.devmag.net/
  5. 5 http://apps.facebook.com/freigeistblog/
  6. 6 http://www.facebook.com/developers/
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-application-settings_1.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-application-settings_1.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-application-settings_2.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-application-settings_2.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-application-settings_3.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-application-settings_3.png
  13. 13 http://www.openparenthesis.org/code/wp
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-application-add-profile.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-application-add-profile.png
  16. 16 http://en.wikipedia.org/wiki/Openid
  17. 17 http://www.sociable.es/facebook-connect/
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-sociable-example.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-api-new-application.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-api-new-application.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-api-callback-url.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-api-callback-url.png
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-connect-settings-1.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-connect-settings-1.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-connect-settings-2.png
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-connect-settings-2.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2009/09/wp-facebook-connect-settings-3.png
  28. 28 http://plugins.movabletype.org/facebook-connect-commenters/
  29. 29 http://wiki.developers.facebook.com/index.php/WP-FBConnect
  30. 30 http://www.adambreckler.com/setting-up-facebook-connect-for-wordpress
  31. 31 http://wordpress.org/extend/plugins/fotobook/
  32. 32 http://vishalsood.com/projects/drupal/facebook
  33. 33 http://wiki.gigya.com/030_Gigya_Socialize_API_2.0/050_Socialize_Plugins/Wordpress_plugin
  34. 34 http://wordpress.org/extend/plugins/status-press-widget/
  35. 35 http://wordpress.org/extend/plugins/quailpress/

↑ Back to top Tweet itShare on Facebook

Thiemo Fetzer is pursuing a PhD in Economics at the London School of Economics. He has been publishing on web development and data analysis for more than 10 years in German print and online magazines such as Dr.Web, his own website Devmag and on his blog Freigeist.

Advertisement
  1. 1

    Here’s a WordPress widget that uses the new Facebook Like button (just release on Apr. 21st 2010):

    Facebook Like WordPress Plugin

    Feedbacks appreciated on this blog post while waiting for WordPress to approve it and move it to the directory.

    (the blog actually uses it so you can test the plugin live before installing)

    0
  2. 102

    this is new plugin to integrate facebook like button into your wordpress system

    http://buzzknow.com/2010/04/24/facebook-like-button-simple-wordpress-plugin/

    regards

    0
  3. 203

    Thanks for sharing, great info!

    0
  4. 304

    Awesome tutorial!
    This is certainly a step up from my simple tutorial on having facebook display a blog’s RSS feed in a page’s (or profile’s) notes. Many thanks for being so attentive to details.

    0
  5. 405

    Great info… Love it!

    0
  6. 506

    will definitely try this one

    0
  7. 607

    Jamie of followtheboat.com

    June 5, 2010 4:37 am

    Wonderful resource and very well written. Since stumbling across your article this morning I have been spending the whole day making my website talk to Facebook, and created two apps in the process! Thank you, Thiemo.

    0
  8. 708

    Hi,

    I created app on FB, I added plugin to my wordpress blog. Everything works except logging with facebook. When I press login button on my WP i got a message in new window:

    Configuration errors:
    To fix this error, please set your Connect URL in the application settings editor. Once it has been set, users will be redirected to that URL instead of this page after logging in.

    Anyone can help me? I’m new in FB apps…

    0
  9. 910

    Hello!
    Nice Article. One important question (for me)

    How can my visitors tag pictures of their FB friends from my wordpress album?? I saw it in 2night.com

    Thank You

    0
  10. 1011

    Only problem is… no way to costumize the looks of the plugin :/ Looks terrible on blogs with black backgrounds.

    0
  11. 1112
  12. 1213

    Hi! I’m Having a little trouble on displaying the last visitor.. It is not displaying inside the box. Even the avatars are not loading correctly.

    Please help.

    0
  13. 1314

    Wow, great information about connect facebook and wordpress. Thanks for sharing, great job!

    0
  14. 1415

    Hey this post is great!

    But I have a question, does anyone know if it is possible to post your wordpress blog directly to a Facebook page.

    So that a company that can’t register a facebook account can us this feature on their Facebook Page?

    0
  15. 1516

    I am using wpbook plugin for my facebook app.

    0
  16. 1617

    this is so great! thanks!

    0
  17. 1718

    Your work has always been a great source of inspiration for me. I refer you blog to many of my friends as well.
    facebook application developer
    Thanks for sharing knowledge..

    0
  18. 1920

    Emptyhead Designs

    January 4, 2011 10:06 am

    Looks great. Thanks

    -1
  19. 2021

    I found your article while trying to integrate my facebook status updates on my sidebar of my wordpress blog. I found a lot of outdated information on how to do it and couldn’t really find anything useful to do what I was looking for. So I wrote my own way to do it. I thought I would share for anyone interested: http://fedil.ukneeq.com/2011/01/03/facebook-wall-feed-for-wordpress/

    It basically just takes your status updates and formats it to look like a facebook widget.

    0
  20. 2122

    Here’s a kickbutt new WordPress Facebook Events Plugin I just found

    http://codecanyon.net/item/wp-facebook-events/165792

    0
  21. 2223

    I have just developed a Facebook Comments plugin that now handles the new commenting system. Check it out:

    http://pleer.co.uk/wordpress/plugins/facebook-comments/

    0
  22. 2324

    Judith E. Austin

    March 25, 2011 10:38 am

    Interesting approach, although it does look a little complicated frankly, it’s taken me so long to get a handle on WordPress already lol! It’s always useful to have a step by step “how to.” I found this one “How to: Facebook Business Page” pretty useful ;)
    Thanks again Thiemo.

    0
  23. 2425

    Very interesting post! :)

    0
  24. 2526

    Steve Frechette

    May 15, 2011 6:32 am

    thanks for the article. Useful.

    0
  25. 2627

    Another great plugin for this, believe it may have been released after your post is MOWFB. http://www.mowfb.com

    It allows you to run your wordpress pages in facebook simultaneously with 2 themes running on one set of content. really cool. I have it running on a few sites and it works great! only took me around a hour to get it all setup.

    0
  26. 2728

    Thanks for such a great post.
    Really Helpful

    0
  27. 2829

    Aaron Collegeman

    August 20, 2011 5:05 am

    Here’s another good one for Facebook integration. It works much like the one described in this article, but is somewhat less complex.

    http://wordpress.org/extend/plugins/sharepress

    0
  28. 2930

    I apologize but this is so out of date now it isn’t even funny. If your looking for help with Facebook Apps try Schematical.com

    0
  29. 3031

    obesimed zararları

    May 24, 2012 4:19 am

    I feel this is one of the such a lot vital info for me. And i am satisfied studying your article. But wanna observation on some basic things, The web site taste is great, the articles is really excellent : D. Just right activity, cheers

    0
  30. 3132

    Thanks for the coverage Thiemo! Matt Kelly from Facebook here.

    We’ve worked with the WordPress community and released a plugin that allows you to have deep Facebook integration in just a couple of clicks. Check it out at https://developers.facebook.com/wordpress/. Let us know what you think at http://wordpress.org/extend/plugins/facebook/!

    0
  31. 3334

    Hi,

    Do you know if there is a way to migrate a current fan page to a new app enabled one with out losing all your fans etc.?

    Thanks

    0
  32. 3435

    thank you, i like the post.
    http://www.guiabomnegocio.com

    0

↑ Back to top