Assumption
- I assume that you already had created Facebook App and you have AppId for the particular domain.
How to add a Facebook share button to your website page
Let’s have a look how to add share button to your web page,
so that people can share your web content on Facebook.
Step - 1: Get a Facebook AppId for your domain.
First of all to add share button to your website you must
have Facebook AppId for the domain on which you would like to place a button.
This is basically to ensure security perspective.
If you don’t know how to set up Facebook App please have a
look at my blog on same.
Step – 2: Add the Facebook JavaScript SDK to you web page.
Facebook is providing code to initialize JavaScript SDK. You
need to add this code within <body>…</body> tag of your
.php/.html/.asp page.
I suggest using Asynchronous JavaScript code. Facebook
provide two methods as follow
Synchronous: Loads in order it appears in your code
Asynchronous: It simultaneously loads JavaScript SDK along
with your page code. So if by some reason suppose SDK is not able to load still
other element of your page will continue to load.
Please note Asynchronous code to add into your web page
<div
id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
NOTE: Make sure you replace ‘YOUR APP ID’
with your actual App ID for your website. You can always find it on the
Facebook Application Page. (When logged in to Facebook, you’ll see
all applications you’ve created under your personal profile.)
Step – 3: Add code to load JQuery Library (Here we will use 1.6.1 as base version)
Just add following code to your web page. We will use JQuery from google.<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Step – 4: Displaying share dialog box
Now we are ready to define share dialog box using JQuery and Facebook fb.ui function. Insert the following code in your page
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: ‘http://www.groupstudy.in/img/logo3.jpeg’,
caption: 'Top 3 reasons why you should care about your finance',
description: What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…',
message: ''
});
});
});
</script>
This code tells jQuery to attach a Share dialog to the DIV in your code with the ID of “share_button”. You can insert multiple share buttons on a page by repeating this code, making sure you use a unique ID for each (eg #share_button1, #share_button2).
You can always customize dialog box by changing values of
these parameters.
Name: Text appear on the first line of the share dialog box,
just below the personalized message box. When this posted on your timeline this
text become hyperlink to your post with link provided in “Link” parameter.
Link: This is the actual URL you would like to share on your Facebook timeline. Make Sure this URL should contain same domain as Facebook
App made of.
Now if you try to share URL any other domain/website than
following error message will be appear.
Picture: Here you have to specify URL of the picture which
should appear beside the post on your timeline.
Caption:
This text displays under the Name/Link. Maximum displayed characters: 100;
Description:
This text displays under the Caption. Maximum displayed characters: 270,
followed by a “See more” link to show the rest;
Message:
This field allowed you to pre-populate the personalized message box at
the top of the Share dialog. However, Facebook would prefer that you don’t
pre-populate the message field as they want the user to enter a personalized
message and, as Alison Gianotto at Snipe.Net pointed
out, the “message” field has been deprecated and is now ignored.
So just leave it blank.
Step – 5: Add Linking text or share button image which will trigger above code.
You can launch the Share dialog using either linked text or an image. We will add share button and trigger the event.
Once the user fills in their message and clicks the Publish button, the post will appear on their Wall and may appear in their friends’ News Feeds (depending on their settings).
Step – 6: Add style sheet to change cursor type when it is on share button.
Add following code just before the image tag
<style type=”text/css”> img#share_button {cursor: pointer;} </style>
<style type=”text/css”> img#share_button {cursor: pointer;} </style>
