Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

how do I install an SDK using require, when I need to require an folder and this seems impossible? – Facebook api

PROBLEM DESCRIPTION.
I’m trying to follow https://github.com/lucascosta/facebook-js-ads-sdk to install the Javascript SDK for Facebook. Before anyone objects, I am absolutely aware of the compact version (https://developers.facebook.com/docs/javascript/quickstart), but that API is absolutely useless to me. I need the one produced by Lucas Costa, in order to be able to make changes to my ads account, which the recommended script by Facebook does not enable.

As usual installation instructions (see github.com/lucascosta/facebook-js-ads-sdk) are horribly predicated on mysterious conditions, that are unbeknown to me. I cannot get the SDK to work and would like someone to tell me explicitly what to do. The crux of the problem is the paradoxical situation: I am supposed to use a require('...') command (where??) to include the SDK (where is this supposed to be saved??) and yet require cannot be used on folders, but on scripts. Maybe somewhere there is a require.config file, I’m supposed to set up, but I have no idea, as, like I said, the instructions completely bypass any mention of the necessary starting conditions.

Here is what I have done so far. My folder-structure looks like this (I don’t even know if this is right, as no-one explains it anywhere!):

[Serverroot]
  — [folder with my website]
      – facebook-ads-sdk (the folder one gets by downloading)
      – css — pagestyles.css
      – js — lib
              require.js
           — app
              ( some header scripts )
      – img
              ( some images )
      index.php

In index.php I have a block of html followed by some javascript. It is here, that I try to insert the setup / example code from . The browser cannot even get past the line const adsSdk = require('facebook-ads-sdk');. I have tried a number of things: require('./facebook-ads-sdk');, moving all this to the folder ./js/app in a script main.js and then writing in my html in index.php where main and require are located. Setting up a require.config (or requirejs.config) replacing require by requirejs, etc. and including the appropriate scripts in the <head> part of index.php. Nothing helps. Here are the errors: first with const adsSdk = require('facebook-ads-sdk'); I get

Error: Module name "facebook-ads-sdk" has not been loaded yet for context: _. Use require([])

Okay. How do I ‘load the Module for the context _’?? Reading requirejs.org/docs/start.html is of no help here. I tried require([], function() {require('facebook-ads-sdk')}); Same error. I tried require(['facebook-ads-sdk']);

I tried using the following commands in my script in index.php:

require.config({
    shim: {
        'facebook': {
            exports: 'adsSdk',
        },
    },
    paths: {
        'sdk': './facebook-ads-sdk',
    }
});
var adsSdk = require(['sdk']);

Then I get the error

Failed to load resource: http:// .... /facebook-ads-sdk.js the server responded with a status of 404 (Not Found)

Ie, the browser thinks I’m trying to include a script facebook-ads-sdk.js, but I’m supposed to(???) ‘require’ the entire folder! What is going on? Can someone please give me thorough instructions about the necessary folder structure and command, in order to get this SDK working?

Why is this so infuriatingly vaguely described online? Is there some kind of mysterious way of installing SDKs, about which ‘everyone’ knows, but never mentions?

UPDATE: SOLUTION. For any future google-searches for this same problem: via the following simple methods, one can install & embed the Javascript-FB-Ads-SDK:

  1. install via npm install --save facebook-ads-sdk a copy of the npm modul Lucas Costa’s facebook-ads SDK.
  2. Copy this folder to your website’s architecture (actually you possibly just need one subfolder / file).
  3. in your HTML include the script (via <script type='text/javascript' src='...'></script>) with the src pointing to the file in the facebook-ads-sdk folder: /dist/iife.js.
  4. In your page’s script, you now have access to then API via the global variable fb.

alternatively to 3:

3’. in your HTML headers make sure to include the require.js script via a <script>-tag. Then in your website’s javascript apply the following commands anywhere:

require.config({
    paths: {
        'sdk': './[FOLDERNAME OF SDK]/dist/iife',
    }
});
require(['sdk']);

Credit and special thanks goes to @SLaks and @KhauriMcClain (I would give you up-points if I could) for this solution.

Tags:

2

Answers


  1. 0

    You need to change the way you are using require.

    1. You cannot use the synchronous require method to load dependencies if they have not been loaded before. Hence const adsSdk = require('facebook-ads-sdk'); will not work. You will need to use the form require(['name-of-script'], callback).
    2. Require does not allow you to load an entire folder. You have to find the exact script you are trying to work with so var adsSdk = require(['sdk']); will not work.

    Ultimately your code should look something like:

    require(['some-facebook-script'], function(someFacebookScript) {
    // Do some work here
    });

    The parameter passed to the callback function will be the loaded module you are trying to consume. When using the asynchronous version (as I just demonstrated) the return from require is not useful.

    Login or Signup to reply.
  2. 0

    The instructions are assuming that you’re using a bundling system like Webpack or Browserify.
    If you are, the instructions “just work”; you can require() it and everything will work fine.

    If you’re building a non-trivial codebase, you really should use such a system.

    If you aren’t, you can reference iife.js in a <script> tag and that will create global variables.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search