Question

hopefully you can help me with this issue.

I’ve grabbed the basic login button code from the FB developers site and I’m writing it out as is:

<div id="fb-root"></div>

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=345451695525893";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-  rows="1">Test text</div>

The only customisation I’m doing is overriding the default “Log in” text with my own text (in this case “test text”). This works fine when I’m logged out of facebook, but interestingly, when I log in to facebook (via the facebook site on another tab), and then come back to visit my page, the custom text flashes, then the button is rendered a second time with the default “Log in” text.

Any ideas, or is this a feature by design from Facebook?

Answer 1

Given the recent changes to the fb-login-button component (which as of a week or so ago seems to ALWAYS rewrite custom text to “Log In”), your best bet is to create a custom CSS class for a Facebook button and trigger FB.Login via Javascript. That’s what I did and it’s working nicely.

Here’s some CSS for a Facebook button that looks exactly like the standard Facebook button and supports custom text easily:

a.fb-button {
    color: #FFF;
    display: inline-block;
    text-decoration: none;
}

.fb-button {
    background: #5F78AB;
    background-image: url('http://static.ak.fbcdn.net/rsrc.php/v2/yf/r/S-DbSHszr4D.png');  /*COPY TO YOUR OWN IMAGE STORE*/
    background-repeat: no-repeat;
    background-position: -1px -81px;
    border-top: 1px solid #29447E;
    border-right: 1px solid #29447E;
    border-bottom: 1px solid #1A356E;
    border-left: 1px solid #29447E;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8A9CC2;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8A9CC2;
    cursor: pointer;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 23px;
    line-height: 23px;
    padding: 0px 5px 0px 30px;
    text-align: left;
}

The element on your page would be

<a class="fb-button" onClick="fblogin();">Custom Text</a>

And then a JS function like so

var fblogin = function() {
    FB.login(function(response) {
        if (response) {
            if (response.authResponse) {
                //successful auth
                //do things like create account, redirect etc.
            } else {
                //unsuccessful auth
                //do things like notify user etc.
            }
        },{scope:'email,publish_stream'}); //whatever perms your app needs
};

Of course you’ll need to include the fb root div on your page and and init the Facebook JS SDK before this

Here’s how it looks:

The cool thing about the CSS is that you can use it to create other Facebook buttons on your site for things that aren’t supported (like Share) with a familiar look and feel. You can even create some additional css to allow for different size buttons. You’d just need to have different background positions for the background image and different font size, height etc.