Javascript, Snippets, Tutorials

How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins

For iPhone / iPad (iOS)

Prerequsites
– Install ChildBrowser Phonegap plugin
– Copy FBConnectExample/FBConnect.js into your www folder and include it in your HTML file
– Read and follow the instructions from How to post to the Facebook wall in an iPhone app with phonegap, FaceBook Connect and ChildBrother plugin by MosaCrea

The Javascript(jQuery) code:

$('#share-facebook').live("touchstart touchend", function() {
	var url = $(this).attr("rel");
	try {
		shareonfacebook(" likes Web Development Blog by Ei Sabai.", "https://eisabainyo.net/weblog/wp-content/uploads/2010/11/profile-small.gif", url);
	} 
	catch(err) {
		console.log(err);
	}	
	return false;
});
function shareonfacebook(text, image, url) {
	var client_id = "xxxxxxxxxxxxx"; // Your Facebook Client ID
	var redir_url = "http://www.facebook.com/connect/login_success.html";

	if (typeof fbPlugin === 'undefined') {
		fbPlugin = FBConnect.install();
	}
	fbPlugin.connect(client_id, redir_url, "touch");
    fbPlugin.onConnect = function() {
	    window.plugins.fbConnect.postFBWall(text, url, image, function() {
			navigator.notification.alert(
				'Thank you for sharing on Facebook.',  
				function() {},         
				'Thank you',     
				'OK'                 
			);
		});
	};
}

For Android

Prerequsites
– Install Facebook for Android Phonegap plugin
– Copy facebook.js into your www folder and include it in your HTML file

The Javascript(jQuery) code:

$('#share-facebook').live("touchstart touchend", function() {
	var url = $(this).attr("rel");
	try {
		shareonfacebook(" likes Web Development Blog by Ei Sabai.", "https://eisabainyo.net/weblog/wp-content/uploads/2010/11/profile-small.gif", url);
	} 
	catch(err) {
		console.log(err);
	}	
	return false;
});
function postonfacebook(text, image, url, token) {
	$.ajax({
		   type: 'POST',
		   url: "https://graph.facebook.com/me/feed",
		   data: {
				message: text,
				picture: image,
				link: url,
				access_token: token,
				format: "json"
		   },
		   success: function (data) {
			   navigator.notification.alert(
					'Thank you for sharing on Facebook.',  
					function() {},         
					'Thank you',     
					'OK'                 
				);
		   },
		   dataType: "json",
		   timeout: 10000
	});
}
function shareonfacebook(text, image, url) {
	var client_id = "xxxxxxxxxxxxx"; // Your Facebook Client ID

	window.plugins.facebook.authorize(client_id, function(res){
		if (res.token !== undefined) {
			postonfacebook(text, image, url, res.token)
		} else {
			// call authorization method
			window.plugins.facebook.getAccess(function(res) {
				if (res.token !== undefined) {
					postonfacebook(text, image, url, res.token)
				}
			});
		}
	});
}

Usage (for both iPhone and Android):

<a href="#" rel="https://eisabainyo.net/weblog/" id="share-facebook">Share on Facebook</a>

One thought on “How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins

  1. In Android emulator
    I got “generic error occurred” in popoup win after launch the FB plugin. Then if i press OK in dialog it display the logged user FB home page and nothing happens further inside popped win.
    Note: I use both a client id and an app id to configure authorize command.
    Also i’ve genereted the hash key for the debug view but error i still triggered.

    Using a workaround with childbrowser (launch a “proxy” page on remote server that do the job) is the only solution.

    Mork

Comments are closed.

Career Guide for Software Developers