How to post to the Facebook wall in an iPhone app with phonegap, FaceBook Connect and ChildBrother plugin

Posting to the user’s wall is a very cool and efficient marketing strategy. The user can post on his wall his progress with a message promoting the app directly from an iPhone app.

It’s very fast and easy to add in phonegap, but the first time can be time consuming. After reading this post on the phonegap mailing
list and reading this post, I was a bit confused. With the following method, you don’t need to setup a server on Google App Engine, it’s very straight forward :

I will explain the process step by step, and at the end of this article, a demo iOS project is available for download.

Sorry for the bad formatting, unfortunately, I wrote this article in google document, and the resulting html code was horrible, I will never do that again.

Create your App in FaceBook

You need to register your app in facebook
:


http://developers.facebook.com/setup/

(Keep the ID of the app, it will be usefull for
later

Install ChildBrowser plugin:

This plugin can open an external URL directly
in the app.

  1. Download the childbrowser plugin from

    http://github.com/purplecabbage/PhoneGap-Plugins
  2. Put the file ChildBrowser.js and FBConnect.js
    inside the www folder
  3. drag and drop the files under
    ChildBrowser/iPhone/ to the /plugins folder on your xcode
    project;
  4. On XCode, right click on the plugin folder,
    and choose add existing files -> add all the ChildBrowser
    files :

Add JS files

In the FBConnect.js file, there is no function
to post to the user wall. So you need to add the following
functions :

FBConnect.prototype.postFBWall = function(message, urlPost, urlPicture, callBack)

{

console.log(‘inside postFBWall ‘+message + ‘ urlPost=’+urlPost + ‘ urlPicture=’+urlPicture);

var url = ‘https://graph.facebook.com/me/feed?access_token=’ + this.accessToken+’&message=’+message;

if (urlPost) {

url += ‘&link=’+encodeURIComponent(urlPost);

}

if (urlPicture) {

url += ‘&picture=’+encodeURIComponent(urlPicture);

}

var req = this.postFBGraph(url);

req.onload = callBack;

}

FBConnect.prototype.postFBGraph = function(url)

{

console.log(‘inside postFBGraph url=’+url);

var req = new XMLHttpRequest();

req.open(“POST”, url, true);

/*req.onreadystatechange = function() {//Call a function when the state

if(req.readyState == 4 && req.status == 200) {

alert(req.responseText);

}

};*/

req.send(null);

return req;

}

You also need to customize the connect function to ask the authorization to post to the user’s wall :

FBConnect.prototype.connect =
function(client_id,redirect_uri,display)

{

this.client_id = client_id;

this.redirect_uri = redirect_uri;


var authorize_url  = “https://graph.facebook.com/oauth/authorize?”;

authorize_url += “client_id=” +
client_id;

authorize_url += “&redirect_uri=” +
redirect_uri;

authorize_url += “&display=”+ ( display ?
display : “touch” );

authorize_url += “&type=user_agent”;

//if you want to post message on the wall : publish_stream, offline_access,

authorize_url +=”&scope=publish_stream”;


window.plugins.childBrowser.showWebPage(authorize_url);

var self = this;

window.plugins.childBrowser.onLocationChange =
function(loc){self.onLocationChange(loc);};

}

You need to add the ChildBrowser.js and the FBConnect.js in the www folder.

Then, you need to call include them in you index.html :

<!doctype html>

<html>

<head>

<meta charset=”UTF-8″ />

<title>Test</title>


<script type=”text/javascript”
src=”lib/json2.js” charset=”utf-8″></script>

<script type=”text/javascript”
src=”phonegap.js” charset=”utf-8″></script>

<script type=”text/javascript”
src=”ChildBrowser.js” charset=”utf-8″></script>

<script type=”text/javascript”
src=”FBConnect.js” charset=”utf-8″></script>

Connect to Facebook within the app

in your html, you can add a button that will share your message on Facebook:

<div class=”button facebook”>Share on Facebook</div>

And in your javascript file, you can register this button :

$(‘.facebook’).click(function() {

shareOnFaceBook(“This message will be posted on the user wall”, “http://www.mydomain.com/myImage.png”, “http://www.mydomain.com/”)

});

And you also need to customize and add this
function in your javascript:

/**********************

FaceBook Share

**********************/

// this function share the article on facebook

// text : the text to share

// image : the image to display near the link

// url : the url of the article

function shareOnFaceBook(text, image, url) {

var client_id = “XXXXXXXXXXXXXX”;//TODO customize your FaceBook AppID : http://developers.facebook.com/setup/

var redir_url = “http://www.facebook.com/connect/login_success.html”;

navigator.notification.activityStart();//Phonegap function to show a waiting message

if (typeof fbPlugin === ‘undefined’) {

console.log(‘install FBConnect’);

fbPlugin = FBConnect.install();

}

fbPlugin.connect(client_id, redir_url, “touch”);

fbPlugin.onConnect = function() {

console.log(‘onFBConnected id=’ + window.plugins.fbConnect.accessToken);

window.plugins.fbConnect.postFBWall(text, url, image, function() {

console.log(‘inside callback after postFBWall’);

alert(‘Successfully shared on Facebok (check your status)’);

navigator.notification.activityStop();//Phonegap function to hide a waiting message

});

};

}

Sorry again for the aspect of this post, next time, i promise, I will code myself the html code (never trust google doc for HTML).

And that’s it. It should be working. If you want a working example, I have build a quick and dirty iOS project in
a zip file with a sample phonegap project with this shareOnFacebook feature.

Download the sample FaceBook iOS XCode Project


Leave a Reply

Your email address will not be published. Required fields are marked *