facebook-plugins

Facebook plugins component built with and for ReactJS

Usage no npm install needed!

<script type="module">
  import facebookPlugins from 'https://cdn.skypack.dev/facebook-plugins';
</script>

README

Facebook Plugins

Install

Install the component using NPM:

$ npm install --save facebook-plugins

Usage

  1. Import Custom Element:

    import {
      FBComments,
      FBCommentsCount,
      FBEmbedPost,
      FBEmbedVideo,
      FBFollow,
      FBLike,
      FBPage,
      FBSend,
      FBShare
    } from 'facebook-plugins';
    
  2. Start using it!

    render() {
      <div>
        <div style={divStyle}>
          <FBLike appId="yourFacebookAppId"
            href="http://facebook.com"
            action="like"
            layout="button_count"
            locale="fr_CA"
            share={false}
            showFaces={false}/>
        </div>
        <div style={divStyle}>
          <FBSend appId="yourFacebookAppId"
            href="http://facebook.com"/>
        </div>
        <div style={divStyle}>
          <FBShare appId="yourFacebookAppId"
            href="http://facebook.com"
            layout="box_count"
            locale="fr_CA"/>
        </div>
        <div style={divStyle}>
          <FBEmbedPost appId="yourFacebookAppId"
            href="https://www.facebook.com/20531316728/posts/10154009990506729/"
            width={750}
            locale="fr_CA"/>
        </div>
        <div style={divStyle}>
          <FBEmbedVideo appId="yourFacebookAppId"
            href="https://www.facebook.com/facebook/videos/10153231379946729/"
            width={750}
            locale="fr_CA"/>
        </div>
        <div style={divStyle}>
          <FBComments appId="yourFacebookAppId"
            href="http://developers.facebook.com/docs/plugins/comments/"
            width={750}
            numPosts={5}
            locale="fr_CA"/>
        </div>
        <div style={divStyle}>
          <FBCommentsCount appId="yourFacebookAppId"
            href="http://developers.facebook.com/docs/plugins/comments/"
            width={750}
            numPosts={5}
            locale="fr_CA"/>
        </div>
        <div style={divStyle}>
          <FBPage appId="yourFacebookAppId"
            href="https://www.facebook.com/facebook"
            tabs={['timeline', 'events', 'messages']}/>
        </div>
        <div style={divStyle}>
          <FBFollow appId="yourFacebookAppId"
            href="https://www.facebook.com/zuck"
            tabs={['timeline', 'events', 'messages']}/>
        </div>
      </div>
    }
    

Roadmap

  • Like
  • Share
  • Send
  • EmbedPost
  • EmbedVideo
  • Page
  • Comments
  • CommentsCount
  • Follow

License

MIT License