Very simple example missing: FB Like button?

[binarykitchen]

How do you add a FB like button with this package? I think this is very basic, important but still, I do not see how.

And for the FB.init() I need to declare a version number, i.E.

    FB.init({
      appId      : '156728034677440',
      xfbml      : true,
      version    : 'v2.5'
    });

How do we do this with this package?

[dantman]

FB like buttons are a client side interface. This is a server side api sdk.

Use the official client side Facebook JS SDK for client side things like like buttons and login dialogs.

This package doesn't have an init, instead it has a options function.

The 0.7.x and earlier versions do not support versioned calls to the Facebook API. That is being added to 1.0.0. You can try that out with npm install fb@next.

[binarykitchen]

Well, I dislike the idea of using the client side Facebook JS SDK by injecting it after HTML's body.

Having this inline 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_GB/sdk.js#xfbml=1&version=v2.5&appId=156728034677440";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

is really ugly. I want to browserify it somehow. Is that possible?

[dantman]

It's out of the scope of this project.

But personally I use a module something like this:

"use strict";
var Q = require('q');

module.exports = new Q.Promise((resolve) => {
    window.fbAsyncInit = () => {
        /* global FB */
        // Init FB
        FB.init({
            appId: 'app_id',
            cookie: true, // allow the server to access the session
            xfbml: false,
            version: 'v2.4'
        });

        // Reolve the promise with FB once the SDK is loaded.
        resolve(FB);
    };

    // Load the SDK
    ((document, script, id) => {
        var js,
            fjs = document.getElementsByTagName(script)[0];

        if ( document.getElementById(id) ) { return; }

        js = document.createElement(script);
        js.id = id;
        js.async = true;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    })(document, 'script', 'facebook-jssdk');
});

It exports a promise that is resolved when the FB sdk is loaded.

Keep in mind that because of the async nature of loading the FB sdk there is no actual way you can make a standalone module that will synchronously load the FB sdk and return it.

[binarykitchen]

that's a very nice piece of code. thanks man!

but one thing still bugs me: the need to download it from https://connect.facebook.net/en_US/sdk.js - why can't FB provide this as an npm package itself so that the ((document, script, id) => { ...})(...) part is not needed when browserified altogether?

[dantman]

That's just their choice. You could complain on their bug tracker.

[binarykitchen]

grins ... they have a bug tracker?

[dantman]

See the Tools & Support menu on developers.facebook.com.

https://developers.facebook.com/bugs/

[binarykitchen]

cool - again thanks so much!

[binarykitchen]

Reported here https://developers.facebook.com/bugs/1536337759940204/