CODEWITHSUNDEEP
javascriptfacebook
not_a_number
not_a_number

Reputation: 305

Loading Facebook SDK on click

Obviously, some people are not happy with websites using a Facebook plugin for they don't want to be tracked in what they do when they're not on Facebook. There's Shariff, which looks like a fair approach: The Facebook plugin isn't loaded until the user clicks the Facebook button (here's a demo).

I'm trying to do the same (using the JavaScript SDK). However, I blatantly fail in loading the SDK dynamically. I didn't get any error messages either (yes, I did insert the app id).

Any ideas? The code below was taken from the API docs.

<html>
<body>

<script type="text/javascript">
    window.onload = function() {
        var e = document.getElementById('share_on_fb_link');
        e.onclick = share_on_fb;

        function share_on_fb() {
            // Code from https://developers.facebook.com/docs/javascript/quickstart/v2.2

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

            (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'));

            // Using the SDK to trigger a Share dialog
            FB.ui({
                method: 'share',
                href: 'https://developers.facebook.com/docs/'
            }, function(response){});

          return false;
        }
    }
</script>

<a id="share_on_fb_link" href="#">Link</a>

</body>
</html>

Upvotes: 2

Views: 3350

Answers (1)

lacco
lacco

Reputation: 892

I finally came up with a working solution. Firstly, you have to call FB.ui after FB.init. But according to https://stackoverflow.com/a/3549043/745266 this won't solve the problem completely - FB.init is doing an asynchronous request to facebook, so calling FB.ui must be delayed until Facebook is fully setup. The following code should work:

window.onload = function() {
    var e = document.getElementById('share_on_fb_link');
    e.onclick = share_on_fb;

    function share_on_fb() {
        // Code from https://developers.facebook.com/docs/javascript/quickstart/v2.2

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

          // Delay FB.ui code until Facebook is fully initialized
          FB.getLoginStatus(function(response){
              // Using the SDK to trigger a Share dialog
              FB.ui({
                  method: 'share',
                  href: 'https://developers.facebook.com/docs/'
              }, function(response){});
          });
        };

        (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'));

      return false;
    }
}

Upvotes: 1

Related Questions