I am trying to customize the Facebook button for my ReactJs website, but it seems to be not working. I want my Facebook button look like the following design:

Google login is working as I expected, but facebook is kept appearing like following:

Any help would be appreciated! codesandbox link

I am trying to customize the Facebook button for my ReactJs website, but it seems to be not working. I want my Facebook button look like the following design:

Google login is working as I expected, but facebook is kept appearing like following:

Any help would be appreciated! codesandbox link

• javascript
• css
• reactjs

Share Improve this question Follow edited Jun 22, 2021 at 15:03 Oybek Toshmatov asked Jun 22, 2021 at 11:01 Oybek ToshmatovOybek Toshmatov 42755 silver badges1111 bronze badges 1

• Your codesandbox.io demo would be appreciated :) – m4n0 Commented Jun 22, 2021 at 11:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I found the answer to my own question, I just stupidly did not see the correct way of importing the FacebookLogin

import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'

This is how the import should be done. After that I was able to make my own custom style through render prop:

  appId="1088597931155576"
  autoLoad
  callback={responseFacebook}
  render={renderProps => (
    <button onClick={renderProps.onClick}>This is my custom FB button</button>
  )}
/>```

You can achieve this thing very easily. What you have to do is you have to design your custom button and then use the onclick property.

Here how you do it: Include this thing where you want to show the Facebook login button and don't forget to style this button according to your needs.

<div id="fb-root"></div>
<button onclick="fb_login();">Login using facebook</button>

Now here is the code you have to include in your page that has the fb_login function defined. You have to put your app id to see the results.

window.fbAsyncInit = function () {
    FB.init({
        appId: 'your_app_id_here',
        oauth: true,
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true // parse XFBML
    });

};

function fb_login() {
    FB.login(function (response) {

        if (response.authResponse) {
            console.log('Wele!  Fetching your information.... ');
            //console.log(response); // dump plete info
            access_token = response.authResponse.accessToken; //get access token
            user_id = response.authResponse.userID; //get FB UID

            FB.api('/me', function (response) {
                user_email = response.email; //get user email
                // you can store this data into your database             
            });

        } else {
            //user hit cancel button
            console.log('User cancelled login or did not fully authorize.');

        }
    }, {
        scope: 'public_profile,email'
    });
}
(function () {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}()