Friday, May 16, 2014

How to add facebook share button to your website



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>

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.

 


Just insert the link/image in your index file and add the ID “share_button.”

<img src = "share_button.png" id = "share_button">When a user clicks on that button, it will pop up the Share dialog box.

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>


7 comments:

Alberto said...

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

Virat Gaywala said...

Hi Alberto....Thanks, For Like button procedure is very similar, will try to prepare simple blog and publish it very soon.

Cik Apung said...

how about with my image, that's named with space, facebook replace it with "+" charater, that's make can't be open

shah said...

How I Show share count beside the button?

moemedi leeu said...

This is very legit.Thank you for the amazing work that you do for the web development community we really appreciate it

Kumar Roshan said...

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.

Dmitry Andreevich said...

Brilliant!!! Thank you very much for your tuturial!