Live Demo

Interactive Facebook components with real API integration. Modify properties and see instant results.

Facebook App Configuration

💡 Use your own Facebook App ID to test with your app's configuration. Components will update immediately when you change the App ID or locale.

Share Dialog

Open Facebook's share dialog with custom parameters

Properties

The URL that will be shared

Button layout style

Button size

Preview
Code
<Share 
  href="https://github.com/seeden/react-facebook"
  size="small"
  layout="button"
/>

Share Button

Alternative share button implementation using JavaScript SDK

Properties

The URL that will be shared

Optional hashtag for the share (e.g., #reactfacebook)

Preview
Code
<ShareButton 
  href="https://github.com/seeden/react-facebook"
  hashtag="#reactfacebook"
  className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
>
  Share on Facebook
</ShareButton>

Login Button

Facebook login with custom scope permissions

Properties

How to render the login component

Text to display in the button

Comma-separated list of permissions

Fields to fetch from user profile

Preview
Code
<Login
  scope={['public_profile', 'email']}
  fields={['id', 'name', 'email', 'picture']}
  onSuccess={(response) => console.log('Login Success!', response)}
  onError={(error) => console.log('Login Failed!', error)}
  onProfileSuccess={(profile) => console.log('Profile:', profile)}
>
  Login with Facebook
</Login>

Like Button

Facebook like button with customizable layout and appearance

Users in EU/EEA countries and the UK will not see this component unless they are logged into Facebook and have consented to cookies.

Properties

The URL that will be liked

Button layout style

Button size

Light or dark theme

Show faces
Include share button
Preview
Code
<Like
  href="https://github.com/seeden/react-facebook"
  layout="standard"
  size="small"
  showFaces={false}
  share={false}
  colorScheme="light"
/>

Comments Plugin

Embedded Facebook comments for any URL

Users in EU/EEA countries and the UK will not see this component unless they are logged into Facebook and have consented to cookies.

Properties

The URL to show comments for

How many comments to show

How to sort comments

Plugin width in pixels

Light or dark theme

Preview
Code
<Comments
  href="https://github.com/seeden/react-facebook"
  numPosts={10}
  orderBy="reverse_time"
  width={550}
  colorScheme="light"
/>

Page Plugin

Embed a Facebook page in your website

Properties

URL of the Facebook page

Which tabs to show

Plugin width in pixels

Plugin height in pixels

Small header
Hide cover photo
Show friend's faces
Preview
Code
<Page
  href="https://www.facebook.com/meta"
  tabs="timeline"
  width={340}
  height={500}
  smallHeader={false}
  hideCover={false}
  showFacepile={true}
/>

Embedded Post

Embed a Facebook post in your website

Properties

URL of the Facebook post

Plugin width in pixels

Show full post text
Preview
Code
<EmbeddedPost
  href="https://www.facebook.com/reel/1730774764310324"
  width={500}
  showText={true}
/>

Embedded Video

Embed a Facebook video in your website

Properties

URL of the Facebook video

Plugin width in pixels

Show video text
Auto play
Show captions
Allow full screen
Preview
Code
<EmbeddedVideo
  href="https://www.facebook.com/Meta/videos/1038522214125952"
  width={500}
  showText={true}
  autoPlay={false}
  showCaptions={false}
  allowFullScreen={true}
/>

Comments Count

Show the number of comments for any URL

Properties

URL to get comment count for

Preview
Code
<CommentsCount href="https://github.com/seeden/react-facebook" />

Facebook Pixel Tracking

Real Facebook Pixel integration with comprehensive event tracking

Preview
Demo: These buttons simulate Facebook Pixel events. In your app with the react-facebook package, these would trigger real tracking events to Facebook.
Code
import { usePixel } from 'react-facebook';


function PixelDemo() {
  const { track, trackCustom, pageView, grantConsent } = usePixel();


  const handlePurchase = () => {
    track('Purchase', {
      value: 29.99,
      currency: 'USD',
      contents: [{ id: 'product-123', quantity: 1 }]
    });
  };


  return (
    <div className="space-y-4">
      <button onClick={handlePurchase}>Track Purchase</button>
      <button onClick={() => trackCustom('CustomEvent')}>Custom Event</button>
    </div>
  );
}

Ready to use in your project?

Replace the demo App ID with your own Facebook App ID for production use.

Setup GuideAPI Reference