It’s a pretty common feature to allow a user to share something to their Facebook wall within your application. Usually to brag about a high score, tell their friends what they are listening to or some other way that they have used your application and feel strongly enough to tell their friends about it. This is desirable for you to facilitate for a few reasons:
- It allows users to feel more connected and engaged with your application
- Their friends will be exposed to your application
- Facebook activity can lead to more downloads through the Facebook App Center.
I’ve implemented a simple “post to my wall” feature in the past, but it seems the JavaScript SDK that Facebook offers has since changed a little bit and it tripped me up for a little while. This post will show you how to implement the Facebook wall post functionality using PhoneGap. I’m assuming you have already set up the Facebook Connect plugin within your application and have set up your application appropriately through developer.facebook.com. If you’re interested in a more in-depth walk through of integrating Facebook and more advanced features you should have a look at my eBook.
Changes to the Facebook JavaScript SDK
There where a couple of things that have changed since the last time I implemented this, one of which was the parameters which could be passed to the wall post function. It wasn’t until I came across this post on StackOverflow that I had the “Oh…” moment:
"Pre-filling the message parameter does not work any more – Facebook removed that a long time ago.
You are not supposed to pre-fill any text when sharing on Facebook – the message should be typed in by the user themselves.
If you really want to do this, you have to make a post via API in the background – which of course requires the user to connect to your app and give adequate permission. And even then you are not supposed to post a message that the user did not type in themselves into a form somewhere – and Facebook easily figures out if your app posts the same (or largely similar) messages for different users, and that will limit visibility of your posts drastically, and could even lead to your app getting blocked." – CBroe
So you can not pass in a pre-filled message for the user to post. This was a shame since I wanted to pre-fill their time, speed and distance for them to brag about on Facebook. It is also worth noting that should you go down the route of requesting publishing permissions for a user, the permission request must be made in two separate calls. That is, first you must call the login function with a scope of ‘basic_info’ and you must then later call the login function again with the scope of ‘publish_stream’ or similar. If you try to request both at the same time it will not work, the user will have to be switched to the Facebook application and grant access twice in order to do this. It’s recommended that the two switches are not done in immediate succession.
Posting to a users wall…
This is a really simple example so I’m going to post the code below and then talk through it afterwards. This is the function we want to call to trigger a Facebook post:
facebookWallPost: function() {
FB.getLoginStatus(function(response) {
if (response.authResponse) {
FB.ui({
method: 'feed',
link: 'http://runtap.com',
caption: 'RunTap',
}, function(response){});
}
else {
FB.login(function(response) {
if (response.authResponse) {
FB.ui({
method: 'feed',
link: 'http://runtap.com',
caption: 'RunTap',
}, function(response){});
}
}, {scope: 'basic_info'});
}
},true);
}First we are checking if the user has already authenticated your application through Facebook. If they have, we call the wall post function immediately, which is made up of:
FB.ui(
{
method: 'feed',
link: 'http://runtap.com',
caption: 'RunTap',
},
function (response) {}
);Previously I had a ‘message’ parameter in there as well but this has now been removed. If they have not already logged in then we trigger ‘FB.login()’ with the scope of ‘basic_info’ – this requests the minimum set of permissions. If the login is successful, we trigger the same FB.ui() method.
Now when this is triggered, the user will be switched out of your application to Facebook where they will either allow or deny access. If they grant access they should be switched back to your application and a window will pop up. This window will allow them to write their status and post it to Facebook. If you have included the ‘link’ and ‘caption’ parameters you will notice that a normal Facebook link to the URL will be provided along with their status.
Let me know if you have any trouble in the comments below. If you’re already implementing Facebook in your application, what have you done and has it been benefiting you?