How to add facebook share button on my website?

Question

I have this code that suppose to work, but doesn't work.

<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. Can anyone help me?

Note that with using the Facebook SDK your users are being tracked only by _visiting_ your site; they don't even need to click any of your Share or Like buttons. The answers below suggesting only a _simple link_ (`a href`) solve this issue. — Peterino, Oct 13 '20 at 10:20

asifrc · Accepted Answer · 2013-08-15T23:41:33.920

320

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/

edited Aug 15 '13 at 23:41

answered May 09 '13 at 15:04

asifrc

5,781
2
18
22

7

Don't really like this option... wish there was a styled link, kind of like the tweet button – Serj Sagan Jul 18 '13 at 02:23
128

Why don't you style the link then? I definitely prefer this option. I like to have control of how my designs look. – sheriffderek Jul 18 '13 at 23:07
6

Also, this manner doesn't add the facebook junk code, that would slow your page. See the sharrre.com jquery plugin, it makes it easy to customize the look and bundle several social "like" buttons into one. – pixeline Oct 12 '13 at 10:24
Documentation link redirects to Share Button. Can you no longer have simple share links? – matt Jun 16 '14 at 19:29
3

Yes, you can still use simple share links. Also, check out this simple page for help building simple links for all your popular social media sites: http://www.sharelinkgenerator.com/ – pistol-pete Mar 06 '15 at 17:46
1

Important note: This idea on mobile opens the Facebook website (Not FB app). Little (Or big) con. – Ezra Siton Apr 09 '20 at 16:07
can add query parameters like quote and hashtag to provide them in post along with link. – Abhishek Tewari May 03 '20 at 11:24
Will this link suggest to open the app on mobile devices?? – cbdeveloper Jun 14 '20 at 06:42
Not working in modal window as iframe – Farhat Aziz Aug 05 '22 at 01:06
This is the best option. It does not require loading the annoying and sometimes slow facebook js script. Just a link. Clean and simple. – Muisca Feb 01 '23 at 14:14

score 26 · Answer 2 · edited Oct 18 '15 at 00:04

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

... compare this to the initialisation of the Twitter equivalent. Nuts. — Michael, Jun 06 '14 at 12:10
This one is still working like a charm! Excellent piece of work! — Coding Freak, Jan 27 '17 at 19:27
Nice!! easy to understand. But how do we know, if the user has actually shared our content? PS: response.error_message will appear only if someone using your app has authenciated your app — Pearl, Sep 18 '18 at 06:13

Subodh Ghulaxe · Answer 3 · 2014-04-21T06:36:37.410

15

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

edited Apr 21 '14 at 06:36

answered Apr 21 '14 at 05:58

Subodh Ghulaxe

18,333
14
83
102

8

Is it possible this code doesn't work anymore? Not even in jsfiddle – erdomester May 11 '14 at 07:09
8

Yep having serious trouble getting this working myself... I just end up with a blank div. – Michael Jun 06 '14 at 12:09
@erdomester The fiddle won't show in Chrome or Firefox. It's due to the browsers security preventing sandboxed iframes. Opening the jsfiddle up in Safari should show and once you implement outside of a jsfiddle it should show in the other browsers. – JisuKim82 Jan 26 '16 at 19:15

score 6 · Answer 4 · answered Oct 19 '16 at 22:24

For Facebook share with an image without an API and using a # to deep link into a sub page, the trick was to share the image as picture=

The variable mainUrl would be http://yoururl.com/

var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);

var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);

var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);

var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;

// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
  var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
  return false;
});

// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
  var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
  return false;
});

score 2 · Answer 5 · edited Jun 20 '20 at 09:12

Share Dialog without requiring Facebook login

You can Trigger a Share Dialog using the FB.ui function with the share method parameter to share a link. This dialog is available in the Facebook SDKs for JavaScript, iOS, and Android by performing a full redirect to a URL.

You can trigger this call:

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});

You can also include open graph meta tags on the page at this URL to customise the story that is shared back to Facebook.

Note that response.error_message will appear only if someone using your app has authenticated your app with Facebook Login.

Also you can directly share link with call by having Javascript Facebook SDK.

https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}

app_id => Your app's unique identifier. (Required.)
redirect_uri => The URL to redirect to after a person clicks a button on the dialog. Required when using URL redirection.
display => Determines how the dialog is rendered.

If you are using the URL redirect dialog implementation, then this will be a full page display, shown within Facebook.com. This display type is called page. If you are using one of our iOS or Android SDKs to invoke the dialog, this is automatically specified and chooses an appropriate display type for the device. If you are using the Facebook SDK for JavaScript, this will default to a modal iframe type for people logged into your app or async when using within a game on Facebook.com, and a popup window for everyone else. You can also force the popup or page types when using the Facebook SDK for JavaScript, if necessary. Mobile web apps will always default to the touch display type. share Parameters

href => The link attached to this post. Required when using method share. Include open graph meta tags in the page at this URL to customize the story that is shared.

score 2 · Answer 6 · answered Sep 11 '20 at 17:03

This Facebook page has a simple tool to create various share buttons.

For example, this is some output I got:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="dilSYGI6"></script>
<div class="fb-share-button" data-href="https://www.mocacleveland.org/exhibitions/lee-mingwei-you-are-not-stranger" data-layout="button" data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.mocacleveland.org%2Fexhibitions%2Flee-mingwei-you-are-not-stranger&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
</div>

score 1 · Answer 7 · answered Jul 08 '16 at 14:14

For your own specific server or different pages & image button you could use something like this (PHP only)

<a href="http://www.facebook.com/sharer/sharer.php?u=http://'.$_SERVER['SERVER_NAME'].'" target="_blank"><img src="https://i.stack.imgur.com/rffGp.png" /></a>

I cannot share the snippet with this but you will get the idea...

How to add facebook share button on my website?

7 Answers7

Share Dialog without requiring Facebook login

Linked