Custom Facebook Connect Image

One of the ways you can put facebook connect button on your site is to use <fb:login-button> fbml tag something like this:

  <fb:login-button onlogin="window.location='www.example.com'"></fb:login-button>

That will show default facebook button with a rather small image. You can make the button little larger by specifying length and size attributes like this:

  <fb:login-button onlogin="window.location='www.example.com'" length="long" size="large"></fb:login-button>

However, the requirement in my case was that the button should be even bigger. I searched through the facebook connect docs and elsewhere but did not find a way to customize the facebook connect image (it is rendered directly by facebook; let me know if there is a way via comments please). I thought why I can’t force the facebook connect button to use the image that I specify. I fired up firebug (the addon of firefox) and this is what it showed for the <fb:login-button> fbml tag:

As can be seen, facebook automatically applies FB_login_button class amongst others to the connect button. As you can see, there is an img tag inside, that was all I needed to get my own image for the connect button. The idea is to find the image inside connect button and replace with your own once DOM has loaded. Now you get the idea, I wrote this jQuery code to get custom image for the connect button:

<script type="text/javascript">
$(function(){
  // overwrite the fb connect image - let's force it !!
  $('.FB_login_button').find('img').attr('src', 'img/my-custom-image.png');
});
</script>

We use the selector .FB_login_button and then use find method to find the image inside element (<fb:login-button>) having that class and replace its src attribute with the path of our custom image. Since we have wrapped our code in ready handler $(function(){…}), our code will execute as soon as DOM becomes ready and when you visit the page, it will have your own custom facebook connect button image.

I also noticed that there was a link tag generated with the class of fbconnect_login_button. We could use that just as well like this:

<script type="text/javascript">
$(function(){
  // overwrite the fb connect image - let's force it !!
  $('.fbconnect_login_button').find('img').attr('src', 'img/my-custom-image.png');
});
</script>

Now this is good as long as you are using jQuery on the page where facebook connect button exists. But if you are not using jQuery, you can do the same thing with vanilla javascript albeit with little more code. Here is how you can do the same thing with vanilla javascript:

<script type="text/javascript">
window.onload = function(){
  var ourImg = null; // this will store the facebook connect img tag

  // find all the links on the current page
  var links = document.getElementsByTagName('a');

  // loop over all the links
  for(var i = 0; i < links.length; i++){
    // get class of this link
    var cls = links[i].className;

    // check to see if this is the link with specified class
    if (cls === 'fbconnect_login_button'){
      ourImg = links[i].firstChild; // which is img tag we need
      break;  // done, let's get the hell out of here
    }
  }

  // finally replace with our own image !
  ourImg.src = '<?php echo base_url() ?>images/fb.png';
};
</script>

Ops ! that is a lot of code I have written compared to jQuery’s but that’s what you need if you are not using jQuery on your page. Note that this time, we are using load event of the window window.onload = function(){…} which will fire when all the page resources are loaded including images, frames and the DOM unlike ready handler of jQuery which fires as soon as DOM becomes ready and runs before images, frames or any other external resources loaded into the page.

Finally, this is the page that now uses custom facebook connect button image while using <fb:login-button> fbml tag:

View the Page

22 thoughts on “Custom Facebook Connect Image”

Terrific Post! I am really into social media right now (like everyone else out there!), especially Facebook Marketing and FBML. It can be hard to keep up to date with such a fast changing innovative topic but I manage to do it through the fan page factory (http://facebook.com/thefanpagefactory ?) and blog posts exactly like yours. Tips and tricks rock. I am trying to learn as much as possible to put myself ahead of the curve. So thank you again!

Enjoy!

Aaron

Pingback: Custom Facebook Connect Image

Works fine in Firefox and Chrome
Doesn’t work for me in IE8…

The easiest way to achieve is create your link and in the onclick function call

FB.Login(function(response){

});

Go to http://developers.facebook.com/docs/reference/javascript/FB.login/

Simply put something like this –
Sign Me Up with Facebook

oops, the code did not went thru. Tags are not supported 😦

Didn’t work for me cause in my fb_button isn’t used img. So I hided fb_button (z-index to -1) and made “clicking bridge”.
$(‘.fbBTN’).click(function () {
$(‘.fb_button’).triggerHandler(‘click’);
});

Hi,

I’m using Joomla and Jomsocial. Jomsocial provides a module called mod_jomsocialconnect that displays the standard button. The file where I can change the text and make the button a bit bigger is a php file where I find the following code:

I can add the length and size and change the text displayed on the button to make it a bitt bigger, but I would really like to create my own image to use as a button.

Any ideas. I’m mainly a designer, not a coder, so go easy on me 🙂

Thanks,
Tony

Nice trick, helpfull.

Simply put something like this –
Sign Me Up with Facebook

I have a variation of this, I use some css rules so you can change the icon and logo to whatever you want:, for example if you have the facebook box inside a div that has the class “facebook_connect” you can do something like this:

.facebook_connect span {
background: none!important;
border-top: none!important;
border-bottom: none!important;
font-family:CooperBlack!important;
text-shadow: 0 0px 0 white!important;
font-size:35px!important;
color:#167ac6!important;
}

.facebook_connect a {
background: none!important;
border-top: none!important;
border-bottom: none!important;
font-family:CooperBlack!important;
text-shadow: 0 0px 0 white!important;
font-size:35px!important;
color:#167ac6!important;
}

in that way you can override all the stuff that you want

You really make it seem so easy with your presentation but I find this topic
to be really something that I think I would never understand.
It seems too complex and very broad for me. I’m looking forward for your next post, I will try to get the hang of it!

Nice!
Great tutorial

Excellent, what a blog it is! This web site presents helpful data to us, keep
it up.

I actually have a tendency to go along with every
aspect that is authored in “Custom Facebook Connect Image | Sarfraz Ahmed’s Blog” http://workoutexpresswoodland.com . Thanks for all the actual info.Thanks a lot-Autumn