PlumberSurplus.com Ecommerce and Entrepreneurship Blog | About | Contact | PlumberSurplus.com Store

Customized Facebook Publishing: Difficult but Doable

Posted on June 16, 2010 by Trevor

In a previous article I discussed integrating your site with Facebook Connect. Unfortunately, shortly after I wrote that article Facebook rolled out their new Graph API and related technologies that made Facebook Connect largely obsolete. There are some valuable features of the new API, but in many cases it will require a rewrite. Today I'd like to discuss publishing to Facebook. As before, I'll try to keep it conceptual, but it will get technical. If you aren't interested in the technical details, the takeaway is that customized Facebook publishing is difficult but doable. 

Below is an example of the Facebook Like Button on one of our retail websites, PlumberSurplus.com:

Facebook Like Example on PlumberSurplus.com

 

There are three general ways you can insert items into your visitor's feed (or "wall"). First there is the new Facebook Like button.  This is good for basic stream items, but gives very little control over formatting. Second, there is the FBML Share button.  It gives a moderate amount of control over formatting of the item in the feed, but not much over the formatting of the button itself. Finally, there is the API publish function, which gives good control of the formatting of the item but doesn't provide any default formatting, meaning you will have to build it by hand. Details on the first two methods are relatively easy to find, but the third is quite difficult.

The first thing to do to publish to a Facebook feed is to provide the visitor a way to initiate a post. It is possible to post directly to the feed without waiting for the visitor, but that usually creates a bad experience. Instead, we'd like a button similar to the Like or Share buttons Facebook provides, but allowing us more control. Facebook doesn't provide a customizable button, but we can create our own by using Facebook's CSS classes (note that you will have to initialize Facebook on your page before you can do this, a process I won't go into here). To make a link look like a Facebook button, add the classes "fb_button" and "fb_button_small" to the link, and wrap the link's text in a span with the class "fb_button_text". Then set the link to call a Javascript function when clicked (this function is where we'll publish the post).

Now, we need to publish the post. But first, we have to make sure the visitor is logged into Facebook and has given us permission to make posts. According to Facebook's documentation we should simply be able to make a posts to a user's feed using the Graph API; however, that function contains a bug so that if the post fails for any reason, we won't be notified, and nothing will happen. This would be a bad user experience. So instead we have to check the login and permissions first, and then post. To do that, we use the FB.getLoginStatus function, which returns details about the visitor's facebook login (if they are logged in, of course). If they aren't logged in, we can prompt them to log in (and get the right permissions to post) using the FB.login function.  As a side note, if you have implemented some sort of auto-login by subscribing to events, you may need to turn that off when you call the login function to prevent it navigating away from the page. If you don't understand that, it probably doesn't apply to you.

We're almost done, but there's one more issue. There is another bug in the "FB.getLoginStatus" function so that it doesn't always return the right permissions. To get the real permissions, we need to use FQL to query Facebook's permissions table and make sure we have the "publish_stream" permission (note that there are many undocumented permissions in this table: they are in the documentation. If not, we'll have to send them back to the login prompt to make sure we get it. If we do have permission to post, then we can finally make the post to our visitor's feed.

To post, call the FB.api function on the visitor's feed ("/me/feed"). You can pass in a JSON object containing the message, picture, link, name, and description you want posted, and it will show up as if the visitor had made the post. Finally, you should display some sort of notification to let the user know the post was successful.

To recap:

  1. Turn your link into a button using the "fb_button", "fb_button_small", & "fb_button_text" CSS classes.
  2. Find out if the visitor is logged into Facebook using the "FB.getLoginStatus" function. If not, prompt them with the "FB.login" function.
  3. Find out if the visitor has given permissions by querying the FQL "permissions" table. If not, prompt them with "FB.login".
  4. Post to "/me/feed" using the "FB.api" function. If successful, notify the visitor.

Whew! That was complicated, but hopefully it will give you a starting place when creating your own custom Facebook buttons. As always, feel free to respond if you have any questions or comments.

 


There are countless possibilities when remodeling your kitchen. Blend style and innovation with a pull out kitchen faucet, upgrade your design with a modern stainless steel Kitchen Sink, help conserve your food waste with an InSinkErator garbage disposer and keep your kitchen free of smoke and odors with Kitchen range hoods.

blog comments powered by Disqus