Facebook Tools

⚠️ Project Status: No Longer Maintained

This module is no longer actively maintained. We do not recommend relying on this package for projects requiring ongoing support, updates, or security patches.

What does this mean?

• No further bug fixes, feature requests, or security updates will be provided.
• No new releases are planned.
• We will not be monitoring issues or PRs on a regular basis.

Official alternatives

We recommend evaluating the following official solutions depending on your use-case:

• Facebook Graph API — Official API for programmatic access to Facebook features.
• Facebook SDKs — Facebook-supported SDKs for various platforms.

If you require tools similar to what this module offered, please refer to the official documentation or SDKs, or consider forking this project if you wish to continue its development independently.

Thank you to everyone who has contributed, reported issues, and used this library over the years.

The tool set is a comprehensive TypeScript and React-based client-side module that provides first-class functionality for adding Social Plugins and Facebook Login to your web application.

This module allows seamless integration of Facebook features into your React components. The following example demonstrates the usage of the components provided by Nom:

Installation

To install the tool set, use the following command:

npm install @tusken-s/facebook-tools
# OR
yarn add @tusken-s/facebook-tools

Usage

Import the required components from the Nom module as shown below:

import { Script, Button } from "@tusken-s/facebook-tools";

Script Component

The Script component enables you to load the necessary Facebook scripts and initialize the Social Plugins. Here is an example of how to use it:

import { Features, Script } from "@tusken-s/facebook-tools";
...
<Script
  cookie={false}
  nonce="xxxxxxx"
  features={[Features.LOGIN_BUTTON, Features.CHAT_PLUGIN]}
  appId={facebook_app_id}
  pageId={facebook_page_id}
/>

Make sure to replace your_theme_color, facebook_app_id and facebook_page_id with the actual values from your application's configuration.

Script Component Props

| Prop | Type | Description | | -------- | ---------------- | -------------------------------------------------------------- | | appId | string | The Facebook app ID. | | pageId | string | The Facebook page ID. | | cookie | boolean | Specifies whether the cookie should be used. Default: false. | | nonce | string | The nonce value for script security. | | language | ISOLangCountry | The language for the script. | | features | Array<Features> | An array of Facebook features to enable. |

Login Button Component

The Button component provides an easy way to integrate Facebook Login into your application. Here is an example of how to use it:

import { Button } from "@tusken-s/facebook-tools";
...
<Button
  scope="public_profile,email"
  width="100%"
  language="fr_FR"
  buttonType="continue_with"
  callback={loginFacebookCallback}
/>

Replace loginFacebookCallback with the function that will handle the Facebook login callback in your application. Customize the scope and width props as needed.

Or use it as a wrapper for your already made custom button.

<Button scope="public_profile,email" callback={loginFacebookCallback}>
  <button>Custom FB login button</button>
</Button>

Button Component Props

| Prop | Type | Description | | ---------- | ------------------------------------------- | ----------------------------------------------------------- | | disabled | boolean | Specifies whether the button is disabled. Default: false. | | width | string | number | The width of the button. | | scope | string | The Facebook login permissions scope. | | buttonType | "continue_with" | "login_with" | The type of the button. | | callback | (x: StatusResponse["authResponse"]) => void | The callback function triggered on successful login. | | style | CSSProperties | Custom styles to be applied to the button. | | language | ISOLangCountry | The language for the button. | | children | ReactNode | The content to be displayed inside the button. |

Language Support

The Facebook Tools module supports the following languages:

• English (en_US)
• French (fr_FR)
• Arabic (ar_AR)
• Spanish (es_ES)
• German (de_DE)
• Portuguese (pt_PT)
• Chinese (zh_CN)
• Hebrew (he_IL)

If the desired language is not specified or unsupported, the module will default to English (en_US). Additionally, when the user does not explicitly specify a language, the module will automatically use the browser's language setting.

Facebook SDK Type Definitions

In addition to the React components and functionality mentioned above, this module also offers comprehensive type definitions for Facebook's SDK native methods, classes, and tools. By simply installing the module, you gain access to the full range of Facebook SDK features with TypeScript support.

For example, you can use the Facebook SDK methods and classes as follows:

// Access Facebook SDK methods and classes
window.FB.init({
  appId: "your_app_id",
  version: "v12.0",
});

window.FB.api("/me", (response) => {
  console.log(response);
});

and you won't get any type errors.

Contributing

This project is no longer maintained. We are not accepting new contributions, pull requests, or issues. If you wish to continue development, please consider forking the repository.

Changelog

See the changelog for historical release information.

Roadmap

This project is no longer maintained. There are no future plans or upcoming features.

License

This project is licensed under the terms of the MIT license.

Sponsoring services

Our Sponsors push our Research, Development & Infrastructure:

Tuskens allow us to host the Git repository and coordinate contributions.