Facebook Javascript API - Post to wall - FB JS SDK

Working with the Facebook JS SDK I was having problems using the FB.ui to log the user is, and post a message to their wall. Main error was 'Permission denied to access property 'Arbiter'.'. I tried many different things such as developing this on a website that could be accessed from external sources, but the problem wouldn't go away.


So I wrote some code that used FB.login and FB.api, though after login/permission acceptance it would leave the XD Proxy window open on a blank page. Below is my code which will handle the XD Proxy window, login, permission acceptance and post to their wall, even on your local environment without external sources being able to access your site.


First we install the FB API

<script>
 window.fbAsyncInit = function() {
   FB.init({
     appId      : facebookAppId,
     channelUrl : 'http://'+ window.location.host +'/channel.html',
     status     : true,
     cookie     : true,
     xfbml      : true,
     oauth      : true
   });
 };

 (function(d){
    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
  }(document));
</script>

Next we want to setup the function to handle the login/permissions.

function FBShare(title, link, picture, msg, caption) {
   FB.login(function(data) {
     postFBMsg(title, link, picture, msg, caption);
   }, {scope: 'publish_stream'});
 }

Here I call FB.login, setting scope to publish_stream which once the user is logged in will ask for permission to allow my app to publish to their wall.
Once login is complete and they have accepted my permissions, we call postFBMsg.

function postSocialMsg(title, link, picture, msg, caption) {
   var body={
     message: msg,
     picture: picture,
     link: 'http://'+ window.location.host +'/'+ link,
     name: title,
     caption: caption
   }

   FB.api('/me/feed', 'post', body, function(response) {
     if (!response || response.error) {
       // Error
     } else {
       // Successful
     }
   });
 }

Here I set the body var to contain our Facebook Wall Post details, we have the title(Don't Worry Be Happy) which will be linked to link, we have picture(Guy Sebastian pic), msg(Wall Post Message) which will appear under the Username(John Smith), title and caption(Guy Sebastian) which will appear under our Message to the right of the picture. If no Caption is sent it displays the link URL instead.


The final piece to our puzzle is to handle the closing of the XD Proxy window after login. It posts back to the calling window after actions are performed, I setup an event to capture these messages and close the window once it receives one. If you already are using postMessage between windows, you'll need to setup a conditional statement to only close the window if it's a Facebook message.

 $(window).bind('message', function(e) {
   e.originalEvent.source.window.close();
 });

So once we get a message via postMessage we close the window of the message sender.


This is how I'm doing it in my local development environment, inaccessible to the outside world, if you spot and flaws, or know of a better way of doing things please leave a comment.

Source : http://www.sacah.net/2012/02/facebook-javascript-api-post-to-wall-fb.html