Facebook components like a Login button, Like, Share, Comments, Embedded Post/Video, Messenger Chat, and Facebook Pixel tracking
npm install react-facebookModern, TypeScript-ready, and feature-complete React components for Facebook integration
[![NPM version][npm-image]][npm-url]




[npm-image]: https://img.shields.io/npm/v/react-facebook.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-facebook
[github-url]: https://github.com/seeden/react-facebook
[support-url]: https://github.com/sponsors/seeden
- Complete Facebook SDK integration - Like, Share, Comments, Videos, Login, and more
- Modern React patterns - Built with TypeScript, React Hooks, and children as function pattern
- Dynamic locale support - Change Facebook widget language on-the-fly without page reload
- Facebook Pixel integration - Built-in conversion tracking, analytics, and GDPR compliance
- Flexible styling - Works with any CSS framework (Tailwind, styled-components, etc.)
- Tree-shakeable - Import only what you need for optimal bundle size
- Async initialization - Proper lazy loading with error handling and retry logic
- ✨ v10.0.1 Updates - Unified Login component, removed deprecated features, improved locale handling
``bash`
npm install react-facebookor
yarn add react-facebookor
pnpm add react-facebook
📖 Interactive Documentation - Live examples, playground, and complete API reference
Our documentation site includes:
- Live Playground - Test components with your own Facebook App ID
- Interactive Examples - Modify props and see results instantly
- Complete API Reference - All components, hooks, and props documented
- Copy-paste Examples - Ready-to-use code snippets
- Real Facebook Integration - All examples work with actual Facebook APIs
`tsx
import { FacebookProvider, Login } from 'react-facebook';
function App() {
return (
onError={(error) => console.error('Login failed:', error)}
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
>
Login with Facebook
);
}
`
- Available Components
- Core Components
- Authentication
- Social Features
- Advanced Features
- Facebook Pixel
- Advanced Usage
- FAQ
> ⚠️ v10.0.1 Breaking Changes: Removed deprecated Facebook components (CustomChat, MessageUs, MessengerCheckbox, SendToMessenger, Group, Save) and unified login components into a single Login component.
Authentication & Social:
- Login - Modern unified login component with children as function pattern
- Like - Facebook like button
- Share - Share dialog component
- ShareButton - Direct share button
Content & Media:
- EmbeddedPost - Embed Facebook posts
- EmbeddedVideo - Embed Facebook videos
- Comments - Comments plugin
- CommentsCount - Comment count display
- Page - Facebook page plugin
Core:
- FacebookProvider - SDK initialization and context
- FacebookPixelProvider - Standalone pixel provider
- Parser - Parse XFBML tags
Removed in v10.0.1 (deprecated by Facebook):
- ~~CustomChat~~ - Customer chat (discontinued May 2024)
- ~~MessageUs~~ - Message button (deprecated Sept 2024)
- ~~MessengerCheckbox~~ - Opt-in checkbox (deprecating July 2025)
- ~~SendToMessenger~~ - Send to messenger (deprecated Sept 2024)
- ~~Group~~ - Facebook group plugin (deprecated)
- ~~Save~~ - Save button (deprecated)
- ~~FacebookLogin~~ & ~~LoginButton~~ - Unified into Login component
Hooks:
- useLogin - Programmatic login control
- useProfile - Get user profile data
- useLoginStatus - Check authentication status
- useFacebook - Direct Facebook SDK access
- useLocale - Dynamic language switching
- usePixel - Facebook Pixel tracking
- usePageView - Automatic page view tracking
- useShare - Share functionality
The FacebookProvider component initializes the Facebook SDK and provides context to all child components.
`tsx`
version="v23.0" // Optional, defaults to latest
language="en_US" // Optional, defaults to en_US
lazy={false} // Optional, load SDK on demand
debug={false} // Optional, enable debug mode
pixel={{ // Optional, Facebook Pixel configuration
pixelId: "YOUR_PIXEL_ID",
debug: false,
autoConfig: true
}}
>
{/ Your app /}
A modern, unified Facebook login component (replaces FacebookLogin and LoginButton):
`tsx
// Basic usage with Tailwind CSS
onError={(error) => console.error('Error:', error)}
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg"
>
Continue with Facebook
// With automatic profile fetching
onSuccess={(response) => console.log('Login:', response)}
onProfileSuccess={(profile) => {
console.log('Profile:', profile); // Receives the profile data automatically
}}
scope={['public_profile', 'email']}
className="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-3 rounded-lg"
>
Sign in with Facebook
// Children as function pattern for complete control
onError={(error) => console.error('Error:', error)}
scope={['public_profile', 'email']}
>
{({ onClick, isLoading, isDisabled }) => (
onClick={onClick}
disabled={isDisabled}
className={px-6 py-3 font-semibold rounded-lg transition-all ${
isLoading
? 'bg-gray-400 cursor-not-allowed'
: 'bg-blue-600 hover:bg-blue-700 text-white'
}}
>
{isLoading ? 'Connecting...' : 'Continue with Facebook'}
)}
// Using custom component (as prop)
href="#"
className="text-blue-600 hover:underline"
onSuccess={(response) => console.log('Success:', response)}
>
Connect Facebook Account
`
For programmatic login control:
`tsx
function LoginComponent() {
const { login, isLoading, error } = useLogin();
async function handleLogin() {
try {
const response = await login({
scope: 'email,user_friends',
authType: ['rerequest'],
});
console.log('Logged in:', response);
} catch (error) {
console.error('Login failed:', error);
}
}
return (
);
}
`
`tsx`
colorScheme="dark"
showFaces
share
/>
`tsx
// Using the share hook
function ShareExample() {
const { share, isLoading } = useShare();
return (
);
}
// Using the share button component
className="my-share-button"
>
Share this
`
`tsx`
numPosts={5}
orderBy="reverse_time"
width="100%"
/>
`tsx`
tabs="timeline,events,messages"
width={500}
height={600}
/>
`tsx
// Embedded Post
width="500"
/>
// Embedded Video
width="500"
showText
/>
`
Change Facebook widget language dynamically:
`tsx
import { useLocale } from 'react-facebook';
function LocaleSwitcher() {
const { locale, setLocale, isChangingLocale, availableLocales } = useLocale();
return (
value={locale}
onChange={(e) => setLocale(e.target.value)}
disabled={isChangingLocale}
>
{availableLocales.map(loc => (
))}
);
}
`
If you were using the old components, here are the migration paths:
`tsx
// OLD: FacebookLogin or LoginButton
// NEW: Login (unified component)
// Deprecated components (removed)
`
Get started with Facebook Pixel tracking in just a few lines:
`tsx
import { FacebookProvider, usePixel } from 'react-facebook';
// Option 1: With FacebookProvider (includes SDK + Pixel)
pixel={{ pixelId: "YOUR_PIXEL_ID" }}
>
// Option 2: Pixel only (no Facebook SDK)
// Track events anywhere in your app
function TrackingComponent() {
const { track, pageView, trackCustom } = usePixel();
return (
$3
Facebook Pixel can be configured directly in the FacebookProvider:
`tsx
appId="YOUR_APP_ID"
pixel={{
pixelId: "YOUR_PIXEL_ID",
debug: true,
autoConfig: true,
advancedMatching: {
// Add advanced matching parameters (hashed)
}
}}
>
{/ Your app /}
`$3
Access pixel functionality with a clean API:
`tsx
import { usePixel } from 'react-facebook';function PixelExample() {
const { track, trackCustom, grantConsent, revokeConsent } = usePixel();
const handlePurchase = () => {
track('Purchase', {
value: 29.99,
currency: 'USD',
content_name: 'Premium Plan',
content_category: 'Subscription'
});
};
const handleCustomEvent = () => {
trackCustom('UserAction', {
action_type: 'button_click',
button_name: 'custom_action'
});
};
return (
);
}
`$3
Automatically track page views:
`tsx
import { usePageView } from 'react-facebook';function MyComponent() {
// Track on mount
usePageView({ trackOnMount: true });
// Track on route changes
usePageView({ trackOnRouteChange: true });
return
My Component;
}
`$3
Facebook Pixel supports these standard events:
- PageView
- ViewContent
- Search
- AddToCart
- AddToWishlist
- InitiateCheckout
- AddPaymentInfo
- Purchase
- Lead
- CompleteRegistration
$3
GDPR-compliant consent handling:
`tsx
function ConsentManager() {
const { grantConsent, revokeConsent } = usePixel();
return (
);
}
`Hooks
$3
`tsx
function ProfileDisplay() {
const { profile, isLoading, error } = useProfile(['id', 'name', 'email']);
if (isLoading) return Loading profile...;
if (error) return Error loading profile;
if (!profile) return Not logged in;
return (

{profile.name}
{profile.email}
);
}
`$3
`tsx
function AuthStatus() {
const { status, isLoading } = useLoginStatus();
return (
Status: {isLoading ? 'Checking...' : status}
);
}
`$3
Direct access to the Facebook SDK for advanced use cases:
`tsx
import { useFacebook } from 'react-facebook';function FacebookAPIExample() {
const { api } = useFacebook();
async function handleCustomAction() {
if (!api) return;
// Direct Graph API call
const response = await api.api('/me/friends', 'GET');
console.log(response);
// Custom UI dialog
await api.ui({
method: 'share',
href: 'https://example.com',
});
}
return ;
}
`Advanced Usage
$3
For advanced use cases, you can access the Facebook SDK directly:
`tsx
import { useFacebook } from 'react-facebook';function AdvancedComponent() {
const { api } = useFacebook();
async function makeCustomCall() {
if (!api) return;
const response = await api.api('/me/friends', 'GET');
console.log(response);
}
return ;
}
`
FAQ
$3
Important: Like and Comments plugins are affected by Facebook's privacy changes in European regions:
What's affected:
- Like Button component
- Comments Plugin component
Requirements for EU/EEA users:
- Must be logged into Facebook
- Must have consented to "App and Website Cookies" in Facebook settings
Result: If these requirements aren't met, the components will not be visible to users.
Affected regions: All EU/EEA countries and the United Kingdom.
This is a Facebook platform limitation, not a library issue. Consider alternative engagement methods for European users.
$3
This library doesn't include default styles. Use any CSS framework or styling solution:
`tsx
// Tailwind CSS
// CSS Modules
// Styled Components
`$3
Use only one FacebookProvider instance per application. If you need Facebook Pixel separately, you can use FacebookPixelProvider:
`tsx
import { FacebookPixelProvider } from 'react-facebook';
{/ Components that need pixel access /}
`Testing
`bash
Run component tests
npm run test:componentRun with UI
npm run test
``Are you using react-facebook in production? We'd love to showcase your success story!
If you find this project useful, please consider [becoming a sponsor][support-url].
Contributions are welcome! Please read our Contributing Guide.
MIT © Zlatko Fedor