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


How to build a web application (database front end) quickly and without programming knowledges ?

As I am a developper, I like to program myself web apps (in PHP, J2EE, or JBoss Seam), but sometime, we don’t have the time to build it by hand, even with Ruby On Rail (RoR).

There are solution to automatically build a web app from a database schema, and without code generation :

Oracle Application Express

The most famous is Oracle Application Express. APEX is a rapid web application development tool for the Oracle database.  Using only a web browser and limited programming experience, you can develop and deploy web applications.

Advantages :
– Very quick and easy, no programming knowledges for a basic database front end. And SQL, javascript, PL/SQL for advanced customisation
– Free (no cost) with Oracle XE (but RAM limited to 1Gb, disque space to 4Go, and one CPU)
Disadvantage :
– Only for Oracle DB
– can’t be hosted on a classic LAMP server

Xataface

Xataface is an open source PHP framework for building PHP/MySQL applications in less time that with fewer lines of code that do more.
Advantage :
– Very quick and easy (perhaps not as APEX), no programming knowledges
– Free and open source (GPL)
– Works with most of hosted server (PHP, MySQL)
Disadvantage :
– Looks a little beta for now (october 2009)
– less features than APEX..

I have some experience with APEX, and I will test Xataface in details soon. Do you know others solutions like that ? What’s your experiences with it ?