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>
Check working JSFIDDLE