Publishing to Facebook using Facebook Connect

by Blake Schwendiman on April 1, 2009

In order to get a frame of reference for this post, you’ll need to read Integrating Facebook Connect using the Thesis theme. That article briefly describes the method for creating a new Facebook Connect application and the files required to set up the basic framework for a Facebook Connect integrated site.

Assuming your site is ready to go, it’s relatively straightforward to provide a custom notification popup for your users to post information about your site to their Facebook profile. For example, the following link is an implementation of this concept. Click the link to see the popup form (you will be prompted to login to Facebook and approve the message before any data is sent to Facebook).

Note: after you close the Facebook dialog, you should see a different message above.

The code for this is amazingly simple:

[-]?View Code JAVASCRIPT
FB.Connect.showFeedDialog(
  60885219929, {}, null, null, null, FB.RequireConnect.promptConnect,
  function() {
    jQuery('#fb_demo_publish').html('<p class="highlight">You have closed the Facebook notification dialog. Unfortunately there is no way currently to know if you posted a messasge or not, so we have to display a generic message.</p>');
  },
  'What do you think of this blog?', {value: 'Great blog!'});

In this example, I am providing the very simplest implementation of showFeedDialog. The first parameter is a template bundle ID generated by Facebook. Every message that you want to post from your site to Facebook has to be registered as a feed template. Assuming you’re a registered Facebook developer, you can register a feed template here: http://developers.facebook.com/tools.php?feed. The process is very simple and will be discussed in detail in a follow-up post.

This sample uses no custom fields, so the second parameter is an empty Javascript object. Following that are three null parameters (I’m saving that for the next example), then there is a callback function that updates the page when the dialog is closed. Finally the last two parameters provide the display question and some sample text (end-user editable).

My reasoning for providing such a simplistic example is to provide a basic framework for using the showFeedDialog function. I want you to see that it is very simple to get started — without getting bogged down in all of the options right away. In the future I will detail the process of setting up a feed template, using the template_data parameter and provide more information about the other showFeedDialog parameters. Subscribe to my blog feed to make sure you don’t miss the follow-up posts.

See the Facebook Connect documentation for full details about the showFeedDialog function.

Comments:

Comments on this entry are closed.