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

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

  render() {
    return (
      <FacebookProvider appID="123456789">
        <Login scope="email" onSubmit={this.onFacebookSubmit.bind(this)} children="Log in with Facebook"/>
      </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>
    );
  }
}

Support us

Star this project on GitHub.

Try our other React components

• Translate your great project react-translate-maker
• Google Analytics react-g-analytics
• Google AdSense via Google Publisher Tag react-google-publisher-tag

Credits

Zlatko Fedor