Facebook Publish To Wall With Popup Or Dialog And Call Back

This is just a demonstration on How to allow people post something to their Wall directly on your website with a Popup windows or default Facebook Dialog. After they submit a message or cancel the action, a call back function will be trigger do to something such as posting Ajax to update database to give them a reward or just show thank you message.

In this example, you need to load the Facebook Connect JS file and replace my Facebook Application ID with yours.

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
	window.fbAsyncInit = function() {
		FB.init({
		  appId   : '173129869824', // should be replaced with your Facebook Application ID
		  status  : true, // check login status
		  cookie  : true, // enable cookies to allow the server to access the session
		  xfbml   : true // parse XFBML
		});
	};
</script>

1. Example Publish To Wall With Popup Windows

<script type="text/javascript">		
	function streampublish_popup(){
		FB.ui(
		{
			method: 'stream.publish',
			attachment: {
				name: 'Demo Pulish To Wall With Popup And Call Back Function',
				description: (
							   "I have experienced with Share On Wall with Popup windows and would like to share with you. Check it now."
							),
				href: "http://4rapiddev.com/facebook-graph-api/facebook-publish-to-wall-with-popup-or-dialog-and-call-back/",
				media: [
					{
					'type':'image',
					'src':'http://4rapiddev.com/wp-content/uploads/2011/09/Example-Publish-To-Wall-With-Popup-Windows.jpg',
					'href':'http://4rapiddev.com/facebook-graph-api/facebook-publish-to-wall-with-popup-or-dialog-and-call-back/'
					}
				]
			},
	        display: 'popup'
		},
		function(response) {
		    if (response && response.post_id) {
				alert('Post was published with post_id:' + response.post_id);
			} else {
				alert('Post was not published.');
			}
		});
	}
</script>

Example Publish To Wall With Popup Windows

2. Example Publish To Wall With Dialog

<script type="text/javascript">	
	function streampublish_dialogs()
	{
		FB.ui(
		{
			method: 'feed',
			name: 'Demo Pulish To Wall With Dialog And Call Back Function',
			link: 'http://4rapiddev.com/facebook-graph-api/facebook-publish-to-wall-with-popup-or-dialog-and-call-back/',
			picture: 'http://4rapiddev.com/wp-content/uploads/2011/09/Example-Publish-To-Wall-With-Dialog.jpg',
			description: 'I have experienced with Share On Wall with Facebook Dialog and would like to share with you. Check it now.'
			},
			function(response) {
				if (response && response.post_id) {
					alert('Post was published with post_id:' + response.post_id);
				} else {
				  	alert('Post was not published.');
				}
			}
		);
	}
</script>