Integrating Facebook like and share with Callback function

Hello Readers,

Consider you have a situation where you have to include Facebook like and share into your web application, and also you have to insert the user details in the database after a user likes or share your web page content.

Facebook provides code for like and share when you register as a developer. Visit this link (https://developers.facebook.com/) and register as a developer. You have to login to your normal facebook account and allow access in the permissions dialog box.

Step 1:

  • Fitst step is to, create a new app
  • Select Add a new app from Apps option from Menu

developers

Step 2:

  • Select Website from the option
  • Because we are going to implement facebook like and share in our website.

step2

Step 3:

  • Enter the name of your App
  • Click on Create new facebook app ID button

step3

Step 4:

  • Select No for the testing app option.
  • Select the category of your app.

step4

Step 5:

  • That’s it. You have successfully created a facebook app.
  • Now you will be given a script with your app id like this.
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'XXXXXXXX',   // Your App ID 
          xfbml      : true,
          version    : 'v2.1'
        });
      };
    
      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>
    
  • Enter the url of your website, which is very important.
  • step5

    Step 6:

    For Liking the post.

    Add this line to your “<html>” tag.

    <html xmlns:fb="http://ogp.me/ns/fb#">
    

    Now, copy and paste the following code in the place where you want your like button.

    <fb:like href="http://www.geeks.gallery/" layout="standard" action="like" show_faces="true" share="false"></fb:like>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=879658452063499&version=v2.1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>
    <script>
    window.fbAsyncInit = function() {
    	FB.init({
    		appId      : 'xxxxxxx',
    		xfbml      : true,
    		version    : 'v2.1'
    	});
    	FB.Event.subscribe('edge.create', function(response) {
    		// like clicked
    		$.ajax({
    			url: "path of a php file in server to insert user data in your database",
    			type: "post",
    			data: {type:'like',uid:'login session user id'},
    			success: function(data){
    			 // On successful Response.
    			},
    			error:function(){
    			// On Error.
    			 }   
    		}); 
    	});
    };		
    </script>
    

    Step 7:

    For sharing the post:

    Add this line to your “<html>” tag.

    <html xmlns:fb="http://ogp.me/ns/fb#">
    

    Code for sharing the app with callback function is

    <a href="#" onclick="shareonfacebook()"><img src="images/facebookshare.png" /></a>
    <script>
    	function shareonfacebook(){
    		FB.init({
    			appId      : 'xxxxxx',
    			xfbml      : true,
    			version    : 'v2.1'
    		});
    		var product_name   = 	'Geeks Gallery';
    		var description	   =	'Tech stuffs from Geeks';
    		var share_image	   =	'http://www.geeks.gallery/logo.png';
    		var share_url	   =	'http://www.geeks.gallery';	
    		var share_capt     =    'Free tutorials on Web Technologies like PHP, WordPress, CodeIgniter, HTML, CSS, javaScript, jQuery and Mobile Applications like Android';
    		FB.ui({
    			method: 'feed',
    			name: product_name,
    			link: share_url,
    			picture: share_image,
    			caption: share_capt,
    			description: description
    		}, function(response){
    			if (response === null) {
    				console.log('was not shared');
    			} 
    			else {
    				$.ajax({
    					url: "path of a php file in server to insert user data in your database",
    					type: "post",
    					data: {type:'share',uid:'login session user id'},
    					success: function(data){
    					 // On successful Response.
    					},
    					error:function(){
    					// On Error.
    					 }   
    				}); 
    			}
    		});
    	}
    </script>
    

    That’s it. We have successfully implemented facebook like and share with callback function into our web application. The result looks like

    likeandshare

    Other important steps to consider is that, after integrating facebook like and share, only the developer can like and share with his registered facebook account. Other users cannot like and share. They will be shown an error message as “An error occurred, Try again later!“. This happens because your facebook app is in Sandbox mode. By default the app is in testing mode when you create an app. After implementing it and testing it, you have to change it to production (Public) mode, for others to use. To do this,

    • Add your contact email by clicking on the settings tab
      step6
    • Click on Status & Review tab, and choose “Yes” for Do you want to make this app and all its live features available to the general public? option on top
      step7

    That’s it. We made it.

    Thanks for reading.

    Feedback are welcome. Please feel free to ask questions.

    Don’t forget to subscribe to Geeks.Gallery, to get free emails to your inbox.

    Subscribe to Geeks.Gallery

    Nagarajan
    Follow me

    Nagarajan

    Web Developer at Energy Alternatives India
    I'm interested in developing Web applications andkeen on learning new technologies.

    View Nagarajan's Profile
    Nagarajan
    Follow me

    Latest posts by Nagarajan (see all)

Comments
  1. Aishwarya Taneja

Leave a Reply

Your email address will not be published. Required fields are marked *