Post to Facebook Stream.Publish from Javascript API

publish-to-wall

Problem Context: I wanted to make a ‘post this to Facebook’ button for a page on my site. The page is uniquely generated by django, and therefore has its own slug variable, but this can be easily modified for PHP or static implementation. I first tried to use the new Open Graph API from the official Facebook Python SDK, but this required users to grant my app permission to post to their wall. This has two reasons for being an unsuitable candidate: 1) users would have to grant my App permission. I hate granting Apps permission on Facebook. 2) My App would then be authorized to make posts on behalf of the user whenever, a power I do not want my App to have.

Solution: use the Javascript SDK to ask a user for permission to write to their wall one time, without having to permanently authorize my App.  The Javascript SDK provides access to all of the Graph API, a much simpler and cleaner solution.

Code: I began with a Javascript method responsible for making the actual post.

<script>
<!--
function publishWallPost(slug) {
    var attachment = {'name':'My Super Cool Website','description':'This is a test of the Facebook Broadcast System.  If this was real, you would be reading something useful.','media':[{'type':'image','src':'http://MySuperCoolWebsite.com/images/facebook_image.png','href':'http://www.MySuperCoolWebsite.com/' + slug + '/'}]};
    FB.ui({
        method: 'stream.publish',
        message: 'I just found this Super Cool Website!',
        attachment: attachment,
        user_message_prompt: 'post this to your wall?'
    });
}
//-->
</script>

The attachment variable is used to tell Facebook what you would like to publish. Fill this in according to your needs. Since I wanted to be able to send users to a specific page on the Super Cool Website, I send the page slug as an argument to the publishWallPost().

Next we must load the Javascript SDK from Facebook servers.  This provides access to the FB.ui()  It is loaded Asynchronously, as per the directions from Facebook.

<script>
window.fbAsyncInit = function() {
    FB.init({appId: 'Your Super Cool App ID', status: true, cookie: true, xfbml: true});
        };
    (function() {
        var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());
</script>

Now we just need something to fire off the publishWallPost(Slug).

<a href="#" onclick="publishWallPost('{{ page.slug }}')"> Post to Facebook </a>

The “Post to Facebook” can be replaced with whatever you like, including an image. On click, the publishWallPost() will be called, passing in the slug from django for the page the user is on. If you are using PHP, you can modify the slug argument to pass in a slug from WordPress or any other generated slug. If you want all posts to link to a single page, just remove the slug variable from both the OnClick event listener and the publishWallPost()

This entry was posted in Facebook and tagged , , , . Bookmark the permalink.

One Response to Post to Facebook Stream.Publish from Javascript API

  1. chaitsi says:

    hi…i have used the same.works perfect ..but when auto_publish set to true, even after that it asking me for publish, which should not happened…i have set permission to publish_stream as below

    can anyone tell me what’s the error ??

Leave a Reply