Sharing on Facebook using JavaScript

Objective

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

Expected output is as following

image

Register Application to Facebook

Very first we need to register our app on Facebook. We can register that by navigating on following link.

https://developers.facebook.com/apps

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

image

After that, we need to complete Security Check.

image

Once Application has been successfully registered, you will get App ID and App Secret ID as following,

image

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

  1. App Domains
  2. Site URL and Mobile Web URL

Since I am going to do this sample on local server, hence I have set AppDomains as localhost and Web Page URL or Mobile Web URL will be http://localhost:1461/ . So I have configured that as 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

image

As of now we have registered and configured 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 page. On clicking of this button we will share status on Facebook.

clip_image002

Very first we need to initialize page for Facebook integration. Put following code just before closing <body> tag. Do not forget to replace Your App Id with your real app Id.

clip_image003

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

clip_image005

Once all references being added we need to write code on click event of button to share something on Facebook. We can share Video, Status, and Picture. FB.ui function will be used to share. Different parameters of this function is explained as following

clip_image007

Now we can share status as following,

clip_image009

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

clip_image012

clip_image013

clip_image014

In this way we can share status on the Facebook using JavaScript. Combining all the codes together as 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 : 'urappid'
});
</script>
</body>
</html>

If you want to share a Video you can share it by giving Source vale and Picture values as following.

image

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

About these ads

9 thoughts on “Sharing on Facebook using JavaScript

  1. Pingback: Dew Drop – June 25, 2012 (#1,350) | Alvin Ashcraft's Morning Dew

  2. Pingback: My Homepage

  3. Pingback: Lidya

  4. Pingback: Sharing on Facebook using JavaScript | Gerda's Collection

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