React Facebook Components
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
- Embedded video
- Page
- Feed
- Group
- Message Us
- Customer Chat
- Status
- Subscribe
- User Profile
Support us
Star this project on GitHub.
Initialisation
By default FacebookProvider is loading facebook script immediately with componentDidMount (you are able to use it with SSR). If you want to download facebook script only when facebook component is rendered you need to add parameter wait to FacebookProvider. Use only one instance of the FacebookProvider on your page.
Usage
Like button
;; { return <FacebookProvider appId="123456789"> <Like href="http://www.facebook.com" colorScheme="dark" showFaces share /> </FacebookProvider> ; }
Share post
;; { return <FacebookProvider appId="123456789"> <Share href="http://www.facebook.com"> <button type="button" disabled="loading" onClick=handleClick>Share</button> </Share> </FacebookProvider> ; }
Share button
You can use predefined button with bootstrap and font awesome classNames
;; { return <FacebookProvider appId="123456789"> <ShareButton href="http://www.facebook.com"> Share </ShareButton> </FacebookProvider> ; }
Comments
;; { return <FacebookProvider appId="123456789"> <Comments href="http://www.facebook.com" /> </FacebookProvider> ; }
Comments count
;; { return <FacebookProvider appId="123456789"> <CommentsCount href="http://www.facebook.com" /> </FacebookProvider> ; }
Login Button
;; { console; } { this; } { return <FacebookProvider appId="123456789"> <LoginButton scope="email" onCompleted=thishandleResponse onError=thishandleError > <span>Login via Facebook</span> </LoginButton> </FacebookProvider> ; }
Custom login render
If you want to use custom component you can use children as function.
;; { console; } { this; } { return <FacebookProvider appId="123456789"> <Login scope="email" onCompleted=thishandleResponse onError=thishandleError > <span onClick=handleClick> Login via Facebook loading && <span>Loading...</span> </span> </Login> </FacebookProvider> ; }
Embedded post
;; { return <FacebookProvider appId="123456789"> <EmbeddedPost href="http://www.facebook.com" width="500" /> </FacebookProvider> ; }
Page
;; { return <FacebookProvider appId="123456789"> <Page href="https://www.facebook.com" tabs="timeline" /> </FacebookProvider> ; }
Feed
;; { return <FacebookProvider appId="123456789"> <Feed link="https://www.facebook.com"> <button type="button" onClick=handleClick>Share on Feed</button> </Feed> </FacebookProvider> ; }
Group
;; { return <FacebookProvider appId="123456789"> <Group href="https://www.facebook.com/groups/375934682909754" width="300" showSocialContext=true showMetaData=true skin="light" /> </FacebookProvider> ; }
MessageUs
;; { return <FacebookProvider appId="123456789"> <MessageUs messengerAppId="123456789" pageId="123456789"/> </FacebookProvider> ; }
SendToMessenger
;; { return <FacebookProvider appId="123456789"> <SendToMessenger messengerAppId="123456789" pageId="123456789"/> </FacebookProvider> ; }
MessengerCheckbox
;; { return <FacebookProvider appId="123456789"> <MessengerCheckbox messengerAppId="123456789" pageId="123456789"/> </FacebookProvider> ; }
CustomChat
;; { return <FacebookProvider appId="123456789"> <CustomChat pageId="123456789" minimized=false/> </FacebookProvider> ; }
API Access
;; { return <FacebookProvider appId="123456789"> <Initialize> { api // our custom async/await api // original FB api is available via window.FB } <Initialize> </FacebookProvider> ; }
Subscribe
;; { console; } { return <FacebookProvider appId="123456789"> <Subscribe event="auth.statusChange" onChange=thishandleChange /> </FacebookProvider> ; }
Login Status
;; { console; } { return <FacebookProvider appId="123456789"> <Status> <div> ... </div> </Status> </FacebookProvider> ; }
User Profile
This component will not sign user. You need to do that with another component. Default scope: 'id', 'first_name', 'last_name', 'middle_name', 'name', 'name_format', 'picture', 'short_name', 'email'. If profile is undefined login status !== LoginStatus.CONNECTED
;; { console; } { return <FacebookProvider appId="123456789"> <Profile> <div> profilepicture profilename </div> </Profile> </FacebookProvider> ; }
Support us
Star this project on GitHub.
Try our other React components
- Translate your great project react-translate-maker
- Google Analytics react-g-analytics
- Google AdSense via Google Publisher Tag react-google-publisher-tag