npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-cli-facebook-js-sdk

v2.1.0

Published

A simple wrapper for the Facebook JS SDK.

Downloads

861

Readme

Ember Observer Score

Ember-cli-facebook-js-sdk

Simple Facebook SDK for Javascript addon for your Ember CLI app.

This addon lets you interact with the Facebook API using Promises as you would usually do with any async operation in your Ember app. The same API is used in the addon so that you can easily refer to the Facebook SDK for Javascript reference doc for details on the usage.

The methods implemented are:

  • Core Methods
    • init
    • api
    • ui
  • Facebook Login Methods
    • getLoginStatus
    • login
    • logout
    • getAuthResponse
  • Misc
    • XFBML.parse

Installation

  • ember install ember-cli-facebook-js-sdk

If you are running Ember.js < 2.13, use 1.1.0 version of the add-on.

Upgrade from 0.0.4

From version 1.0.0 ember-cli-facebook-js-sdk implements a service, before it was a simple ES6 module you should import. If you prefer to stick to the old version, checkout the 0.0.4 tag.

Usage and configuration

Configuration

Before using the Facebook SDK for Javascript you need to include it in your HTML. The more convenient way to do it is by using the addon service's FBInit method. To do so, you must configure the parameters to use to initialize the Facebook SDK in your config/environment.js file in the FB key. The following is a basic example of such a configuration:

  FB = {
    appId: 'YOUR APP ID',
    version: 'v2.10',
    xfbml: true
  }

You need to replace YOUR APP ID with your own Facebook App ID (which can be found in the Facebook developer dashboard) and also set the version to Facebook API version you would like to use.

Skipping Facebook SDK init

Note, if you use other addons or if you prefer to initialize the Facebook SDK for Javascript by your own, you must configure the addon to skip the initialization process:

  FB = {
    skipInit: true
  }

Usage

Whenever you need to interact with Facebook SDK, you must inject the service in your code and use it as you would do with the original SDK. Remember that async functions that would normally require a callback, here return a Promise.

If you find yourself, needing the service in all your controllers you could think of injecting the service by default in your controller like the following:

export function initialize(application) {
  application.inject('controller', 'fb', 'service:fb');
}

export default {
  name: 'fb',
  initialize
};

Initialize the Facebook JS SDK

Before using the Facebook SDK you must be sure to have initialized it. The most convenient way is to call the FBInit function of the fb service in your Application route:

import Ember from 'ember';

export default Ember.Route.extend({
  fb: Ember.inject.service(),

  beforeModel() {
    return this.get('fb').FBInit();
  }
})

Authorization

When creating your own authorization flow, supply fb.login() with a space delimited string of the permissions that your app requires.

import Ember from 'ember';

export default Ember.Controller.extend({
  fb: Ember.inject.service(),

  actions: {
    onClick() {
      this.get('fb').login('email public_profile').then(function() {
        ...
      });
    }
  }
});

If you need to supply additional options, pass them after the scope. For example, to request that your app can make public posts on behalf of the user, pass default_audience: 'everyone' as an option. Check the docs for details.

import Ember from 'ember';

export default Ember.Controller.extend({
  fb: Ember.inject.service(),

  actions: {
    onClick() {
      this.get('fb').login('email public_profile', { default_audience: 'everyone' }).then(function() {
        ...
      });
    }
  }
});

Usage example

You can now use the add-on to, for example, retrieve the current Facebook user data from your route:

import Ember from 'ember';

export default Ember.Route.extend({
  fb: Ember.inject.service(),

  model() {
    return this.get('fb').api('/me');
  }
});

Forcing XFBML tag re-parsing

The loading and initialization of the Facebook SDK is asynchronous so it may happen that you use XFBML tags and these are not properly parsed from the SDK: this could happen, for example, because you add such a tag as part of a component mark-up which is added to the DOM after the parsing init script already run. In such a case you may find it useful to rescue to call the xfbml_parse function explicitly:

import Ember from 'ember';

export default Ember.Component.extend({
  fb: Ember.inject.service(),

  didInsertElement() {
    return this.get('fb').xfbml_parse();
  }
});

You may also try to schedule the same code to run afterRender from your route's controller hook.

Example app

You can find an example app which make use of the addon in the I have been to repo.

Running Tests

TODO: I need to find a way to run test with a valid (never expiring) access token for a test user. Before running tests, you need to set a valid Facebook access token for a test user of our test app. If you have no access to the Facebook test App, use one of your own.

  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.