Facebook Publish To Wall With Popup Or Dialog And Call Back
Posted by in Facebook Graph API September 8, 2011 9 Comments

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://cdn2.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

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://cdn.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>
Example Publish To Wall With Dialog

Example Publish To Wall With Dialog

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at hoan@4rapiddev.com
  • Jalla Venkatesh

    When I click on the links, its showing “An error occurred. Please try again later” in popup dude..

    • http://4rapiddev.com/ Hoan Huynh

      Hi,

      You will need to replace my current Facebook ID with yours:

      ———————-
      FB.init({
      appId : ‘_your_facebook_id_here_’, // 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
      });
      ———————-

      • Jalla Venkatesh

        Thanks for reply,
        I replaced the Facebook ID with my ID, but its showing same Error.
        Would u plz help me…

      • Jalla Venkatesh

        If u dont mine Would u plz send the files to my email id plz
        my E-mailid : jalla.venkatesh gmail.com 

      • Jalla Venkatesh

        Would u pls send the Files to my mail, jalla.venkatesh@gmail.com

        • Hoan

          I already put the downloadable source code above, along with demo link.

  • Tanu

    when i am using it an error is coming.why is it so??do i have to attache other file

  • Rafael

    Hello, I have onde doubt…

    When you say:

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

    That means that I have to create a facebook app so I can do my sharing? What kind of app should I create??

    Thanks you very much!!

  • Absar Akram

    Hello Hoan,
    both pop up window and facebook dialog shows same behavior (a pop up
    window) . and when I came back here to see what’s up with the codes I
    found that your demo is doing same.
    How can we show a facebook dialog instead of new pop up window?