How to add facebook share button on my website? How to add facebook share button on my website? javascript javascript

How to add facebook share button on my website?


You don't need all that code. All you need are the following lines:

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">  Share on Facebook</a>

Documentation can be found at https://developers.facebook.com/docs/reference/plugins/share-links/


You can do this by using asynchronous Javascript SDK provided by facebook

Have a look at the following code

FB Javascript SDK initialization

<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: Remember to replace YOUR APP ID with your facebook AppId. If you don't have facebook AppId and you don't know how to create please check this

Add JQuery Library, I would preferred Google Library

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Add share dialog box (You can customize this dialog box by setting up parameters

<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>

Now finally add image button

<img src = "share_button.png" id = "share_button">

For more detailed kind of information. please click here


You can read more about share button here on Facebook developers website

Working JSFIDDLE

Also take a look at custom Facebook Share button JSFIDDLE

Include Facebook JavaScript SDK code right after the opening <body> tag

<div id="fb-root"></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

And place below code wherever you want to show Facebook Share button

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>

enter image description here

Check working JSFIDDLE