57

My script has code like this

echo '<p class="wdfb_login_button"><fb:login-button scope="' .
     Wdfb_Permissions::get_permissions() . '" redirect-url="' .
     wdfb_get_login_redirect() . '">' .
     __("Login with Facebook", 'wdfb') . '</fb:login-button></p>';

Its using facebook's default login button plugin. But i would like to use my custom facebook connect image. Can anyone help me?

sakibmoon
  • 2,026
  • 3
  • 22
  • 32
Giri
  • 4,849
  • 11
  • 39
  • 48
  • Possible duplicate! http://facebook.stackoverflow.com/questions/9952611/facebook-sdk-replace-log-in-button-with-custom-image/9956489#9956489 – Philip Jun 13 '12 at 06:12

4 Answers4

138

The method which you are using is rendering login button from the Facebook Javascript code. However, you can write your own Javascript code function to mimic the functionality. Here is how to do it -

  1. Create a simple anchor tag link with the image you want to show. Have a onclick method on anchor tag which would actually do the real job.
<a href="#" onclick="fb_login();"><img src="images/fb_login_awesome.jpg" border="0" alt=""></a>
  1. Next, we create the Javascript function which will show the actual popup and will fetch the complete user information, if user allows. We also handle the scenario if user disallows our facebook app.
window.fbAsyncInit = function() {
    FB.init({
        appId   : 'YOUR_APP_ID',
        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('Welcome!  Fetching your information.... ');
            //console.log(response); // dump complete 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.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());
  1. We are done.

Please note that the above function is fully tested and works. You just need to put your facebook APP ID and it will work.

Behnam
  • 2,212
  • 2
  • 22
  • 32
Sachin Khosla
  • 1,716
  • 1
  • 10
  • 11
  • I notice there is `href="#"` in step 1. What if I want to jump to another link? I tried `href="www.google.com"`, but it does not work. – user811416 Jan 12 '14 at 15:04
  • 1
    Hello, you can do that using window.location, after you get user's email. Replacing the '#' for 'href' attribute won't do any trick, until you are planning to dynamically get the href's value from different type of anchor tags on a page. But that's a separate use-case altogether. – Sachin Khosla Jan 24 '14 at 18:39
  • 3
    I got error fb-root is null and FB is not define. please reply – harsh4u Sep 24 '14 at 10:23
  • Can you paste your code, so that we can help you debug? – Sachin Khosla Jan 14 '15 at 10:20
  • I did exactly what you have posted replacing withmy APP_ID and your script does not work. – Tim Marshall Feb 01 '15 at 21:10
  • Hi Tim - can you show a code sample? Also make sure the FB framework is loaded prior to JS code or you have everything inside $(document).ready(){ } – Sachin Khosla Feb 02 '15 at 08:19
  • You have saved my Life....................thanks for clear cut description....... – Paramesh Reddy Oct 20 '15 at 09:03
  • 1
    The above code didn't work for me either. I *did* finally got this to work after some digging. Here's what I had to do. When calling the graph, you need to explicitly call the fields you need: `FB.api('/me?locale=en_US&fields=id,name,email,first_name,last_name', function(response) { }` – Jason Jun 14 '16 at 00:00
  • 2
    change `publish_stream` to `public_profile` for it to work – Omar Wagih Jun 19 '16 at 22:38
12

I got it working with a call to something as simple as

function fb_login() {
  FB.login( function() {}, { scope: 'email,public_profile' } );
}

I don't know if facebook will ever be able to block this circumvention, but for now I can use whatever HTML or image I want to call fb_login and it works fine.

Reference: Facebook API Docs

Ikhlak S.
  • 8,578
  • 10
  • 57
  • 77
Christian Dechery
  • 876
  • 10
  • 31
6

It is actually possible only using CSS, however, the image you use to replace must be the same size as the original facebook log in button. Fortunately Facebook delivers the button in different sizes.

From facebook:

size - Different sized buttons: small, medium, large, xlarge - the default is medium. https://developers.facebook.com/docs/reference/plugins/login/

Set the login iframe opacity to 0 and show a background image in the parent div

.fb_iframe_widget iframe {
    opacity: 0;
}

.fb_iframe_widget {
  background-image: url(another-button.png);
  background-repeat: no-repeat; 
}

If you use an image that is bigger than the original facebook button, the part of the image that is outside the width and height of the original button will not be clickable.

Würden
  • 107
  • 2
  • 6
  • this is great, works like charm at least in chrome.. is there any problem for some browsers?, i have to test this yet. Great answer – Moncho Chavez Nov 18 '13 at 21:05
4

Found a site on google explaining some changes, according to the author of the page fb does not allow custom buttons. Heres the website.

Unfortunately, it’s against Facebook’s developer policies, which state:

You must not circumvent our intended limitations on core Facebook features.

The Facebook Connect button is intended to be rendered in FBML, which means it’s only meant to look the way Facebook lets it.

Community
  • 1
  • 1
justanotherhobbyist
  • 2,124
  • 4
  • 28
  • 38
  • But how come [mashable](http://mashable.com/) using [this button](http://3.mshcdn.com/follow/images/fb-login-sm.png?1332269972) ? – Giri Mar 21 '12 at 18:21
  • If you look at the website i linked you will see that some modification is allowed, size font etc, but changing the image or so is not allowed. Read the website, you will understand better and even learn how to change it. – justanotherhobbyist Mar 21 '12 at 18:39
  • Obviously i've read that article you linked before posting my previous comment. [Here is the snapshot](http://prntscr.com/79nfy) of mashable's custom facebook connect image. I'm sure they using custom image not the fbml code. This is their [custom facebook image](http://3.mshcdn.com/follow/images/fb-login-sm.png?1332269972) – Giri Mar 21 '12 at 18:51
  • Their button is very similar to the normal fb button so it might be allowed, I don't know. But the way they do it is just an image linking to the facebook login just like you would do any button link. They are not changing anything in the API. – justanotherhobbyist Mar 21 '12 at 18:55
  • Good topic. So is it allowed to use custom buttons or not? Not similar, but different? – aleXela Mar 13 '13 at 00:35