Skip to content

Fanna1119/react-facebook-social-plugins

Repository files navigation

React Facebook Plugins

A simple React wrapper for Facebook social plugins, including Comments, Like Button, Share Button, Page Plugin, and Embedded Posts.

🚀 Easily integrate Facebook social features into your React applications without manually handling the SDK!

Features

Lightweight: No unnecessary dependencies.
Modular: Use only the components you need.
Reusability: Uses a shared useFacebookSDK hook to load the SDK only once.
Fully Customizable: Supports all available attributes for each plugin.
Lazy Loading Support: Improve performance by deferring rendering.


Installation

Install via npm or yarn:

npm install react-facebook-plugins

or

yarn add react-facebook-plugins

Usage

1. Facebook Comments Plugin

import FacebookComments from 'react-facebook-plugins';

const App = () => (
    <FacebookComments url="https://example.com" numPosts={5} width="100%" />
);

🔹 Options: numPosts, width, colorscheme, orderBy, lazy, etc.


2. Facebook Like Button

import FacebookLikeButton from 'react-facebook-plugins';

const App = () => (
    <FacebookLikeButton url="https://example.com" layout="button_count" size="large" />
);

🔹 Options: layout, size, action, showShare, etc.


3. Facebook Share Button

import FacebookShareButton from 'react-facebook-plugins';

const App = () => (
    <FacebookShareButton url="https://example.com" layout="button_count" size="small" />
);

🔹 Options: layout, size, lazy, etc.


4. Facebook Page Plugin

import FacebookPagePlugin from 'react-facebook-plugins';

const App = () => (
    <FacebookPagePlugin 
        pageUrl="https://www.facebook.com/facebook"
        width={380} 
        height={500} 
        tabs="timeline,events"
        showFacepile={true} 
    />
);

🔹 Options: tabs, hideCover, smallHeader, lazy, etc.


5. Facebook Embedded Post

import FacebookEmbeddedPost from 'react-facebook-plugins';

const App = () => (
    <FacebookEmbeddedPost url="https://www.facebook.com/facebook/posts/12345" width="500" />
);

🔹 Options: width, lazy, showText, etc.


Common Issues & Troubleshooting

  • SDK Not Loading?
    Ensure the component is inside the React tree when rendered.
  • Facebook Plugins Not Showing?
    Make sure the URL is public and not restricted.
  • Dynamic Content Not Updating?
    The Facebook SDK may need to be re-parsed. Try refreshing the page.

Contributing

Pull requests and feature suggestions are welcome! 🚀


License

This project is MIT licensed.


Disclaimer

This project is NOT affiliated with, endorsed by, or associated with Facebook, Meta, or any of its products. It is an independent React library built for easier integration of Facebook plugins.

About

A React wrapper for Facebook social plugins

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published