How to add facebook share button on my website?

Question

I have this code that suppose to work, but doesn't work. If this helps you in anyway that would be great.

<script src='http://connect.facebook.net/en_US/all.js'></script>     <p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>     <p id='msg'></p>      <script>        FB.init({appId: "338334836292077", status: true, cookie:   true});        function postToFeed() {          // calling the API ...         var obj = {           method: 'feed',           redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',           link:'https://developers.facebook.com/docs/reference/dialogs/',           picture: 'http://fbrell.com/f8.jpg',           name: 'Facebook Dialogs',           caption: 'Reference Documentation',           description: 'Using Dialogs to interact with users.'         };          function callback(response) {          document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];         }          FB.ui(obj, callback);       }      </script> 

I want to add facebook share button on my website, that should just post my website's content on the wall. who want to share it.

I have researched a lot but did not get anything. Pleas help me in this.

Thanks in advance.

Answer 1

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/

Answer 2

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