Posting to Facebook from website with Facebook Connect

This post is part of the Facebook Connect Tutorial and it will show how to add “post to wall” function to your community. Since every community is different, and since every community has different services we want to create a fbcpost.php file that can be connected to everything your users do. So we want to make a file that can be used for posting your users’ news on facebook, but also we want to re-use that file also for posting photos, forum threads and what ever your users can do.

Posting to users wall means posting objects like this on Facebook:


To do this we will change the normal stream of your codes from the red version to the blue version on the right of this flowchart (suppose you have a form that users use to post news):


Only 3 changes to your community:

  1. modify the form that post to add the chckbox visible only for facebook users
  2. change the page that receive data to handle the new checkbox, if posted
  3. add the fbcpost.php file that post to Facebook

STEP 1: modify your form that post data

So, suppose you have a form on your community where users logged in can post content (remember that we have already modified your community to handle Facebook users – see the turorial – because we need to know if user has a Facebook account).

If a user has a Facebook account connected (this means that you have the fb_userid field filled in the db as explained in the turorial), you can add a checkbox to the form, this checkbox tells something like: “check to post on your Facebook wall“.

STEP 2: handle the new checkbox

The page that receive data still keeps doing the same thing as before: save posted data, write to db, save picture, etc. etc., but if  the page has also received the checked checkbox that tells to post data to Facebook, then you have to create a new form with the items to be posted on the wall, so, create an HTML form and post it to the fbcpost.php page:

// ...
// before this do everything to handle normal post
// then, if checkbox checked output this html form:
if ($checkbox_is_checked) {
	<form id='postfb' method='post' action='/fbcpost.php'>
		<input type='hidden' name='t' value="<?=$title=>" />
		<input type='hidden' name='c' value="<?=$caption?>" />
		<input type='hidden' name='h' value="<?=$url_of_the_link?>" />
		<input type='hidden' name='d' value="<?=$description?>" />
		<input type='hidden' name='i' value="<?=$image_url?>" />
		<input type='hidden' name='al' value="<?=$action_link?>" />
		<input type='hidden' name='al' value="<?=$action_label?>" />
		<input type='hidden' name='callback' value="<?=$callback?>" />
	<!-- post the form automatically -->
	// when  you print this form your page change, so do not put any usefull code below
	// since this probably will not work as expected.

Those variables will be used by the fbcpost.php file to be putted here, on your Facebook’s wall:

The $callback variable is the url of the ending page of the flowchart, the page where you normally redirect user after saving posted data.

STEP 3: the fbcpost.php file

Here is the code that makes the job, there is something important that deals with Facebook permissions: since normally you can’t post to Facebook user’s wall without permission, this page has some javascript code that check for permission and if you have send the post, else it pops up the Facebook dialog box to ask the user for the missing permission.

There are different permissions: you can ask permission to send emails, to upload photos, to post on the wall and many more. Here we need the permission to post on the user’s wall, it’s called the “publish_stream” permission.

Read the code that is full of comments, and should explain by itself:

// this file includes FB_API_KEY and FB_SECRET constants and the ConnectDB function
// to connect to your mysql database.

// the php facebook api downloaded at step 3

if(!ConnectDB()) die;

$fb=new Facebook(FB_API_KEY,FB_SECRET);

// read the variables from the post, here
// you should add some check to avoid
// bad posts or attacks (at least strip tags
// and handle quoted strings).
$title = ($_POST['t']);			// title
$caption = ($_POST['c']);		// caption below the title, before the description
$url_of_the_link = ($_POST['h']);	// link of the url
$description = ($_POST['d']);		// some text that describe the object sent to facebook
$image_url = ($_POST['i']);		// image url (if exists)
$callback = ($_POST['callback']);	// callback url
$action_link = ($_POST['ah']);	// action link;
$action_label = ($_POST['al']);	// action label;

if(!$fb_user) {
	// If not a user on Facebook
	// redirect to the callback page
	// without posting anything.

<html xmlns="" xmlns:fb="">
	<script src="" type="text/javascript"></script>
<!-- on load do the job -->
<body onload="publish_with_permission('publish_stream');">
	I'm sending your stuff to yout Facebook wall.<br/>
	If it doesn't work you should give us the permission to publish streams on your wall.<br/>

<!-- do the job with javascript, and create the object to post through php vars -->

var action_links =  [{ 'text' : "<?=$action_label?>", 'href' : "<?=$action_link?>" }] ; 

var attachment = {'name' : "<?=$title?>", 
	'href' : "<?=$url_of_the_link?>", 
	'caption' : "<?=$caption?>", 
	'description' : "<?=$description?>"<?
		if($image_url) {
			echo ",'media' :[{'type' : 'image', 'src' : \"$image_url\", 'href' : \"$url_of_the_link\"}]";

function jscallback (post_id, exception) {
	// this javascript function is called
	// after the Facebook process and we use
	// it to go back to the correct page
	// where the post should end (the ending
	// page of the flowchart).
	if (post_id == null || post_id == undefined ) {
		// failed
	} else {
		// success

function publish_with_permission(permission) {
	// This function checks if user has permission, if not pops up the
	// Facebook dialog and ask for permission.
	// If permission is granted send without asking
	// anything, if permission is not granted pops up
	// and try to send again prompting for a comment.
	FB.ensureInit(function() {
			//check is user already granted for this permission or not
			function(result) {
				// prompt offline permission
				if (result == 0) {
					// show the facebook permission dialog
						if (!result) {
							// no permisson granted, pop up facebook dialog to post;
							FB.Connect.streamPublish('', attachment, action_links, null, "Post this:", jscallback);
						} else {
							// permission granted, post without facebook dialog
							FB.Connect.forceSessionRefresh(function() {
								FB.Connect.streamPublish('', attachment, action_links, null, "Post this:", jscallback,true);
					}, true, null);
				} else {
					// permission already granted, post suddenly
					// without facebook dialog
					FB.Connect.streamPublish('', attachment, action_links, null, "Post this:", jscallback,true);

<script type="text/javascript">  FB.init("<?=FB_API_KEY?>", "/xd_receiver.htm"); </script>

This file can be used to post everything on user wall, just define the variables to be posted in your pages where you want to post data.

Anything to say?