React-facebook-extended NPM

React Facebook Components

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

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>
    );
  }
}

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 {
  onFacebookResponse(data, user_data) {
    console.log(data);
    console.log(user_data);
  }

  render() {
    return (
      <FacebookProvider appID="123456789">
        <Login scope="email" onResponse={this.onFacebookResponse.bind(this)}>
          <span>Login via Facebook</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>
    );
  }
}