[meteor 1.3] How to import Facebook SDK

help
1

i try to use package: https://atmospherejs.com/biasport/facebook-sdk
import FB from 'meteor/biasport:facebook-sdk';
or
import {FB} from 'meteor/biasport:facebook-sdk';

->> FB undefine.

2

I don’t think that package actually exports a FB symbol. If you look at https://github.com/biasport/facebook-sdk/blob/master/sdk.js it’s just running code in the global scope.

3 
componentDidMount(){
    //this.props.actions.loadFacebookLikePlugin();
    $(document).ready(function(){

      $('body').prepend('<div id="fb-root"></div>');

      (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/vi_VN/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

      window.FB.init({
        appId      : 'xxx',
        cookie     : true,
        status     : true,
        xfbml      : true,
        version    : 'v2.5'
      });
     });

    console.log(window.FB);
    try {
      window.FB.XFBML.parse();
    }catch(e) {
      console.log(e);
    }
}

i tried, undefined @@

4

omg, React owner is Facebook, so do not have any component Facebook Comment Plugin or Like Button… ?
this so fun !

1 Like
5

It’s indeed funny that they don’t even have a section about React for that SDK :slight_smile: I just set this up earlier today.

I used react-async-script-loader to get the SDK loaded into the component. https://www.npmjs.com/package/react-async-script-loader

The example straight from that npm page works just fine, and swapping out initEditor() for initFB():

initFB() { FB.init({ appId: Meteor.settings.public.facebook.appId, xfbml: true, version: 'v2.5' }); }

Which isn’t perfect but it works. FB is a global once it’s loaded in, and then you can use it in that component or any child components.

The reason your example doesn’t work is that it calls window.FB before the script loads. You could put a onload listener on the script tag that the facebook code injects. Something like $('#fb-root script').onload(() => {/* FB code */})
Or you could use something like http://api.jquery.com/jQuery.getScript/. Also, as a side note, you don’t need to use $(document).ready in componentDidMount().

6

This works ok, but only for a first time the page is visited. If user goes to next page and back again then the fb plugin doesn’t show. Any suggestions?

import React from 'react';
import scriptLoader from 'react-async-script-loader';

class FbPage extends React.Component {
    
    render() {
        return (
            <div className="fb-page" data-href="https://www.facebook.com/<your_page_name>/" data-tabs="timeline" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true">
                <blockquote cite="https://www.facebook.com/<your_page_name>/" className="fb-xfbml-parse-ignore">
                    <a href="https://www.facebook.com/<your_page_name>/">your_page_name</a>
                </blockquote>
            </div>
        );
    }
    
    initFB() {
        FB.init({
            appId: Meteor.settings.public.facebook.appId,
            xfbml: true,
            version: 'v2.7'
        });
    }

    componentWillReceiveProps ({ isScriptLoaded, isScriptLoadSucceed }) {
        if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished 
          if (isScriptLoadSucceed) {
            this.initFB();
          }
          else this.props.onError();
        }
      }
 
    componentDidMount () {
        const { isScriptLoaded, isScriptLoadSucceed } = this.props;
        if (isScriptLoaded && isScriptLoadSucceed) {
            this.initFB();
        }
    }
}

export default scriptLoader('//connect.facebook.net/en_EN/sdk.js')(FbPage);