Earlier I posted a snippet on how to set up a custom Tweet button. It’s also possible to have a custom Facebook Like button, although it’s a bit harder to achieve the desired look since Facebooks does not want you to use a custom button. If you want to do it anyway, this is how:
Generate your Facebook button and wrap it in a div with a unique id:
<div class="facebook_like_button_holder"> <div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div> </div>
Then with css you can set a background image on the container, and make Facebook’s iframe transparent.
.facebook_like_button_holder {
height: 20px;
width: 10px;
overflow: hidden;
position: relative;
background: url(images/facebook-ico3.png) no-repeat 0 0;
}
.facebook_like_button_holder span iframe {
width: 10px !important; opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier */
}