react-facebook-sdk

1.1.1 • Public • Published

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
  • Page
  • Feed

Support us

Star this project on GitHub.

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">
          <button type="button">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" />
      </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" /> Comments
      </FacebookProvider>
    );
  }
}

Login

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"
          onResponse={this.handleResponse}
          onError={this.handleError}
        >
          <span>Login via Facebook</span>
        </Login>
      </FacebookProvider>
    );
  }
}

Custom login render

If you want to use custom component you can use render or component property.

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"
          onResponse={this.handleResponse}
          onError={this.handleError}
          render={({ isLoading, isWorking, onClick }) => (
            <span onClick={onClick}>
              Login via Facebook
              {(isLoading || isWorking) && (
                <span>Loading...</span>
              )}
            </span>
          )}
        />
      </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, { EmbeddedPost } from 'react-facebook';
 
export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Page href="https://www.facebook.com" tabs="timeline" />
      </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 appId="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 appId="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 appId="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">
        <CustomChat  pageId="123456789" minimized={false}/>
      </FacebookProvider>    
    );
  }
}

Support us

Star this project on GitHub.

Try our other React components

Credits

Zlatko Fedor

Readme

Keywords

none

Package Sidebar

Install

npm i react-facebook-sdk

Weekly Downloads

272

Version

1.1.1

License

ISC

Last publish

Collaborators

  • flaviolivolsi