Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Facebook Graph API Facebook Publish To Wall With Popup Or Dialog And Call Back

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

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>
Example Publish To Wall With Dialog

Example Publish To Wall With Dialog

Sep 8, 2011 Hoan Huynh

Source Code Demo page

How To Delete Application In Facebook DevelopersHow To Track Website With Multiple Google Analytisc Accounts
You Might Also Like:
  • Facebook Publish To Wall With External Link And Track Callback
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
  • Facebook Removed View App Profile Page link For New Apps
  • Facebook Like Button And Recommend Button With fb:like, iframe and html5
  • Get Image Width Height With JQuery And JavaScript
  • PHP Change Facebook Profile Picture With Graph API
  • PHP Call Web Service WSDL Example
  • How To Ask People To Like Your Facebook Page On The Landing Page
  • How To Track Website With Multiple Google Analytisc Accounts
  • JQuery How to use DatePicker
  • 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?

Hoan Huynh

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

7 years ago Facebook Graph APIFacebook, Facebook Connect533
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
16,466 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
12,284 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
11,623 views
JQuery Allow only numeric characters or only alphabet characters in textbox
9,611 views
PHP Call Web Service WSDL Example
6,451 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Magento Fatal error: Unsupported operand types
  • Ionic bower the name contains uppercase letters
  • PHP Magento Get Manufacturer Name And ID From Magento Product ID
  • Know Simple Hacks To Systematize Media Library in WordPress
  • A handy guideline on adding custom menu item in WordPress admin
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (26)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (140)
EMAIL SUBSCRIPTION

Sign up for our newsletter to receive the latest news and event postings.

Recommended
  • CDN
  • Hosting
  • Premium Themes
  • VPS
2014 © 4 Rapid Development