Sharing on Facebook Using JavaScript

Dhananjay Kumar
Jun 26, 2012
31.7k
0
1
Article

Objective

In this article we will see how to integrate our application with Facebook. We will look into how a status, picture or video can be shared on a Facebook wall using JavaScript.

Expected output is as following

Register Application to Facebook

The very first thing we need to do is to register our app on Facebook. We can register that by navigating to the following link:

https://developers.facebook.com/apps

Select the option of Create New App. Provide App Name and App Namespace. We need to provide a unique App name and App Namespace:

After that, we need to complete a Security Check.

Once the application has been successfully registered, you will get an App ID and App Secret ID as in the following:

After obtaining the App ID and App Secret ID, we need to provide information about the site or mobile web from where we are going to share on Facebook. There are two very important points here.

App Domains
Site URL and Mobile Web URL

Since I am going to do this sample on a local server, hence I have set the AppDomains as localhost and the Web Page URL or Mobile Web URL will be http://localhost:1461/ . So I have configured that as in the following. Make sure you configure your App Domains and Site URL/Mobile URL as of your application. For example if your site domain is XYZ then give App Domains as XYZ and Site URL http://XYZ/yourpage

As of now we have registered and configured the application on Facebook. Next we need to write JavaScript code to share on Facebook.

Code to Share on Facebook

Let us put a button on the page. On clicking of this button we will share the status on Facebook.

We begiin by initializing the page for Facebook integration. Put the following code just before the closing <body> tag. Do not forget to replace Your App Id with your real app Id.

Now we need to add a reference for the following JavaScript file. Add these references in the Head section of HTML.

Once all references have been added we need to write code on the click event of a button to share something on Facebook. We can share Video, Status, and Picture. FB.ui function will be used to share. Various parameters of this function are explained in the following:

Now we can share status as in the following:

If you are not logged in to Facebook then you get prompted to login and then share as in the following:

In this way we can share status on the Facebook using JavaScript. Combining all the codes together as in the following:

<html>
<head>
<title>
Share on Facebook
</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js">
</script>
<script src="https://connect.facebook.net/en_US/all.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#shareonfacebook').click(function (e) {
            alert('hello9');
            e.preventDefault();
            FB.ui(
                {
                    method: 'feed',
                    name: 'DebugmodeEventPlans',
                    link: 'http://localhost:1461/ShareonFB.html',
                    caption: 'hey how is my Application ? tell me dude',
                    description: 'hey how is my Application ?',
                    message: ''
                });
        });
  });
</script>
</head>
<body>
<button id="shareonfacebook" >ShareOnFaceBook</button>

<script>
FB.init({
appId : '252161531561079'
});
</script>
</body>
</html>

If you want to share a Video you can share it by giving a Source value and Picture value as in the following: