Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

How To Integrate Facebook With WordPress

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 Link

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.

Plug-In Installation and Configuration Link

John Eckman developed the WordPress plug-in Wordbook1 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 FreigeistBlog) and one at the original URL (http://freigeist.devmag.net2).

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 example). 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 application3. 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 application4
Settings for the Facebook application. Large view5.

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 definieren6
Facebook application settings: Define callback URLs. Large view7.

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 page8
Facebook application settings: Define canvas page. Large view9.

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 method10: 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 Facebook11
Browsing through the blog via Facebook. Large view12.

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 Link

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 OpenID13 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-in14, 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.es15
Facebook Connect implemented on (in Spanish)

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

Plug-In Installation and Configuration Link

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

Create a new Facebook Application16
Creating a new Facebook application. Large view17.

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

Defining callback URLs for the new application18
Defining callback URLs for the new application. Large view19.

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 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-in20
Settings for Facebook Connect WordPress plug-in. Large view21.

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 settings22
Adjust Facebook Connect’s template settings. Large view23.

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 (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 sidebar24
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 is quite a nice one.

Further Resources Link

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 Type25
    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-FacebookConnect
    This plug-in is quite similar to the one on 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 tutorial by the developer Adam Breckler.
  • WordPress Fotobook26
    With this WordPress plug-in, you can import all of your photo albums from Facebook onto a WordPress page.
  • Drupal’s Facebook Connect module27
    With this Drupal module, you can allow Facebook users to connect to your blog through their account. Similar to the plug-in by
  • Gigya WordPress plug-in
    This plug-in integrates not only Facebook but Twitter, MySpace and other OpenID providers into your blog for community building.
  • StatusPress28
    This small plug-in displays your Facebook, Twitter or status on your blog.
  • Quailpress29
    Integrate Facebook-sharing functionality on your blog with this plug-in. However, it has not been actively developed for some time. And with the plug-in, it is practically redundant.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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.

  1. 1

    I enjoy reading articles on this site, but pleeaassee stop posting about WordPress again and again, it gets kinda annoying. I know there enough to say about WordPress, but to me, it more and more looks like you’re just endorsing WordPress..

    Just my 2 cents, but keep making those good articles about other subject ;-)

  2. 2

    nice and useful article ;-)

  3. 3

    It’s all great, but I miss only one little thing: Cross-posting comments on Facebook notes to original post? I saw a plugin for that but it hasn’t been updated in ages, still looking for a solution. Some of my site’s viewers have an ugly habit of commenting the news only on Facebook.

  4. 7

    Nice… I am going to check this out in depth

  5. 8

    Nice, but doesn’t this basically duplicate your content? How is SEO affected? Do search engines crawl these twin posts on Facebook?

    Cause if they do, then Facebook is regarded higher than your personal blog for sure – and this would be a problem…

    I would appreciate if someone can share thoughts on this :)

  6. 9

    As far as the duplicate content issue, the SEs should not crawl the FaceBook version because the content requires a user to be logged in to view the blog.

  7. 10

    please tell me that if there’s an app called wordbook then there is also an app called facepress…

  8. 11

    @ryan: good one!

    @Cosmin – i think robb is right, because the application needs to be added it is not visible to users who havent authorized access.

  9. 12

    robb, Thiemo : thanks for the answers :)

  10. 13

    Why would I want to? Facebook is an attentionwhoring timesink like no other. >:[

  11. 14

    I have being researching the option for Users to login using Facebook for a while, I came across, I had a few difficulities installing but I am going to give it ago again as you have given more info :)

    I think the option to have people signin into your blog via Facebook is one of the best options I have heard of (For spreading your site)

    I have a few sites where if people can log in via facebook, the site will be more accesible, people know how to use facebook, meaning they will know how to comment and use your website.

    Thanks for the great article :)

  12. 15

    it is very useful

  13. 16

    great post, thanks for the info

  14. 17

    Have you investigated the details regarding the Zwinki advertisement? They install an annoying widget & I find it hard to believe that you endorse this site.

  15. 18

    Hi Thiemo Fetzer very nice tutorial for a seo as i am really finding a way to integrate my word press blog with facebook . I hope your article will be sufficient for me to achieve my task . Thanks for sharing your knowledge.

  16. 19

    Is there a way to disallow WPbook/Facebook from cross-posting all comments so to have only articles fed into Facebook?

  17. 20

    Useful article. Thanks!

  18. 21

    I’ve been looking for a tutorial like this for quite some time. Thanks for the effort. I know a few clients who are going to be happy to see their blogs integrated.

  19. 22

    @stuartflatt on twitter

    September 14, 2009 7:03 am

    You need to change your twitter networking button. Currently it just replies to @tweetmeme which means unless someone is following both you and them they will not see the post. I would add a RT or the reading first before the @.

    And that little tip my friends is free of charge ;)

  20. 23

    Wow, great article. I’ve been manually dropping my blog posts into Facebook, this will be a huge help! Thanks for sharing.


↑ Back to top