Facebook Tools

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, Chat, 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. |

Chat Component

The Chat component allows you to embed a Facebook Chat Plugin into your application. Here is an example of how to use it:

<Chat minimized={true} color={your_theme_color} pageId={facebook_page_id} />

Ensure to replace facebook_page_id with the appropriate Facebook page ID from your application's configuration. Additionally, you can customize the minimized and color props to fit your specific requirements.

Chat Component Props

| Prop | Type | Description | | ----------- | --------------- | -------------------------------------------------- | | pageId | string | The Facebook page ID. | | color | string | The color of the chat plugin. | | minimized | boolean | Specifies whether the chat plugin is minimized. |

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"
  callback={loginFacebookCallback}
  width="100%"
>
  ...
</Button>;

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

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. |

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

Contributions are welcome! If you find any issues or have suggestions for improvement, please open an issue or submit a pull request on the GitHub repository.

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to MUI.

Notice that contributions go far beyond pull requests and commits. Although we love giving you the opportunity to put your stamp on the module, we also are thrilled to receive a variety of other contributions.

Changelog

The changelog is regularly updated to reflect what's changed in each new release.

Roadmap

Future plans and high-priority features and enhancements can be found soon in our roadmap page.

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.