3

I'm pretty (below) average when it comes to HTML/CSS-coding. My Javascript knowledge is at the copy-and-paste level. This is my problem:

I want to make my own Facebook share-button! It used to be simple with sharer.php, but I'm afraid it will be deprecated. So I want to trigger the share dialog with a link of my own, instead of using Facebooks own ugly share button plugin.

I've read the page about the Share Dialog on Facebook Developers. But I don't understand how/where to use the code snippets. To be honest I understand nothing. Nothing!

To make it simple, let's say I have my own button (button.jpg) and I want this button to open the Facebook share dialog to share the page URL (http://example.com). I have meta Open Graph tags. How do I do this?

Andreas
  • 51
  • 1
  • 3

2 Answers2

3

sharer.php is not deprecated (at least not anymore), you can use it without any problem.

Anyway, the Share Button is easy to implement. You just need to load/initialize the JavaScript SDK and call FB.ui on click.

JavaScript SDK: https://developers.facebook.com/docs/javascript/quickstart/v2.3

Share Dialog: https://developers.facebook.com/docs/sharing/reference/share-dialog

For example:

<script>
    function onClick() {
        FB.ui({
            method: 'share',
            href: 'https://www.your-url.com',
        });
    }

    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'your-app-id',
            xfbml      : true,
            version    : 'v2.3'
        });
    };

    (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/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
andyrandy
  • 72,880
  • 8
  • 113
  • 130
  • Thanks. But as I said I'm dumbfounded by Javascript. How do I initialize the SDK and FB.ui? Do I paste the Javascript in the body-tag and what should the HTML code look like around my share-link? – Andreas May 14 '15 at 19:27
  • yes, you paste the code almost 1:1 in the body tag, and you need to add your app id. you do need to create an app for the FB.ui dialogs. i do understand that your knowledge with javascript is limited, but you need to learn it. we don´t just do the work for you on stackoverflow, we are here to give you a hint so you can solve it on your own ;) – andyrandy May 14 '15 at 21:00
  • Ok, thanks. Well, I didn't think I would have to completely learn Javascript just to create a share button. I'm too old and don't have the time..., but maybe there are other forums that can give me more help than hints ;-) – Andreas May 14 '15 at 21:16
  • my answer actually includes all the javascript code you need. you only need to call the "onClick" function on click (your button/link/div/whatever). – andyrandy May 14 '15 at 21:33
  • Ok, thnks. I'll try to figure out how to call the onclick function then. – Andreas May 14 '15 at 21:38
  • for example: https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onclick – andyrandy May 14 '15 at 22:08
  • or: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener – andyrandy May 14 '15 at 22:09
1

Try Share Link Generator to generate your own link, but anything that uses sharer.php in the link will not work if facebook decides to depreciate this. How you actually display the button or link makes no difference to whether it is depreciated or not, but if that does happen I would expect many people to be seeking a workaround and facebook may well provide an alternative.

Mousey
  • 1,855
  • 19
  • 34