Facebook components like a Login button, Like, Share, Chat, Comments, Page or Embedded Post

Last update: Jun 11, 2022

React Facebook Components

NPM version

Components

  • Facebook provider (provide settings to child components)
  • Login button (provide user profile and signed request)
  • Like button
  • Share and Share button
  • Comments
  • Comments count
  • Embedded post
  • Embedded video
  • Page
  • Feed
  • Group
  • Message Us
  • Customer Chat
  • Status
  • Subscribe
  • User Profile

Support us

Star this project on GitHub.

Initialisation

By default FacebookProvider is loading facebook script immediately with componentDidMount (you are able to use it with SSR). If you want to download facebook script only when facebook component is rendered you need to add parameter wait to FacebookProvider. Use only one instance of the FacebookProvider on your page.

Usage

Like button

import React, { Component} from 'react';
import { FacebookProvider, Like } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Like href="http://www.facebook.com" colorScheme="dark" showFaces share />
      </FacebookProvider>
    );
  }
}

Share post

import React, { Component} from 'react';
import { FacebookProvider, Share } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Share href="http://www.facebook.com">
          {({ handleClick, loading }) => (
            <button type="button" disabled={loading} onClick={handleClick}>Share</button>
          )}
        </Share>
      </FacebookProvider>
    );
  }
}

Share button

You can use predefined button with bootstrap and font awesome classNames

import React, { Component} from 'react';
import { FacebookProvider, ShareButton } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <ShareButton href="http://www.facebook.com">
          Share
        </ShareButton>
      </FacebookProvider>
    );
  }
}

Comments

import React, { Component} from 'react';
import { FacebookProvider, Comments } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Comments href="http://www.facebook.com" />
      </FacebookProvider>
    );
  }
}

Comments count

import React, { Component} from 'react';
import { FacebookProvider, CommentsCount } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <CommentsCount href="http://www.facebook.com" />
      </FacebookProvider>
    );
  }
}

Login Button

import React, { Component} from 'react';
import { FacebookProvider, LoginButton } from 'react-facebook';

export default class Example extends Component {
  handleResponse = (data) => {
    console.log(data);
  }

  handleError = (error) => {
    this.setState({ error });
  }

  render() {
    return (
      <FacebookProvider appId="123456789">
        <LoginButton
          scope="email"
          onCompleted={this.handleResponse}
          onError={this.handleError}
        >
          <span>Login via Facebook</span>
        </LoginButton>
      </FacebookProvider>
    );
  }
}

Custom login render

If you want to use custom component you can use children as function.

import React, { Component} from 'react';
import { FacebookProvider, Login } from 'react-facebook';

export default class Example extends Component {
  handleResponse = (data) => {
    console.log(data);
  }

  handleError = (error) => {
    this.setState({ error });
  }

  render() {
    return (
      <FacebookProvider appId="123456789">
        <Login
          scope="email"
          onCompleted={this.handleResponse}
          onError={this.handleError}
        >
          {({ loading, handleClick, error, data }) => (
            <span onClick={handleClick}>
              Login via Facebook
              {loading && (
                <span>Loading...</span>
              )}
            </span>
          )}
        </Login>
      </FacebookProvider>
    );
  }
}

Embedded post

import React, { Component} from 'react';
import { FacebookProvider, EmbeddedPost } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <EmbeddedPost href="http://www.facebook.com" width="500" />
      </FacebookProvider>
    );
  }
}

Page

import React, { Component} from 'react';
import { FacebookProvider, Page } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Page href="https://www.facebook.com" tabs="timeline" />
      </FacebookProvider>    
    );
  }
}

Feed

import React, { Component} from 'react';
import { FacebookProvider, Feed } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Feed link="https://www.facebook.com">
          {({ handleClick }) => (
            <button type="button" onClick={handleClick}>Share on Feed</button>
          )}
        </Feed>
      </FacebookProvider>    
    );
  }
}

Group

import React, { Component } from 'react';
import { FacebookProvider, Group } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Group
          href="https://www.facebook.com/groups/375934682909754"
          width="300"
          showSocialContext={true}
          showMetaData={true}
          skin="light"
        />
      </FacebookProvider>    
    );
  }
}

MessageUs

import React, { Component} from 'react';
import { FacebookProvider, MessageUs } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <MessageUs messengerAppId="123456789" pageId="123456789"/>
      </FacebookProvider>    
    );
  }
}

SendToMessenger

import React, { Component} from 'react';
import { FacebookProvider, SendToMessenger } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <SendToMessenger messengerAppId="123456789" pageId="123456789"/>
      </FacebookProvider>    
    );
  }
}

MessengerCheckbox

import React, { Component} from 'react';
import { FacebookProvider, MessengerCheckbox } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <MessengerCheckbox messengerAppId="123456789" pageId="123456789"/>
      </FacebookProvider>    
    );
  }
}

CustomChat

import React, { Component} from 'react';
import { FacebookProvider, CustomChat } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789" chatSupport>
        <CustomChat pageId="123456789" minimized={false}/>
      </FacebookProvider>    
    );
  }
}

API Access

import React, { Component} from 'react';
import { FacebookProvider, Initialize } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Initialize>
          {({ isReady, api }) => {
            api.ui(...) // our custom async/await api
            // original FB api is available via window.FB
          }}
        <Initialize>
      </FacebookProvider>    
    );
  }
}

Subscribe

import React, { Component} from 'react';
import { FacebookProvider, Subscribe } from 'react-facebook';

export default class Example extends Component {
  handleChange = (response) => {
    console.log(response);
  } 

  render() {
    return (
      <FacebookProvider appId="123456789">
        <Subscribe event="auth.statusChange" onChange={this.handleChange} />
      </FacebookProvider>    
    );
  }
}

Login Status

import React, { Component} from 'react';
import { FacebookProvider, Status } from 'react-facebook';

export default class Example extends Component {
  handleChange = (response) => {
    console.log(response);
  } 

  render() {
    return (
      <FacebookProvider appId="123456789">
        <Status>
          {({ loading, status }) => (
            <div>
              {...}
            </div>
          )}
        </Status>
      </FacebookProvider>    
    );
  }
}

User Profile

This component will not sign user. You need to do that with another component. Default scope: 'id', 'first_name', 'last_name', 'middle_name', 'name', 'name_format', 'picture', 'short_name', 'email'. If profile is undefined login status !== LoginStatus.CONNECTED

import React, { Component} from 'react';
import { FacebookProvider, Profile } from 'react-facebook';

export default class Example extends Component {
  handleChange = (response) => {
    console.log(response);
  } 

  render() {
    return (
      <FacebookProvider appId="123456789">
        <Profile>
          {({ loading, profile }) => (
            <div>
              {profile.picture}
              {profile.name} 
            </div>
          )}
        </Profile>
      </FacebookProvider>    
    );
  }
}

Support us

Star this project on GitHub.

Try our other React components

Credits

Zlatko Fedor

GitHub

https://github.com/CherryProjects/react-facebook
Comments
  • 1. Refused to display in frame ... Console Error

    Hi, please help me. If i use page plugin >

    <FacebookProvider appId={this.props.settings.FacebookAppId}>
      <Page href={this.props.settings.FacebookUrl} tabs="timeline" />
    </FacebookProvider>
    

    after some time i show this error in console (but everything works ...): snimek obrazovky 2017-11-11 v 13 02 42 where am I making a mistake? Thank you for your help :)

    Reviewed by tazaka at 2017-11-11 12:07
  • 2. Comments not showing up on mobile screens

    The comments dialog is not displaying on mobile screens. I tried setting mobile={true} but it doesn't work.

    Irrespective of what props I pass in, I get the below error. (Even when I set width="100%")

    Warning: Received `false` for a non-boolean attribute `width`.
    
    If you want to write it to the DOM, pass a string instead: width="false" or width={value.toString()}.
    
    If you used to conditionally omit it with width={condition && value}, pass width={condition ? value : undefined} instead.
    
    
    Reviewed by Jaikant at 2018-03-28 15:26
  • 3. Like button missing

    When I implement the Like button, it seems like the iframe is missing something because the button is not showing at all, even if some of the styles seem to be loaded.

    Reviewed by alexgarces at 2016-09-14 10:16
  • 4. Changed SDK to support customerchat

    PR is related to #99 and solves the problem where the customer chat plugin is not rendered in combination with other Facebook plugins.

    According to Facebook's developer docs (https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk):

    Starting on January 8th, 2019, you will no longer be able to request the Customer Chat Plugin with the following URL: https://connect.facebook.net/en_US/sdk.js. If you do not switch to the URL stated below, the plugin will not render on your website.

    https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js requests a version of the Facebook Javascript SDK that includes the Customer Chat SDK. With this URL, you will still be able to access all of the Facebook Javascript SDK plus all features of the Customer Chat SDK.

    Reviewed by SanderPeeters at 2019-04-24 07:49
  • 5. Customer Chat Plugin deprecation warning

    Facebook outputs this to my console when I use the plugin for the Customer Chat Plugin.

    ##########################
    #  The CustomerChat plugin will soon be removed from the main Facebook SDK.
    #  To continue using it please use the correct SDK URL.
    #  For more details see https://fburl.com/customer-chat-sdk
    ########################## 
    Reviewed by phillytan at 2018-10-22 14:32
  • 6. Token is undefined

    Before this piece of code works perfectly, but just recently I started getting error:

    Token is undefined

    Why? Before works everything well I didn't touch anything, but login element no longer working and always return this error.

    How to fix this issue?

    <FacebookProvider appId={config.facebook}>
              <Login
                scope="email"
                onResponse={this.checkEmail}
                // tslint:disable-next-line:no-any
                onError={(error: any) => {
                  console.info('ISSUE IS HERE!!!!', error);
                }}
              >
                <Button 
                  size="small" 
                  className="btn-facebook" 
                  loading={this.state.facebookLoading} 
                  disabled={this.state.facebookLoading}
                >
                  <Icon name="facebook f" size="large"/>
                    facebook
                </Button>
              </Login>
            </FacebookProvider>
    
    Reviewed by fyn-dev at 2018-05-04 10:05
  • 7. Post embed width under 350px

    I try to embed Facebook post to my website. It works well for screen above 350px large but under this width posts are cut... It seems that the max width for posts is 350px. What if you want to display facebook post embed for small screen under 350px? Tried with widht 100% but does not work.

    <FacebookProvider appId="1234">
      <EmbeddedPost href={"https://www.facebook.com/teampulse.ch/posts/"+post} width="100%" />
    </FacebookProvider>
    
    Reviewed by camel113 at 2017-05-11 09:10
  • 8. Cannot use boolean with 'mobile' props in Comments component

    I found, that it doesn't matter if I use true or false with mobile prop. Comments will always display as mobile. I need to use undefined instead of false. It is not convenient, since when I use f.e. react-media, I would do:

    <Media
      queries={{
        mobile: {
          maxWidth: 768,
        },
        desktop: {
          minWidth: 769,
        },
      }}
    >
      {matches => (
        <Comments
          href="HREF"
          mobile={matches.mobile}
        />
      )}
    </Media>
    

    Instead of that I have to use it this way:

    <Media
      queries={{
        mobile: {
          maxWidth: 768,
        },
        desktop: {
          minWidth: 769,
        },
      }}
    >
      {matches => (
        <Comments
          href="HREF"
          mobile={matches.mobile || undefined}
        />
      )}
    </Media>
    
    Reviewed by c0dester at 2019-10-12 11:54
  • 9. CSP Violation in v6

    Hey,

    After upgrading the react-facebook plugin to version 6 I have found that the Facebook Comment plugin doesn't comply with our CSP policy.

    The violation is as following:

    all.js:22 Refused to execute inline event handler because it violates the following Content Security Policy directive: Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

    Please fix or provide a way that a nonce can be passed through the component as props so that we can whitelist it in our CSP.

    Thanks, Richard

    Reviewed by Reinkaos at 2018-12-12 00:19
  • 10. Update readme.md to include example for Page component

    Hi there,

    I can't see any examples or doco for using The Page component. I want to be able to link to, and promote, my Facebook page in my react app. Thanks

    Reviewed by charliedotau at 2017-07-22 12:05
  • 11. Rerender when props are updated

    I have the following code:

    <FacebookProvider appId={this.props.appId}>
        <EmbeddedPost className="embedded-post" href={this.props.permalink_url} />
    </FacebookProvider>
    

    However, when this.props.permalink_url updates, the post does not update.

    It would be nice if the post reloads if the href prop updates

    Reviewed by hughbe at 2017-05-23 09:46
  • 12. Uncaught (in promise) Invariant Violation: Minified invariant #47458; %s Params: %s

    I had implemented Facebook Login and Messenger Customer Chat and everything works fine but now this error start to popping out recently.

    Any help would be appreciated.

    image

    Reviewed by ahmadchand at 2021-12-09 07:40
  • 13. `TypeError: Load failed` when using `LoginButton` on Instagram webview

    I'm using the LoginButton within the FacebookProvider. When a user successfully logs in via Fb, the onCompleted handler makes an api call to update credentials on the server. The onError handler simply logs the error.

    Recently I have been seeing a TypeError: Load failed after a user clicks the login button while using an Instagram webview.

    I can't quite figure out where in the chain of loading this might be occurring. Because this is happening nearly exclusively on Instagram webview, there is little to no other context provided around the error.

    Reviewed by mfrazie2 at 2021-11-24 17:04
  • 14. How to enable dark mode for Embedded Post?

    Reviewed by nitishmittal1990 at 2021-09-30 10:24
  • 15. Share is not working as expected

    I have implemented below code and it get trigger from a model popup of my website

    import React, { Component} from 'react';
    import { FacebookProvider, Share } from 'react-facebook';
    
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <Share href="http://www.facebook.com" >
              {({ handleClick, loading }) => (
                <button type="button" disabled={loading} onClick={handleClick}>Share</button>
              )}
            </Share>
          </FacebookProvider>
        );
      }
    }
    
    

    On Desktop it open new window, share given href on FB and close that window. But while doing same from mobile browser it open new window share link on FB and redirect to parent url. It should get close after share and come to parent window.

    Even I have tried display={isMobile?'touch':'popup'} mobileIframe={isMobile}

    Reviewed by lahoti-piyush at 2021-09-10 12:41
  • 16. Facebook API upcoming deprecations

    Please update the Facebook Api version... Thank you!

    API Version Deprecations:

    As part of Facebook’s Graph API and Marketing API, please note the upcoming deprecations:

    • August 3, 2021: Graph API v3.3 will be deprecated and removed from the platform
    • August 25, 2021 Marketing API v9.0 will be deprecated and removed from the platform
    • October 4, 2021: Marketing API v10.0 will be deprecated and removed from the platform
    • November 2, 2021: Graph API v4.0 will be deprecated and removed from the platform
    • February 3, 2022: Graph API v5.0 will be deprecated and removed from the platform
    Reviewed by rafamem at 2021-08-23 19:07
React-Login-app - Create a Login and Registration Page with React Router
React-Login-app - Create a Login and Registration Page with React Router

About In this repo I was given a Task to create a Login and Registration page wh

Dec 31, 2021
A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and simple way.

simple-sharer [by BUILDBROTHERS.COM] A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and

May 29, 2022
A comments system powered by GitHub Discussions.
A comments system powered by GitHub Discussions.

A comments system powered by GitHub Discussions. Let visitors leave comments and reactions on your website via GitHub! Heavily inspired by utterances.

Jun 24, 2022
A Comments App Build Using React.js
A Comments App Build Using React.js

In this project, let's build a Comments App by applying the concepts we have learned till now. Refer to the image below: Design Files Click to view Ex

Dec 14, 2021
This is a solution to the Interactive comments section challenge on Frontend Mentor
This is a solution to the Interactive comments section challenge on Frontend Mentor

Interactive comments section This is a solution to the Interactive comments section challenge on Frontend Mentor. Frontend Mentor challenges help you

Jun 15, 2022
Code examples for the blog post titled The Complete Guide to Full Stack Solana Development with React, Anchor, Rust, and Phantom
Code examples for the blog post titled The Complete Guide to Full Stack Solana Development with React, Anchor, Rust, and Phantom

The Complete Guide to Full Stack Solana Development with React, Anchor, Rust, and Phantom Code examples to go with the blog post available here Prereq

Jun 13, 2022
React Query and Axios example with CRUD operation - GET/POST/PUT/DELETE request with Rest API
React Query and Axios example with CRUD operation - GET/POST/PUT/DELETE request with Rest API

React Query Axios example with Rest API React Client with React Query and Axios to make CRUD requests to Rest API in that: React Query Axios GET reque

May 6, 2022
Jan 23, 2022
Chrome extension to preview and debug your webpage's meta tags for different social platforms like Twitter, Facebook, WhatsApp, LinkedIn etc.

ogmeta Chrome extension to preview and debug your webpage's meta tags for different social platforms like Twitter, Facebook, WhatsApp, LinkedIn etc. E

Apr 17, 2022
A web application that allows you to create and share wall of gifs! Built on top of solana blockchain.

Wall of gif with Solana A web application that allows you to create and share wall of gifs! Built on top of solana blockchain. Installation and Usage

Jan 1, 2022
Share code between different parts of your full-stack app
Share code between different parts of your full-stack app

Dryduck Every programmer knows dry. Don't repeat yourself. So why repeat yourself across platforms, writing the same thing twice? Dryduck is a tool fo

Dec 18, 2021
a simple dapp login interface made it with react-ts-chakra-ui and usedapp

a simple dapp login interface made it with react-ts-chakra-ui and usedapp

May 5, 2022
A simple tool to view Facebook Messenger exported JSON files
A simple tool to view Facebook Messenger exported JSON files

Facebook Messenger exported JSON viewer What's this? This is a simple tool to view Facebook Messenger exported JSON files. I made the UI into a Messen

Jun 8, 2022
Lightweight auth library based on oidc-client for React single page applications (SPA). Support for hooks and higher-order components (HOC).

Lightweight auth library based on oidc-client for React single page applications (SPA). Support for hooks and higher-order components (HOC).

Jun 19, 2022
This project created by Alper Efe Şahin. I used React.js, Firebase, CHAT Engine Lib.
This project created by Alper Efe Şahin. I used React.js, Firebase, CHAT Engine Lib.

This project created by Alper Efe Şahin. I used React.js, Firebase, CHAT Engine Lib. and Icon lib. You can login with Facebook or Google. You can create new chat group, add new users to chat group, you can remove his/her, and you can delete the chat group easily. Also you can upload file like pdf or images etc.

May 28, 2022
An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.
An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.

Transl8r About the Project Transl8r is an app designed to connect people and translators to provide fast, effective translations via live chat, video

Mar 26, 2022
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by

Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by

Jun 26, 2022
Calypso is the new WordPress.com front-end – a beautiful redesign of the WordPress dashboard using a single-page web application
Calypso is the new WordPress.com front-end – a beautiful redesign of the WordPress dashboard using a single-page web application

Calypso is the new WordPress.com front-end – a beautiful redesign of the WordPress dashboard using a single-page web application, powered by the WordPress.com REST API. Calypso is built for reading, writing, and managing all of your WordPress sites in one place.

Jun 19, 2022
A single page application that allows people to donate money.

This application was written in ReactJS. This is a SINGLE PAGE APPLICATION(SPA) that uses Pay On API to collect donation from users.Users can only make donations once in every hour

Apr 15, 2022