Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

react-facebook-extended

2.2.6 • 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

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

Support us

Star this project on GitHub.

Try our other React components

Credits

Zlatko Fedor

Install

npm i react-facebook-extended

DownloadsWeekly Downloads

4

Version

2.2.6

License

MIT

Last publish

Collaborators

  • avatar