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>
11 comments:
Hi Virat.......fantastic tutorial! I was able to get my app ID and place a share button in my wordpress site in minutes. What about the Like button.... is there a similar procedure? It should be slightly different since that button contains the V and X symbols for reverting preference. Any hint? Thank you
Hi Alberto....Thanks, For Like button procedure is very similar, will try to prepare simple blog and publish it very soon.
how about with my image, that's named with space, facebook replace it with "+" charater, that's make can't be open
How I Show share count beside the button?
This is very legit.Thank you for the amazing work that you do for the web development community we really appreciate it
How can I use share dialog with custom image as you describe above.
https://developers.facebook.com/docs/sharing/reference/share-dialog
I like this link example on fb developers.
Your current example is also good but i need share dialog on facebook with custom image and content.
Thanks in advance.
Brilliant!!! Thank you very much for your tuturial!
It was very helpful.
Thanks a lot!
Hello...
I followed this tutorial (yes it's quite old but it's the only one I could find that explained things in depth).
Are there parts missing? I followed what I could see and linked up the button as described.
But nothing happens when I click it!
Thanks for your time.
Hello again.
Just a quick follow up post.
I got it nearly working. The fault was, when copying and pasting the code, there was a different ' used.
My only problem now is that the share box is complaining that the supplied URL/Link is incorrect.
Thanks again.
How do I share to a specific web page. Let's say I have a website en a Facebook page. And I would want to share blogs to that page
Post a Comment