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
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.
After that, we need to complete Security Check.
Once Application has been successfully registered, you will get App ID and App Secret ID as following,
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.
- App Domains
- 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
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.
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.
Now we need to add reference of following JavaScript file. Add these references in Head section of HTML.
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
Now we can share status as following,
If you are not logged in to Facebook then you get prompted to login and then share as following,
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.
In this way we can share status on Facebook from JavaScript. I hope this post is useful. Thanks for reading.
Follow @debug_mode
Great article DJ!!
sir i am unable to implement it.write it in a simple step by step way…
Very Nice Post
Thanks.
How can i Integrate with my ASP.NET webpages Facebook OAUTH concept
What is OAUTH ?
How can I use this concept in my ASP.NET websites plz Give me One example
help me