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

Overview

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

Comments
  • Refused to display in frame ... Console Error

    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 :)

    question 
    opened by tazaka 12
  • Comments not showing up on mobile screens

    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.
    
    
    opened by Jaikant 11
  • Like button missing

    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.

    opened by alexgarces 10
  • [React] React is not defined

    [React] React is not defined

    Hello, @seeden, I am try to use react facebook in my project. But when I add Facebook provider to my project, It throwing an error like this ReferenceError: React is not defined

    My Project running with-

    1. Next js
    2. Typescript

    The version I am using- Latest version 9.0.7

    <FacebookProvider appId={process.env.NEXT_PUBLIC_FACEBOOK_APP_ID as string}>
            <FacebookLogins />
     </FacebookProvider>
    

    And this is FacebookLogins.tsx Component-

    import { useLogin } from 'react-facebook';
    
    export default function LoginExample() {
        const { login, status, isLoading, error } = useLogin();
    
        async function handleLogin() {
            try {
                const response = await login({
                    scope: 'email',
                });
    
                console.log(response.status);
            } catch (error: any) {
                console.log(error.message);
            }
        }
    
        return (
            <button onClick={handleLogin} disabled={isLoading}>
                Login via Facebook
            </button>
        );
    }
    

    Where I am wrong, How can I solve it.

    image

    opened by siamahnaf198 8
  • Changed SDK to support customerchat

    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.

    enhancement 
    opened by SanderPeeters 7
  • Customer Chat Plugin deprecation warning

    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
    ########################## 
    enhancement 
    opened by phillytan 7
  • Token is undefined

    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>
    
    opened by fyn-dev 6
  • Post embed width under 350px

    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>
    
    enhancement 
    opened by camel113 6
  • Uncaught (in promise) Invariant Violation: Minified invariant #47458; %s Params: %s

    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

    opened by ahmadchand 5
  • Cannot use boolean with 'mobile' props in Comments component

    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>
    
    question 
    opened by c0dester 5
  • CSP Violation in v6

    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

    enhancement 
    opened by richardmatthewsdev 5
  • Nothing happened

    Nothing happened

    After install latest version, React is not defined issue was solved, but nothing is working. Login, like, share... When I click Facebook login button, it is not working at all, no error messages or no popup dialog ..

    opened by cgrewon 5
  • [Gatsby] React is not defined

    [Gatsby] React is not defined

    I was using react-facebook v8.14.0 on my Gatsby site and updated to v.9.0.5 recently. After the update I tried to build my site again and I saw the following error message.

    WebpackError: ReferenceError: React is not defined
    

    Not sure how to fix the problem and would like to see if other people saw this message.

    opened by winstonma 8
  • `TypeError: Load failed` when using `LoginButton` on Instagram webview

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

    opened by mfrazie2 0
  • How to enable dark mode for Embedded Post?

    How to enable dark mode for Embedded Post?

    opened by nitishmittal1990 0
  • Share is not working as expected

    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}

    opened by lahoti-piyush 0
Releases(8.1.4)
  • 8.1.4(Nov 15, 2019)

    Used html5 attribute for color and size. More info https://developers.facebook.com/docs/messenger-platform/reference/web-plugins#message_us%2F

    Source code(tar.gz)
    Source code(zip)
  • 8.1.2(Nov 11, 2019)

    Deprecation Notice minimized attribute is now deprecated. Please use greeting_dialog_display to customize your plugin instead. The greeting_dialog_delay attribute will take precedence of the minimized attribute

    more info: https://developers.facebook.com/docs/messenger-platform/reference/web-plugins#attributes

    Source code(tar.gz)
    Source code(zip)
  • 8.0.2(Mar 25, 2019)

  • 7.0.4(Mar 10, 2019)

  • 7.0.2(Feb 18, 2019)

  • 6.0.10(Oct 9, 2018)

  • 6.0.8(Oct 9, 2018)

  • 6.0.4(Oct 5, 2018)

  • 5.0.2(Mar 28, 2018)

  • 4.1.1(Nov 9, 2017)

    supported nodejs version >= 6.1 supported browsers: last 3 versions, > 1% if you need different support use esnext property in your webpack removed unused data-appID and context from page component

    Source code(tar.gz)
    Source code(zip)
  • 4.0.16(Sep 29, 2017)

  • 4.0.2(Apr 28, 2017)

    I refactored almost all components to stateless react components. Added Parser and InitFacebook component [Breaking change] - Login, Share and Feed Component are using facebook.ui instead of own popup window. All components now support event onReady, onResponse and onError

    Source code(tar.gz)
    Source code(zip)
  • 3.0.5(Apr 28, 2017)

  • 3.0.1(Apr 28, 2017)

    I have replaced all callbacks with async/await functions. [Braking change] - Parameter appID was changed to appId [Braking change] - Default facebook version is v2.9 [Braking change] - Login has two parameters onError and onResponse instead of just onResponse Login and Share component has two new properties "render" and "component". You can use your own components with this "high-order-components". You can find example in the readme Use babel polyfill for backward compatibility with older browsers

    Source code(tar.gz)
    Source code(zip)
  • 2.2.12(Apr 24, 2017)

  • 2.2.5(Dec 22, 2016)

  • 2.2.2(Dec 6, 2016)

  • 2.2.1(Nov 17, 2016)

    Refactored page component (added missing attributes) Braking change in Login component onSubmit => onResponse updated deps added jest and enzyme

    Source code(tar.gz)
    Source code(zip)
  • 2.0.8(Sep 12, 2016)

  • 2.0.7(Sep 12, 2016)

  • 2.0.6(Jul 18, 2016)

  • 2.0.2(Jun 27, 2016)

    Updated default parameters (it is equal with facebook default parameters) Added Comments and CommentsCount thank you @MrNice42 Added share to like button thank you @agilgur5 @deps react 15.x

    Source code(tar.gz)
    Source code(zip)
Owner
Zlatko Fedor
I am fullstack developer mainly focusing on JavaScript.
Zlatko Fedor
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

Devanshu Desai 1 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

null 5 May 29, 2022
🚀🚀 A Shopify App template for serverless, non-embedded Apps.

?? Free Shopify x Next.js App Template for serverless non-embedded Apps Everything to build your next non-embedded Shopify App and Marketing pages in

Carsten Lebek 65 Nov 10, 2022
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.

giscus 3.4k Nov 15, 2022
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

null 2 Sep 19, 2022
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

Haikal Maulana 6 Jul 1, 2022
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

Nader Dabit 431 Nov 18, 2022
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

null 16 Nov 7, 2022
Kai Tinkess 2 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

Vamsi Rao 22 Aug 4, 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

Sunrit Jana 4 Jan 1, 2022
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

Code From Anywhere 2 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

Sergio 1 May 5, 2022
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

Yukai Huang 17 Nov 5, 2022
Annoying Submit Button in a Form using ReactJS

Annoying Submit Button in React - You won't be able to submit the form until you enter correct length of password. Enjoy playing with it. :)

Zain Sadaqat 52 Nov 15, 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. 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.

Alper Efe Şahin 12 Sep 29, 2022
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

Richard Barnes 8 Oct 27, 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).

null 180 Nov 23, 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

Cruip 1.6k Nov 16, 2022