Facebook SDK with Meteor

help
1

Has anyone been able to get the Facebook SDK working? I have tried several packages, but have not been able to get them to work so far. With most of the packages, window.fbAsyncInit never fires and I get this error: Uncaught ReferenceError: FB is not defined.

The dcsan:facebook-sdk actually fires window.fbAsyncInit, but then I get this error: Uncaught Error: init not called with valid version. I can, however, run window.fbAsyncInit() from the command line and then the SDK will work - the Facebook invite friend dialog pops up as it should.

So, my question is have you been able to get the Facebook SDK to work with meteor? And if so, how and what packages did you use if any?

2

We use mrt:facebook-sdk
It works fairly well, but we had to use some tricks. So we need two Facebook apps: one for production server and one for local development. FB apps require app links, and you can provide only two of them. So for local development we use localhost:3000 and for production app yourdomain.com and meteor.local (for devices).

in client/MainClient.js

var fbTrys = 0;
function ensureFBInit () {
  fbTrys++;
  if (fbTrys > 60) {
    console.log('[ensureFBInit] giving up');
    return;
  }
  if (typeof(FB) == 'undefined') {
    console.log('[ensureFBInit] wating for FB to init...');
    setTimeout(ensureFBInit, 1000);
    return;
  }

  if (!window.facebookInitStarted)
        window.fbAsyncInit();
}


Meteor.startup(function () {
  ensureFBInit();
});

in client/lib/fix.js

window.fbAsyncInit = function() {
  // PRETTY USELESS ACTUALLY for mobile
  // fb login won't work on ios devices with local app id due to some strange cordova bugs
  // so it works only for in-browser development purposes
  var appId, urls = ['http://localhost', 'http://192.168.1.1'];
  appId = Meteor.util.cnst.fbAppId;
  urls.forEach(function (url) {
    if (Meteor.absoluteUrl().substr(0, url.length) == url)
      appId = Meteor.util.cnst.fbAppIdLocal;
  });
  console.log('[window.fbAsyncInit] running with appId ' + appId);
  window.facebookInitStarted = true;
  FB.init({
    appId      : appId,
    status     : true,
    xfbml      : true
  });
  FB.getLoginStatus(function(response){
      window.facebookInited = true;
  });
};

in lib/util.js

if (!Meteor.util) 
	Meteor.util = {};

Meteor.util.cnst = {
	fbAppId: '...',
	fbAppIdLocal: '...'
};
2 Likes
3

I’m also integrating with FB, but i’m not using the REST API directly.

As the REST api is versioned, what is the benefit of using the sdk? Is it really that much more convenient?

1 Like
4

This looks promising. I will try this approach and get back to you once I get it working. Thank you very much @virtuallight!!

5

@dcworldwide excellent question! I am trying to do friend invites for a game like this: https://developers.facebook.com/docs/games/requests/v2.3

In Facebook’s docs they show how to customize a multi-friend selector dialog box, but I could not find anything saying you can customize the friend invite dialog. Is that possible?

6

@virtuallight one more question… Where are you loading this script at? It’s only firing on hot code pushes for me at the moment.

(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

EDIT: Ah nevermind! I remembered you’re using mrt:facebook-sdk for the sdk script, so I’m checking out how they implemented it. Thanks again!

1 Like