Reader Level:
ARTICLE

Sharing on Facebook Using JavaScript

Posted by dj Articles | JavaScript June 25, 2012
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.
  • 0
  • 0
  • 12950

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

FBJvScrpt1.jpg

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:

FBJvScrpt2.jpg

After that, we need to complete a Security Check.

FBJvScrpt3.jpg

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

FBJvScrpt4.jpg

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.

  1. App Domains
  2. 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

FBJvScrpt5.jpg

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.

FBJvScrpt6.jpg

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.

FBJvScrpt7.jpg

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

FBJvScrpt8.jpg

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:

FBJvScrpt9.jpg

Now we can share status as in the following:

FBJvScrpt10.jpg

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

FBJvScrpt11.jpg

FBJvScrpt12.jpg

FBJvScrpt13.jpg

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:


FBJvScrpt14.jpg
In this way we can share status on Facebook from JavaScript. I hope this article is useful. Thanks for reading.

COMMENT USING

Trending up