These Days Labs

How to use Facebook’s Stream.Publish method on browsers with popup blockers. See a demo.

What is the problem?

Recently many Facebook developers have been frustrated by popup blockers preventing the Stream Publish dialogue box from being displayed. If a user hasn’t logged in and authorised the application, dialogue boxes are shown in a popup window instead of an iframe. That’s fine for some visitors, but for those who have a popup blocker enabled, it means that they won’t see the dialogue box and therefore can’t publish a post into the stream.

The Stream Publish dialogue being displayed in an iframe.

The Stream Publish dialogue being displayed in a popup window. Popup blockers will prevent this from opening.

What causes it?

Previously popup blockers didn’t cause any problems for the Stream Publish method because all dialogue boxes were displayed with an iframe rather than a popup window. But in mid-May Facebook discovered that this exposed users to a clickjacking security vulnerability. To address the security problem, dialogue boxes are now shown in a popup window instead of an iframe for users who are not logged in or haven’t authorised the application making the request. According to Facebook, this change is here to stay.

Technically, popup blockers shouldn’t block popup windows that are opened intentionally by the user, for example by clicking on a link that says "Publish this to your profile". Unfortunately however, Facebook have implemented their Stream Publish method in such a way that the relationship between the user action and the popup window being opened is not direct enough. The onus is on Facebook to fix this, but in the meantime, there is a workaround.

The workaround

While not documented by Facebook, it is very easy to construct a URL for the Stream Publish dialogue box. To publish the news feed story, the user simply has to click a link pointing to this URL. Here’s one I prepared earlier. You can construct the URL with your programming language of choice, but I will demonstrate how it works with an ActionScript 3 example. (I have also provided a PHP example in the source download).

1. Defining the post parameters

First we define the parameters for the post, such as the title, link, caption and any media that we want to attach. The attachment and action_links objects follow exactly the same structure as the JSON objects used by the streamPublish method in the JavaScript SDK and the old REST API.

// An event handler which publishes a Facebook story when a button is clicked
private function clickPost(event : MouseEvent) : void {
    // Define the stream story parameters
    var attachment:Object = {
        'name' : "I've just played golf with Lexus at St Andrews.",
        'href' : 'http://apps.facebook.com/myapp',
        'caption' : "Win 2 x VIP tickets to the Open Golf Championships at St Andrews. Simply find the missing golf ball to win - it's quick and fun! Play now...",
        'media' : [ {'type' : 'image', 'src' : 'http://www.myapp.com/assets/share_image.jpg', 'href' : 'http://apps.facebook.com/myapp'}]
    };
    var action_links:Object = [
        {'text' : 'Find the Golf Ball', 'href' : 'http://apps.facebook.com/myapp'}
    ];
    var publishURL:URLRequest = StreamPublish.publishStoryLink('YOUR_API_KEY', attachment, action_links, TopGoals.APP_TAB_URL);
    // Open the URL and Facebook's dialogue box will be displayed
    navigateToURL(publishURL, "_blank");
}

2. Generating the URL

This static method takes the parameters we defined in the previous step and encodes them into a URL. It uses the JSON class from Mike Chambers’ as3corelib project.

package com.thesedays.facebook {
    import flash.net.URLRequest;
    import com.adobe.serialization.json.JSON;

    public class StreamPublish {
        
        /**
         * Generate a URL for displaying the Stream Publish dialogue.
         *
         * @param api_key The API key of your application - you must create an application to call this method.
         * @param attachment An object containing the post text, links, media, etc.
         * @param action_links An object containing actions links of text and hyperlinks.
         * @param next The URL to open after the user has published the post or cancelled it.
         * @param locale The locale code to display the Facebook interface with, for example en_US, fr_FR or nl_NL. It is generally best to leave this parameter as null because then Facebook will determine the language based on the user's browser and session.
         */
        public static function publishStoryLink(api_key:String, attachment:Object, action_links:Object, next:String, locale:String = null) : URLRequest {
            var url:String = 'http://www.facebook.com/connect/uiserver.php' +
            (locale ? '?locale=' + locale + '&' : '?') +
            'api_key=' + api_key +
            '&method=stream.publish' +
            '&channel=' + escape('http://www.facebook.com/xd_receiver_v0.4.php') +
            '&extern=1' +
            '&attachment=' + escape(JSON.encode(attachment)) +
            '&action_links=' + escape(JSON.encode(action_links)) +
            '&display=popup' +
            '&next=' + escape(next);
            return new URLRequest(url);
        }
    }
}

Download the source from this example.