seeden / react-facebook

Facebook components like a Login button, Like, Share, Chat, Comments, Page or Embedded Post

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
• Save
• Status
• Share
• Subscribe
• User Profile

Support

Become my sponsor and help me maintain this project. Thank you

Initialisation

By default FacebookProvider is loading facebook script immediately after render (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 lazy to FacebookProvider. Use only one instance of the FacebookProvider on your page.

Usage

Like button

import { FacebookProvider, Like } from 'react-facebook';

export default function LikeExample() {
  return (
    <FacebookProvider appId="123456789">
      <Like href="http://www.facebook.com" colorScheme="dark" showFaces share />
    </FacebookProvider>
  );
}

useShare

import { FacebookProvider, useShare } from 'react-facebook';

export default function ShareExample() {
  const { share, isLoading, error } = useShare();

  async function handleShare() {
    await share({
      href: 'http://www.facebook.com',
    });
  }

  return (
    <button type="button" disabled={isLoading} onClick={handleShare}>Share</button>
  );
}

Share button

You can use predefined button

import { FacebookProvider, ShareButton } from 'react-facebook';

export default function ShareButtonExample() {
  return (
    <FacebookProvider appId="123456789">
      <ShareButton href="http://www.facebook.com" className="my-classname">
        Share
      </ShareButton>
    </FacebookProvider>
  );
}

Comments

import { FacebookProvider, Comments } from 'react-facebook';

export default function CommentsExample() {
  return (
    <FacebookProvider appId="123456789">
      <Comments href="http://www.facebook.com" />
    </FacebookProvider>
  );
}

If comments do not work and you are seeing this error in the browser console:

Refused to display 'https://www.facebook.com/v3.1/plugins/comments.php?blahblahblah' in a frame because it set 'X-Frame-Options' to 'DENY'.

Possible reasons:

1. If the site visitor is from the EU region, the visitor needs to be both:
   • Logged in to Facebook.
   • Have third-party cookies enabled in FB privacy settings.
2. User is using a browser that is blocking third party cookies by default (for example Safari and Firefox).

It is not a bug in this library, there is no way around it.

Comments count

import { FacebookProvider, CommentsCount } from 'react-facebook';

export default function CommentsCountExample() {
  return (
    <FacebookProvider appId="123456789">
      <CommentsCount href="http://www.facebook.com" />
    </FacebookProvider>
  );
}

useLogin

import { FacebookProvider, useLogin } from 'react-facebook';

export default function LoginExample() {
  const { login, status, isLoading, error} = useLogin();
  
  async function handleLogin() {
    try {
      const response = await login({
        scope: 'email',
      });

      console.log(response.status);
    } catch (error: any) {
      console.log(error.message);
    }
  }

  return (
    <button onClick={handleLogin} disabled={isLoading}>
      Login via Facebook
    </button>
  );
}

LoginButton

import { FacebookProvider, LoginButton } from 'react-facebook';

export default function LoginButtonExample() {
  functon handleSuccess(response) {
    console.log(response.status);
  }

  function handleError(error) {
    console.log(error);
  }

  return (
    <FacebookProvider appId="123456789">
      <LoginButton
        scope="email"
        onError={handleError}
        onSuccess={handleSuccess}
      >
        Login via Facebook
      </LoginButton>
    </FacebookProvider>
  );
}

Embedded post

import { FacebookProvider, EmbeddedPost } from 'react-facebook';

export default function EmbeddedPostExample() {
  return (
    <FacebookProvider appId="123456789">
      <EmbeddedPost href="http://www.facebook.com" width="500" />
    </FacebookProvider>
  );
}

Page

import React, { Component} from 'react';
import { FacebookProvider, Page } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Page href="https://www.facebook.com" tabs="timeline" />
      </FacebookProvider>    
    );
  }
}

Feed

import React, { Component} from 'react';
import { FacebookProvider, Feed } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Feed link="https://www.facebook.com">
          {({ handleClick }) => (
            <button type="button" onClick={handleClick}>Share on Feed</button>
          )}
        </Feed>
      </FacebookProvider>    
    );
  }
}

Group

import React, { Component } from 'react';
import { FacebookProvider, Group } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <Group
          href="https://www.facebook.com/groups/375934682909754"
          width="300"
          showSocialContext={true}
          showMetaData={true}
          skin="light"
        />
      </FacebookProvider>    
    );
  }
}

MessageUs

import React, { Component} from 'react';
import { FacebookProvider, MessageUs } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <MessageUs messengerAppId="123456789" pageId="123456789"/>
      </FacebookProvider>    
    );
  }
}

SendToMessenger

import React, { Component} from 'react';
import { FacebookProvider, SendToMessenger } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <SendToMessenger messengerAppId="123456789" pageId="123456789"/>
      </FacebookProvider>    
    );
  }
}

MessengerCheckbox

import React, { Component} from 'react';
import { FacebookProvider, MessengerCheckbox } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789">
        <MessengerCheckbox messengerAppId="123456789" pageId="123456789"/>
      </FacebookProvider>    
    );
  }
}

CustomChat

import React, { Component} from 'react';
import { FacebookProvider, CustomChat } from 'react-facebook';

export default class Example extends Component {
  render() {
    return (
      <FacebookProvider appId="123456789" chatSupport>
        <CustomChat pageId="123456789" minimized={false}/>
      </FacebookProvider>    
    );
  }
}

API Access

import { FacebookProvider, useFacebook } from 'react-facebook';

export default function UseFacebookExample() {
  const { isLoading, init, error } = useFacebook();

  async function handleClick() {
    const api = await init();

    const response = await api.login();
    const FB = await api.getFB(); // Get original FB object
  }

  return (
    <button disabled={isLoading} onClick={handleClick}>
      Login
    </button>
  );
}

useSubscribe - Subscribe to events

import { FacebookProvider, useSubscribe } from 'react-facebook';

export default function UseSubscribeExample() {
  const latestValue = useSubscribe('auth.statusChange', (value) => {
    console.log('new response', value);
  });

  return (
    <div>
      {latestValue}
    </div>
  );
}

useLoginStatus - read login status of current user

import { FacebookProvider, useLoginStatus } from 'react-facebook';

export default function UseLoginStatusExample() {
  const { status, isLoading, error } = useLoginStatus();

  return (
    <div>
      Current user login status: {isLoading ? 'Loading...' : status}
    </div>
  );
}

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

import { FacebookProvider, useProfile } from 'react-facebook';

export default function UseProfileExample() {
  const { profile, isLoading, error } = useProfile(['id', 'name']);

  return (
    <div>
      {profile?.name} has id: {profile?.id}
    </div>    
  );
}

Testing

npx cypress open --component

Support

Become my sponsor and help me maintain this project. Thank you

Credits

Zlatko Fedor

react-facebook's Issues

Like button missing

When I implement the Like button, it seems like the iframe is missing something because the button is not showing at all, even if some of the styles seem to be loaded.

Video Embeds

Hi,

Does this by any chance support facebook video embeds, and the hopefully also the ability to use the player controls play() pause() etc?

Many thanks!

Issue going through UglifyJs

I'm having a bit of trouble with the package going through UglifyJs in WebPack v3.

Getting:

    ERROR in server.js from UglifyJs
    Unexpected token: name (Facebook_Facebook)

It doesn't like the class in class Facebook_Facebook. This started sometime in v4 of your package. Why this particular package causes trouble I really don't know… we use quite a lot of packages and I'm sure yours isn't the only one w/ ES6 classes in it.

I don't have any more time to help with this, I'm sorry. Just passing along the info. I know many other people have had trouble with UglifyJs getting hung up on ES6 stuff in packages, at the least this could help someone find their culprit one day.

Is there any way to set a global AppID?

It seems quite tedious to repeat importing FacebookProvider and wrapper the component with it.

skin must be one of the following values: light, dark

Thanks for the library!

I'm getting this error feedback from facebook: "skin must be one of the following values: light, dark"

Looks like constants/ColorScheme.js is sending "LIGHT" instead of "light" because of keymirror.

There's an error in Login tutorial

In the Login tutorial,

the original code is,

<Login scope="email" onResponse={this.onFacebookResponse.bind(this)} children="Log in with Facebook" />

But, children must be Component because children will be cloned with onClick event.
So, you need to change code like

<Login scope="email" onResponse={this.onFacebookResponse.bind(this)} children={<button>Log in with Facebook</button>} />

React.PropTypes Deprecated in latest version of react

getting the following error in my console

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

Facebook is not initialized

code: <FacebookProvider appId="123456789"> <Login scope="email" onResponse={this.handleResponse} onError={this.handleError} > <i className="fa fa-facebook" aria-hidden="true" /> </Login> </FacebookProvider>

Error: Facebook is not initialized
at Login._callee$ (http://localhost:3001/client/index.js:22717:23)
at tryCatch (http://localhost:3001/client/index.js:24421:40)
at Generator.invoke [as _invoke] (http://localhost:3001/client/index.js:24655:22)
at Generator.prototype.(anonymous function) [as next] (http://localhost:3001/client/index.js:24473:21)
at step (http://localhost:3001/client/index.js:22008:30)
at http://localhost:3001/client/index.js:22026:14
at new Promise ()
at new F (http://localhost:3001/client/index.js:21878:28)
at http://localhost:3001/client/index.js:22005:12
at http://localhost:3001/client/index.js:22786:21

Uncaught (in promise) Error: You need to set appId

Hi,

After upgrading react-facebook to the latest version (^4.0.8), I start getting this error:

"Uncaught (in promise) Error: You need to set appId"

This worked just fine before the upgrade, with the following implementation code:

<FacebookProvider appID="1679023659038468"> <Like href="https://facebook.com/sagepathio" colorScheme="dark" size='large' showFaces={true} width={190} /> </FacebookProvider>

What could be wrong? I suspect it's a bug that made its way in during the upgrades, or even potentially dependency-related. Please let me know if you require more information.

Share Button Callback

I searched the component of Share Button and Share and I couldn't find the callback method after the link is shared.

connect.facebook.net/en_US/sdk.js is down

I just noticed that https://connect.facebook.net/en_US/sdk.js is down for some reason.

I need to change .net to .com to make it work.

Token is undefined

Before this piece of code works perfectly, but just recently I started getting error:

Token is undefined

Why? Before works everything well I didn't touch anything, but login element no longer working and always return this error.

How to fix this issue?

<FacebookProvider appId={config.facebook}>
          <Login
            scope="email"
            onResponse={this.checkEmail}
            // tslint:disable-next-line:no-any
            onError={(error: any) => {
              console.info('ISSUE IS HERE!!!!', error);
            }}
          >
            <Button 
              size="small" 
              className="btn-facebook" 
              loading={this.state.facebookLoading} 
              disabled={this.state.facebookLoading}
            >
              <Icon name="facebook f" size="large"/>
                facebook
            </Button>
          </Login>
        </FacebookProvider>

Login only works the first time.

Hey guys, awesome project. I'm having an issue with the Login component though.

My use case:

1. On load, users directed to login page
2. Users can click button to log in via facebook (works great!)
3. Users can click 'logout', which takes them back to the login page (via react-router)
4. Users can click button again to log back in via facebook (Does not work)

The problem is that the callback passed to this.context.facebook.whenReady() in Login's componentDidMount() is only executed the first time, which results in this.state.facebook and this.state.working both being undefined, which means isWorking() always returns true, which shortcuts the onSubmit() method.

I believe that the facebook.whenReady callback remains unexecuted because the this._initialized variable in src/Facebook.js defaults to false on mount and is only set to true if the _initFB() method is invoked. However, this method is only invoked when the facebook sdk script is loaded, which only happens the very first time.

I'm not sure how this change would affect your other components, but I've been able to get my code to work by adding this._initialized=true to the _loadScript() shortcut:

const fjs = document.getElementsByTagName('script')[0];
if (document.getElementById('facebook-jssdk')) {
    this._initialized = true;
    return;
}

is there any way to automatically publish something on the user page if he decides so ?

the idea is that instead of everytime sharing i

Like button size

Like button should support data-size attribute (small | large)

Typescript definition file for this component

Hi, excellent package. It would be nice to have a Typescript definition file. I manage to put together a pretty quick rough draft in case your interested.

declare module 'react-facebook' {
    export class FacebookProvider {
        constructor(...args: any[]);

        getChildContext(): any;

        init(...args: any[]): any;

        render(): any;

        static defaultProps: {
            children: any;
            cookie: boolean;
            domain: string;
            frictionlessRequests: boolean;
            language: string;
            status: boolean;
            version: string;
            wait: boolean;
            xfbml: boolean;
        };

    }

    export class Feed {
        constructor(...args: any[]);

        process(_x: any, ...args: any[]): any;

        static defaultProps: {
            appId: any;
            children: any;
            component: any;
            display: any;
            dontWait: any;
            link: any;
            onError: any;
            onReady: any;
            onResponse: any;
            redirectURI: any;
            render: any;
        };

    }

    export class InitFacebook {
        constructor(...args: any[]);

        componentDidMount(): void;

        initFacebook(...args: any[]): any;

        render(): any;

        static defaultProps: {
            children: any;
        };

    }

    export class Login {
        constructor(...args: any[]);

        process(_x: any, ...args: any[]): any;

        static defaultProps: {
            children: any;
            component: any;
            dontWait: any;
            fields: string[];
            onError: any;
            onReady: any;
            onResponse: any;
            render: any;
            rerequest: boolean;
            returnScopes: boolean;
            scope: string;
        };

    }

    export class LoginButton {
        constructor(...args: any[]);

        render(): any;

        static defaultProps: {
            buttonClassName: string;
            children: any;
            component: any;
            dontWait: any;
            fields: string[];
            icon: boolean;
            iconClassName: string;
            onError: any;
            onReady: any;
            onResponse: any;
            render: any;
            rerequest: boolean;
            returnScopes: boolean;
            scope: string;
            spinner: boolean;
            spinnerConfig: {
            };
        };

    }

    export class Parser {
        constructor(...args: any[]);

        render(): any;

        shouldComponentUpdate(): any;

        static defaultProps: {
            children: any;
            className: any;
        };

    }

    export class Share {
        constructor(...args: any[]);

        process(_x: any, ...args: any[]): any;

        static defaultProps: {
            appId: any;
            children: any;
            component: any;
            display: any;
            dontWait: any;
            hashtag: any;
            href: any;
            mobileIframe: any;
            onError: any;
            onReady: any;
            onResponse: any;
            quote: any;
            redirectURI: any;
            render: any;
        };

    }

    export const ColorScheme: {
        DARK: string;
        LIGHT: string;
    };

    export const CommentsOrderBy: {
        REVERSE_TIME: string;
        SOCIAL: string;
        TIME: string;
    };

    export const LikeAction: {
        LIKE: string;
        RECOMMEND: string;
    };

    export const LikeLayout: {
        BOX_COUNT: string;
        BUTTON: string;
        BUTTON_COUNT: string;
        STANDARD: string;
    };

    export const LikeSize: {
        LARGE: string;
        SMALL: string;
    };

    export function Comments(props: any): any;

    export function CommentsCount(props: any): any;

    export function EmbeddedPost(props: any): any;

    export function Like(props: any): any;

    export function Page(props: any, context: any): any;

    export function ShareButton(props: any): any;

    export namespace Comments {
        const defaultProps: {
            children: any;
            className: any;
            colorScheme: string;
            href: any;
            numPosts: number;
            orderBy: string;
            width: number;
        };

        const prototype: {
        };

        namespace propTypes {
            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function className(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function colorScheme(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function href(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function numPosts(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function orderBy(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function width(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace className {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace href {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace width {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

    }

    export namespace CommentsCount {
        const defaultProps: {
            children: any;
            className: any;
            href: any;
        };

        const prototype: {
        };

        namespace propTypes {
            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function className(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function href(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace className {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace href {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

    }

    export namespace EmbeddedPost {
        const defaultProps: {
            children: any;
            className: any;
            href: string;
            showText: boolean;
            width: number;
        };

        const prototype: {
        };

        namespace propTypes {
            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function className(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function href(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function showText(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function width(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace className {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace width {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

    }

    export namespace FacebookProvider {
        namespace childContextTypes {
            function facebook(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

        }

        namespace propTypes {
            function appId(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function cookie(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function domain(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function frictionlessRequests(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function language(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function status(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function version(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function wait(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function xfbml(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace cookie {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace domain {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace frictionlessRequests {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace language {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace status {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace version {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace wait {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace xfbml {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

        namespace prototype {
            const isMounted: any;

            const isReactComponent: {
            };

            const replaceState: any;

            function forceUpdate(callback: any): void;

            function getChildContext(): any;

            function init(...args: any[]): any;

            function render(): any;

            function setState(partialState: any, callback: any): void;

            namespace forceUpdate {
                const prototype: {
                };

            }

            namespace getChildContext {
                const prototype: {
                };

            }

            namespace init {
                const prototype: {
                };

            }

            namespace render {
                const prototype: {
                };

            }

            namespace setState {
                const prototype: {
                };

            }

        }

    }

    export namespace Feed {
        namespace propTypes {
            function appId(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function caption(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function component(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function description(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function display(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function dontWait(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function from(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function link(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function name(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onError(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onReady(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onResponse(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function picture(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function redirectURI(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function ref(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function render(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function source(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function to(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace appId {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace caption {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace component {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace description {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace display {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace dontWait {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace from {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace link {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace name {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onError {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onReady {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onResponse {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace picture {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace redirectURI {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace ref {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace render {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace source {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace to {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

        namespace prototype {
            const isMounted: any;

            const isReactComponent: {
            };

            const replaceState: any;

            function forceUpdate(callback: any): void;

            function getElement(): any;

            function process(_x: any, ...args: any[]): any;

            function render(): any;

            function setState(partialState: any, callback: any): void;

            namespace forceUpdate {
                const prototype: {
                };

            }

            namespace getElement {
                const prototype: {
                };

            }

            namespace process {
                const prototype: {
                };

            }

            namespace render {
                const prototype: {
                };

            }

            namespace setState {
                const prototype: {
                };

            }

        }

    }

    export namespace InitFacebook {
        namespace contextTypes {
            function facebook(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

        }

        namespace propTypes {
            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onReady(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

        namespace prototype {
            const isMounted: any;

            const isReactComponent: {
            };

            const replaceState: any;

            function componentDidMount(): void;

            function forceUpdate(callback: any): void;

            function initFacebook(...args: any[]): any;

            function render(): any;

            function setState(partialState: any, callback: any): void;

            namespace componentDidMount {
                const prototype: {
                };

            }

            namespace forceUpdate {
                const prototype: {
                };

            }

            namespace initFacebook {
                const prototype: {
                };

            }

            namespace render {
                const prototype: {
                };

            }

            namespace setState {
                const prototype: {
                };

            }

        }

    }

    export namespace Like {
        const defaultProps: {
            action: string;
            children: any;
            className: any;
            colorScheme: string;
            href: any;
            kidDirectedSite: boolean;
            layout: string;
            referral: any;
            share: boolean;
            showFaces: boolean;
            size: string;
            width: any;
        };

        const prototype: {
        };

        namespace propTypes {
            function action(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function className(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function colorScheme(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function href(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function kidDirectedSite(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function layout(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function referral(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function share(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function showFaces(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function size(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function width(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace className {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace href {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace referral {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace size {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace width {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

    }

    export namespace Login {
        namespace propTypes {
            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function component(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function dontWait(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function fields(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onError(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onReady(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onResponse(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function render(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function rerequest(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function returnScopes(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function scope(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace component {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace dontWait {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onError {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onReady {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onResponse {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace render {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace rerequest {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace returnScopes {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

        namespace prototype {
            const isMounted: any;

            const isReactComponent: {
            };

            const replaceState: any;

            function forceUpdate(callback: any): void;

            function getElement(): any;

            function process(_x: any, ...args: any[]): any;

            function render(): any;

            function setState(partialState: any, callback: any): void;

            namespace forceUpdate {
                const prototype: {
                };

            }

            namespace getElement {
                const prototype: {
                };

            }

            namespace process {
                const prototype: {
                };

            }

            namespace render {
                const prototype: {
                };

            }

            namespace setState {
                const prototype: {
                };

            }

        }

    }

    export namespace LoginButton {
        namespace propTypes {
            function buttonClassName(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function className(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function component(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function dontWait(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function fields(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function icon(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function iconClassName(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onError(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onReady(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onResponse(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function render(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function rerequest(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function returnScopes(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function scope(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function spinner(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function spinnerClassName(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function spinnerConfig(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace buttonClassName {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace className {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace component {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace dontWait {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace icon {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace iconClassName {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onError {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onReady {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onResponse {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace render {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace rerequest {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace returnScopes {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace spinner {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace spinnerClassName {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

        namespace prototype {
            const isMounted: any;

            const isReactComponent: {
            };

            const replaceState: any;

            function forceUpdate(callback: any): void;

            function render(): any;

            function setState(partialState: any, callback: any): void;

            namespace forceUpdate {
                const prototype: {
                };

            }

            namespace render {
                const prototype: {
                };

            }

            namespace setState {
                const prototype: {
                };

            }

        }

    }

    export namespace Page {
        const defaultProps: {
            adaptContainerWidth: boolean;
            children: any;
            className: any;
            height: number;
            hideCTA: boolean;
            hideCover: boolean;
            showFacepile: boolean;
            smallHeader: boolean;
            tabs: string;
            width: number;
        };

        const prototype: {
        };

        namespace contextTypes {
            function facebook(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

        }

        namespace propTypes {
            function adaptContainerWidth(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function className(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function height(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function hideCTA(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function hideCover(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function href(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function showFacepile(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function smallHeader(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function tabs(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function width(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace adaptContainerWidth {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace className {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace height {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace hideCTA {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace hideCover {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace showFacepile {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace smallHeader {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace tabs {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace width {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

    }

    export namespace Parser {
        namespace propTypes {
            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function className(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace className {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

        namespace prototype {
            const isMounted: any;

            const isReactComponent: {
            };

            const replaceState: any;

            function forceUpdate(callback: any): void;

            function render(): any;

            function setState(partialState: any, callback: any): void;

            function shouldComponentUpdate(): any;

            namespace forceUpdate {
                const prototype: {
                };

            }

            namespace render {
                const prototype: {
                };

            }

            namespace setState {
                const prototype: {
                };

            }

            namespace shouldComponentUpdate {
                const prototype: {
                };

            }

        }

    }

    export namespace Share {
        namespace propTypes {
            function appId(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function component(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function display(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function dontWait(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function hashtag(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function href(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function mobileIframe(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onError(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onReady(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onResponse(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function quote(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function redirectURI(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function render(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace appId {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace component {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace display {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace dontWait {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace hashtag {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace href {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace mobileIframe {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onError {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onReady {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onResponse {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace quote {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace redirectURI {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace render {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

        namespace prototype {
            const isMounted: any;

            const isReactComponent: {
            };

            const replaceState: any;

            function forceUpdate(callback: any): void;

            function getElement(): any;

            function process(_x: any, ...args: any[]): any;

            function render(): any;

            function setState(partialState: any, callback: any): void;

            namespace forceUpdate {
                const prototype: {
                };

            }

            namespace getElement {
                const prototype: {
                };

            }

            namespace process {
                const prototype: {
                };

            }

            namespace render {
                const prototype: {
                };

            }

            namespace setState {
                const prototype: {
                };

            }

        }

    }

    export namespace ShareButton {
        const defaultProps: {
            appId: any;
            children: any;
            className: string;
            component: any;
            display: any;
            dontWait: any;
            hashtag: any;
            href: any;
            icon: boolean;
            iconClassName: string;
            mobileIframe: any;
            onError: any;
            onReady: any;
            onResponse: any;
            quote: any;
            redirectURI: any;
            render: any;
        };

        const prototype: {
        };

        namespace propTypes {
            function appId(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function children(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function className(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function component(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function display(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function dontWait(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function hashtag(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function href(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function icon(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function iconClassName(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function mobileIframe(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onError(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onReady(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function onResponse(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function quote(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function redirectURI(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            function render(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            namespace appId {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace children {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace className {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace component {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace display {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace dontWait {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace hashtag {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace href {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace icon {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace iconClassName {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace mobileIframe {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onError {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onReady {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace onResponse {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace quote {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace redirectURI {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

            namespace render {
                function isRequired(p0: any, p1: any, p2: any, p3: any, p4: any, p5: any): any;

            }

        }

    }
}

Update readme.md to include example for Page component

Hi there,

I can't see any examples or doco for using The Page component. I want to be able to link to, and promote, my Facebook page in my react app.
Thanks

React doesn't recognize appId prop

Hello!

When I try rendering the <FacebookProvider> component with an appId, I get the following message: React does not recognize the "data-appID" prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase "data-appid" instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I am using the latest version of react and react-facebook.

How change default locale?

Support different locales

For the moment the language/locale for initialising the facebook sdk seems to be hardcoded like "en_US". Would be great to have it configureable as well, to be set from the client using this library.

href default value should be location.href

For example

<Comments /> should equals  <Comments href={location.href} />

Reference: https://developers.facebook.com/docs/plugins/comments/

User friends

Isn't there supposed to be a friend list who authorized in my app in response when 'user_friends' scope was used?

Custom Styles

I'd like to make the border-radius: 50% for the fb profile pictures in Comments component

Rerender when props are updated

I have the following code:

<FacebookProvider appId={this.props.appId}>
    <EmbeddedPost className="embedded-post" href={this.props.permalink_url} />
</FacebookProvider>

However, when this.props.permalink_url updates, the post does not update.

It would be nice if the post reloads if the href prop updates

Unexpected token import

My application is not be working because react-facebook not transpile from ES6 to es5.

How to make FB to re-render the social components

I was trying to figure out how to resize the Page component dynamically, once it has been loaded.
It usually can be done ouside React with the following

window.FB.XFBML.parse(container, [callback function]));

Thank you for these components by the way, really appreciated.

Facebook post embed unmount when switch route with react-router

The facebook embeds load slow initially, which can be understand but every time i switch route the post unmount and reload even though other content doesn't.

Know if the user liked the page already

Hello, I looked but I can't seem to find how to show the like button [only if the user did not liked the page already]. Did I miss something :-) ?

Warning: setState(...): Can only update a mounted or mounting component

Hi there!

I got this warning in my application and I think may be there a problem with the Share component:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Share component.

Do you know why this happening?

Thank you for this library.

Comments not showing up on mobile screens

The comments dialog is not displaying on mobile screens. I tried setting mobile={true} but it doesn't work.

Irrespective of what props I pass in, I get the below error. (Even when I set width="100%")

Warning: Received `false` for a non-boolean attribute `width`.

If you want to write it to the DOM, pass a string instead: width="false" or width={value.toString()}.

If you used to conditionally omit it with width={condition && value}, pass width={condition ? value : undefined} instead.

Like Button `share` is required, but not used

share: PropTypes.bool.isRequired,, but the component doesn't actually use it (even though the README shows an example of it being "used"):

<fb:like
        href=${this.props.href}
        layout=${this.props.layout}
        color-scheme=${this.props.colorScheme}
        action=${this.props.action}
        show-faces=${this.props.showFaces}></fb:like>

It seems like the FBXML should have a share=${this.props.share} in it.

Certain attributes such as width, kid_directed_site, and width also seem to be entirely missing from both the PropTypes and the attributes on the FBXML (https://developers.facebook.com/docs/plugins/like-button)

FB autogrow

Probably this is something the library not intended but I am really trying to implement :
FB.Canvas.setAutoGrow
any tips would be appreciated .

Lack the option to hide the cover photo on Page Component

Attach a onClick event on button

Hi,
I would like to be able to track when an user click on the share button.

<FacebookProvider appID="xxxxx">
    <Share href="https://www.facebook.com/xxxxxx">
        <Button color='facebook'
                onClick={() => {
                    console.log('share');
                    ReactGA.event({
                        category: 'Facebook',
                        action: 'Share',
                        label: 'Label'
                    });
                }}>
            <Icon name='facebook'/> Partager
        </Button>
    </Share>
</FacebookProvider>

This doesn't work. Thanks !

Logout

Hi,

I have just started looking into these comps to a new project and they work great, so thanks for that!

But I can't find a way to have a logout button. Could you point me into the right direction? I had a look on the code for FacebookProvider and I thought it would be as quickly as sending a prop to onReady, but that does not seem to work.

Thanks in advance!

Facebook login token

Would it be possible to get entire token with Login onSubmit - right now it only gives us signedRequest - but I would like to get accessToken as well - so I could verify data on server side . Thanks

Width should be a string

According to the docs of Facebook Comments plugin, the width of the element could a string like "100%".

FYI: https://developers.facebook.com/docs/plugins/comments/

appId ? PageId ?

Hi, seems to be it's a great plugin but the doc is a bit minimalist. I am no facebook-savvy and I am struggling to set it up on my website.

I'd like to have the page feed on my website. A few question are rising:

• Can I have the page feed of any page or only page I own/am admin ?
• Do I need to create an app or is the page Id enough ? (I tried with page id but doesn't seem to work)
• If yes, what type of app ? shall I link it to the page then ? and how (I tried to do a "page Application" but I don't see my page in the admin of the app to "link" the app to the page. the page is already existing.)
• is there any other configuration to do on my side more than jsut importing and adding the and ?

Thanks in advance.

Facebook login issue

Trying to use login component but keep getting this error:
FB.login() called before FB.init()
Code is as follows:

<FacebookProvider appId={config.appApi.credentials.deviceId}>
   <Login
      scope="email"
      onResponse={this.handleFBLogin}
      onError={err => console.error("FB LOGIN:", err)}>
    <div className="submit-btn">
      <FacebookLogo />
      <a>Login with Facebook</a>
    </div>
  </Login>
</FacebookProvider>

Facebook message for popus

Hey man, thanks for you lib, I was using it but when the popup is opened the Facebook sends me a message like:

You are using a display type of 'popup' in a large browser window or tab. For a better user experience, show this dialog with our JavaScript SDK without specifying an explicit display type. The SDK will choose the best display type for each environment. Alternatively, set height and width on your window.open() call to properly size this dialog if you have special requirements precluding you from using the SDK. This message is only visible to developers of your application.

What do you think?

Props warning when using MessengerCheckbox

I added the MessengerCheckbox plugin to my code as per the documentation (adding my own appId and pageId).

I'm getting the following errors/warnings:

I can add the origin prop, and the first warning goes away. It's mostly the second warning that worries me.

Using React DOM 15.5.4 if that is relevant.

The elements render only after pressing F5

The like button only renders when I press F5. After changing the component to go to another page, it's the same without the button

Here is a video to show:
https://i.gyazo.com/6c5cd185fe1437142ce19a231e4db3aa.mp4

Error: Facebook is not initialized

Refused to display in frame ... Console Error

Hi, please help me. If i use page plugin >

<FacebookProvider appId={this.props.settings.FacebookAppId}>
  <Page href={this.props.settings.FacebookUrl} tabs="timeline" />
</FacebookProvider>

after some time i show this error in console (but everything works ...):

where am I making a mistake?
Thank you for your help :)

How to know when iframe element was appended

Hi,

I'm trying to get the height of a rendered Facebook Post. In order to do that I want to attach an iframe.onload event listener. It seems though as if the iframe is not appended immediately. Inside componentDidMount it isn't possible yet to grab the iframe.

  componentDidMount() {
      // no iframe is being found here
      $(this.root).find('iframe').on('load', function() {
        console.log(this.root.clientHeight);
      }.bind(this));
  }

  render() {
    return (
      <div ref={(root) => this.root = root} className="feed__item">
        <FacebookProvider appId="1754125368233773">
          <EmbeddedPost href={this.props.url} width="400" />
        </FacebookProvider>
      </div>
    );
  }

Is there a way to actually achieve this?

Post embed width under 350px

I try to embed Facebook post to my website. It works well for screen above 350px large but under this width posts are cut... It seems that the max width for posts is 350px.
What if you want to display facebook post embed for small screen under 350px?
Tried with widht 100% but does not work.

<FacebookProvider appId="1234">
  <EmbeddedPost href={"https://www.facebook.com/teampulse.ch/posts/"+post} width="100%" />
</FacebookProvider>

Login example needs update

The Login example as provided:

<Login scope="email" onResponse={this.onFacebookResponse.bind(this)}>
  Login via Facebook
</Login>

... causes an exception. It works if you update it like this:

<Login scope="email" onResponse={this.onFacebookResponse.bind(this)}>
  <span>Login via Facebook</span>
</Login>

It takes a while to figure it out so it would be really helpful to update this.

'react-facebook' does not contain an export named 'MessageUs'.

'react-facebook' does not contain an export named 'MessageUs'.

Version

"react-facebook": "^4.1.1",

Actual behaviour

Clean project produces this error after installing the component. Other components such as like work neatly.

Steps to reproduce

create-react-app test-app
npm install --save react-facebook
import FacebookProvider, { MessageUs } from 'react-facebook';

Facebook share meta

Hi!
Could you tell me how to add meta tags for share facebook?

ref= in CustomChat

Why was ref= removed from CustomChat in 5720187#diff-6ffc11bde0e25594959d8b28ca703e68?

It’s still supported as per https://developers.facebook.com/docs/messenger-platform/reference/web-plugins/#customer_chat