{"id":26685927,"url":"https://github.com/CherryProjects/react-facebook","last_synced_at":"2025-03-26T11:01:13.063Z","repository":{"id":52037940,"uuid":"52218512","full_name":"seeden/react-facebook","owner":"seeden","description":"Facebook components like a Login button, Like, Share, Chat, Comments, Page or Embedded Post","archived":false,"fork":false,"pushed_at":"2023-08-07T17:25:15.000Z","size":559,"stargazers_count":797,"open_issues_count":39,"forks_count":144,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-23T17:06:56.995Z","etag":null,"topics":["facebook","facebook-api","facebook-components","javascript","react","react-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seeden.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["seeden"]}},"created_at":"2016-02-21T17:31:51.000Z","updated_at":"2025-02-18T16:20:31.000Z","dependencies_parsed_at":"2024-06-10T11:32:39.634Z","dependency_job_id":"5e5d5fd6-465c-42a7-8e42-1d5aed8bdb19","html_url":"https://github.com/seeden/react-facebook","commit_stats":{"total_commits":215,"total_committers":30,"mean_commits":7.166666666666667,"dds":"0.27441860465116275","last_synced_commit":"252bae057a3e51cde93b407a1774d87a513a9d5d"},"previous_names":["cherryprojects/react-facebook","goodmodule/react-facebook","seeden/react-facebook"],"tags_count":91,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seeden%2Freact-facebook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seeden%2Freact-facebook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seeden%2Freact-facebook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seeden%2Freact-facebook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seeden","download_url":"https://codeload.github.com/seeden/react-facebook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245641426,"owners_count":20648641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["facebook","facebook-api","facebook-components","javascript","react","react-components"],"created_at":"2025-03-26T11:01:12.362Z","updated_at":"2025-03-26T11:01:12.984Z","avatar_url":"https://github.com/seeden.png","language":"TypeScript","readme":"# React Facebook Components\n\n[![NPM version][npm-image]][npm-url]\n\n[npm-image]: https://img.shields.io/npm/v/react-facebook.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/react-facebook\n[travis-image]: https://img.shields.io/travis/seeden/react-facebook/master.svg?style=flat-square\n[travis-url]: https://travis-ci.org/seeden/react-facebook\n[coveralls-image]: https://img.shields.io/coveralls/seeden/react-facebook/master.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/seeden/react-facebook?branch=master\n[github-url]: https://github.com/seeden/react-facebook\n[support-url]: https://github.com/sponsors/seeden\n\n# Components\n\n- Facebook provider (provide settings to child components)\n- Login button (provide user profile and signed request)\n- Like button\n- Share and Share button\n- Comments\n- Comments count\n- Embedded post\n- Embedded video\n- Page\n- Feed\n- Group\n- Message Us\n- Customer Chat\n- Save\n- Status\n- Share\n- Subscribe\n- User Profile\n\n# Support\n\n[Become my sponsor][support-url] and help me maintain this project. Thank you\n\n# Initialisation\n\nBy default FacebookProvider is loading facebook script immediately after render (you are able to use it with SSR).\nIf you want to download facebook script only when facebook component is rendered you need to add parameter lazy to FacebookProvider.\nUse only one instance of the FacebookProvider on your page.\n\n\n# Usage\n\n## Like button\n\n```tsx\nimport { FacebookProvider, Like } from 'react-facebook';\n\nexport default function LikeExample() {\n  return (\n    \u003cFacebookProvider appId=\"123456789\"\u003e\n      \u003cLike href=\"http://www.facebook.com\" colorScheme=\"dark\" showFaces share /\u003e\n    \u003c/FacebookProvider\u003e\n  );\n}\n```\n\n## useShare\n\n```tsx\nimport { FacebookProvider, useShare } from 'react-facebook';\n\nexport default function ShareExample() {\n  const { share, isLoading, error } = useShare();\n\n  async function handleShare() {\n    await share({\n      href: 'http://www.facebook.com',\n    });\n  }\n\n  return (\n    \u003cbutton type=\"button\" disabled={isLoading} onClick={handleShare}\u003eShare\u003c/button\u003e\n  );\n}\n```\n\n## Share button\n\nYou can use predefined button\n\n```tsx\nimport { FacebookProvider, ShareButton } from 'react-facebook';\n\nexport default function ShareButtonExample() {\n  return (\n    \u003cFacebookProvider appId=\"123456789\"\u003e\n      \u003cShareButton href=\"http://www.facebook.com\" className=\"my-classname\"\u003e\n        Share\n      \u003c/ShareButton\u003e\n    \u003c/FacebookProvider\u003e\n  );\n}\n```\n\n## Comments\n\n```tsx\nimport { FacebookProvider, Comments } from 'react-facebook';\n\nexport default function CommentsExample() {\n  return (\n    \u003cFacebookProvider appId=\"123456789\"\u003e\n      \u003cComments href=\"http://www.facebook.com\" /\u003e\n    \u003c/FacebookProvider\u003e\n  );\n}\n```\n\nIf comments do not work and you are seeing this error in the browser console:\n\n`Refused to display 'https://www.facebook.com/v3.1/plugins/comments.php?blahblahblah' in a frame because it set 'X-Frame-Options' to 'DENY'.`\n\nPossible reasons:\n1. If the site visitor is from the EU region, the visitor needs to be **both**:\n    - Logged in to Facebook.\n    - Have third-party cookies enabled in FB privacy settings.\n2. User is using a browser that is blocking third party cookies by default (for example Safari and Firefox).\n\nIt is not a bug in this library, [there is no way around it](https://developers.facebook.com/support/bugs/854001531875629/).\n\n\n## Comments count\n\n```tsx\nimport { FacebookProvider, CommentsCount } from 'react-facebook';\n\nexport default function CommentsCountExample() {\n  return (\n    \u003cFacebookProvider appId=\"123456789\"\u003e\n      \u003cCommentsCount href=\"http://www.facebook.com\" /\u003e\n    \u003c/FacebookProvider\u003e\n  );\n}\n```\n\n## useLogin\n\n```tsx\nimport { FacebookProvider, useLogin } from 'react-facebook';\n\nexport default function LoginExample() {\n  const { login, status, isLoading, error} = useLogin();\n  \n  async function handleLogin() {\n    try {\n      const response = await login({\n        scope: 'email',\n      });\n\n      console.log(response.status);\n    } catch (error: any) {\n      console.log(error.message);\n    }\n  }\n\n  return (\n    \u003cbutton onClick={handleLogin} disabled={isLoading}\u003e\n      Login via Facebook\n    \u003c/button\u003e\n  );\n}\n```\n\n### LoginButton\n\n```tsx\nimport { FacebookProvider, LoginButton } from 'react-facebook';\n\nexport default function LoginButtonExample() {\n  functon handleSuccess(response) {\n    console.log(response.status);\n  }\n\n  function handleError(error) {\n    console.log(error);\n  }\n\n  return (\n    \u003cFacebookProvider appId=\"123456789\"\u003e\n      \u003cLoginButton\n        scope=\"email\"\n        onError={handleError}\n        onSuccess={handleSuccess}\n      \u003e\n        Login via Facebook\n      \u003c/LoginButton\u003e\n    \u003c/FacebookProvider\u003e\n  );\n}\n```\n\n## Embedded post\n\n```tsx\nimport { FacebookProvider, EmbeddedPost } from 'react-facebook';\n\nexport default function EmbeddedPostExample() {\n  return (\n    \u003cFacebookProvider appId=\"123456789\"\u003e\n      \u003cEmbeddedPost href=\"http://www.facebook.com\" width=\"500\" /\u003e\n    \u003c/FacebookProvider\u003e\n  );\n}\n```\n\n\n## Page\n\n```js\nimport React, { Component} from 'react';\nimport { FacebookProvider, Page } from 'react-facebook';\n\nexport default class Example extends Component {\n  render() {\n    return (\n      \u003cFacebookProvider appId=\"123456789\"\u003e\n        \u003cPage href=\"https://www.facebook.com\" tabs=\"timeline\" /\u003e\n      \u003c/FacebookProvider\u003e    \n    );\n  }\n}\n```\n\n## Feed\n\n```js\nimport React, { Component} from 'react';\nimport { FacebookProvider, Feed } from 'react-facebook';\n\nexport default class Example extends Component {\n  render() {\n    return (\n      \u003cFacebookProvider appId=\"123456789\"\u003e\n        \u003cFeed link=\"https://www.facebook.com\"\u003e\n          {({ handleClick }) =\u003e (\n            \u003cbutton type=\"button\" onClick={handleClick}\u003eShare on Feed\u003c/button\u003e\n          )}\n        \u003c/Feed\u003e\n      \u003c/FacebookProvider\u003e    \n    );\n  }\n}\n```\n\n## Group\n\n```js\nimport React, { Component } from 'react';\nimport { FacebookProvider, Group } from 'react-facebook';\n\nexport default class Example extends Component {\n  render() {\n    return (\n      \u003cFacebookProvider appId=\"123456789\"\u003e\n        \u003cGroup\n          href=\"https://www.facebook.com/groups/375934682909754\"\n          width=\"300\"\n          showSocialContext={true}\n          showMetaData={true}\n          skin=\"light\"\n        /\u003e\n      \u003c/FacebookProvider\u003e    \n    );\n  }\n}\n```\n\n## MessageUs\n\n```js\nimport React, { Component} from 'react';\nimport { FacebookProvider, MessageUs } from 'react-facebook';\n\nexport default class Example extends Component {\n  render() {\n    return (\n      \u003cFacebookProvider appId=\"123456789\"\u003e\n        \u003cMessageUs messengerAppId=\"123456789\" pageId=\"123456789\"/\u003e\n      \u003c/FacebookProvider\u003e    \n    );\n  }\n}\n```\n\n## SendToMessenger\n\n```js\nimport React, { Component} from 'react';\nimport { FacebookProvider, SendToMessenger } from 'react-facebook';\n\nexport default class Example extends Component {\n  render() {\n    return (\n      \u003cFacebookProvider appId=\"123456789\"\u003e\n        \u003cSendToMessenger messengerAppId=\"123456789\" pageId=\"123456789\"/\u003e\n      \u003c/FacebookProvider\u003e    \n    );\n  }\n}\n```\n\n\n## MessengerCheckbox\n\n```js\nimport React, { Component} from 'react';\nimport { FacebookProvider, MessengerCheckbox } from 'react-facebook';\n\nexport default class Example extends Component {\n  render() {\n    return (\n      \u003cFacebookProvider appId=\"123456789\"\u003e\n        \u003cMessengerCheckbox messengerAppId=\"123456789\" pageId=\"123456789\"/\u003e\n      \u003c/FacebookProvider\u003e    \n    );\n  }\n}\n```\n\n\n## CustomChat\n\n```js\nimport React, { Component} from 'react';\nimport { FacebookProvider, CustomChat } from 'react-facebook';\n\nexport default class Example extends Component {\n  render() {\n    return (\n      \u003cFacebookProvider appId=\"123456789\" chatSupport\u003e\n        \u003cCustomChat pageId=\"123456789\" minimized={false}/\u003e\n      \u003c/FacebookProvider\u003e    \n    );\n  }\n}\n```\n\n## API Access\n\n```tsx\nimport { FacebookProvider, useFacebook } from 'react-facebook';\n\nexport default function UseFacebookExample() {\n  const { isLoading, init, error } = useFacebook();\n\n  async function handleClick() {\n    const api = await init();\n\n    const response = await api.login();\n    const FB = await api.getFB(); // Get original FB object\n  }\n\n  return (\n    \u003cbutton disabled={isLoading} onClick={handleClick}\u003e\n      Login\n    \u003c/button\u003e\n  );\n}\n```\n\n## useSubscribe - Subscribe to events\n\n```tsx\nimport { FacebookProvider, useSubscribe } from 'react-facebook';\n\nexport default function UseSubscribeExample() {\n  const latestValue = useSubscribe('auth.statusChange', (value) =\u003e {\n    console.log('new response', value);\n  });\n\n  return (\n    \u003cdiv\u003e\n      {latestValue}\n    \u003c/div\u003e\n  );\n}\n```\n\n## useLoginStatus - read login status of current user\n\n```tsx\nimport { FacebookProvider, useLoginStatus } from 'react-facebook';\n\nexport default function UseLoginStatusExample() {\n  const { status, isLoading, error } = useLoginStatus();\n\n  return (\n    \u003cdiv\u003e\n      Current user login status: {isLoading ? 'Loading...' : status}\n    \u003c/div\u003e\n  );\n}\n```\n\n## User Profile\n\nThis component will not sign user. You need to do that with another component.\nDefault scope: 'id', 'first_name', 'last_name', 'middle_name', 'name', 'name_format', 'picture', 'short_name', 'email'.\nIf profile is undefined login status !== LoginStatus.CONNECTED\n\n```tsx\nimport { FacebookProvider, useProfile } from 'react-facebook';\n\nexport default function UseProfileExample() {\n  const { profile, isLoading, error } = useProfile(['id', 'name']);\n\n  return (\n    \u003cdiv\u003e\n      {profile?.name} has id: {profile?.id}\n    \u003c/div\u003e    \n  );\n}\n```\n\n# Testing\n\n```sh\nnpx cypress open --component\n```\n\n# Support\n\n[Become my sponsor][support-url] and help me maintain this project. Thank you\n\n## Credits\n\n[Zlatko Fedor](http://github.com/seeden)\n","funding_links":["https://github.com/sponsors/seeden"],"categories":["UI Components","\u003csummary\u003eUI Components\u003c/summary\u003e","Demos"],"sub_categories":["Miscellaneous"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCherryProjects%2Freact-facebook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCherryProjects%2Freact-facebook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCherryProjects%2Freact-facebook/lists"}