How to implement facebook share in web application

In this post, we will see how to share the website content in facebook.

STEP 1: Get a Facebook App ID for the domain
We should have an facebook account and developer account to get the app id.
To implement Share Button to your website, Facebook requires that your domain have an “App ID” a unique identifier which connects the user with your domain.

Follow this URL to create your app id. Fill the app details as shown in the below screenshot.

image1

Once the App is created is successfully, you will be redirected to dashboard page as shown below. Here you find you newly created APP ID for you Facebook application. Check below screenshot to get you APP ID.

image2

Now you have to give your domain url and app domain name as shown in the screenshot.
image3

Once it is done, make your app as public.
image4

STEP 2: Add the Facebook JavaScript SDK to your Web page.
Here is the code which has to be included in the head section of your HTML Page.

 
<script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR APP ID', 
status: true, 
version: 'v2.7',
xfbml: true});
};
(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> 

NOTE: Make sure you replace ‘YOUR APP ID’ with your actual App ID for your website.

STEP 3: Add jquery code function to display share dialog box on click event.

 
<script type="text/javascript">
$(document).ready(function(){

$('#shareFb').click(function() {      
            FB.ui({
                  method: 'feed',
                  link: 'http://www.infosolutionsdemo.com/', 
                   picture: 'http://www.infosolutionsdemo.com/sample.jpg',
                  description: 'An example of how facebook share works'
                }, function(response){
                    console.log(response);
                }
            );
        });

});
</script>

This code tells jQuery to attach a Share dialog to the DIV in your code with the ID of “shareFb”.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s