Custom skin for facebook like button

Question

Is there an (easy) way to customise the look of the facebook like button implemented via fbml?

I am pretty sure I saw this somewhere, but I cant remember where and I cant find any documentation on this.

Nicknack

Is the button supplied in an iFrame or does it just come as a button image? If it's not an iFrame, you could use CSS to style it possibly, using !important to overwrite the defaults (doubtful that it's that easy). If it's an iFrame, it has to be done on Facebook's side. – Mullins

I am using the version where you include <fb:like></fb:like> in your html content. I thought about that too, overriding the css in my own stylesheet and wondered whether there is some easier, documented way on how to skin the button as it has quite a few different display states... – Nicknack

You can find further information here: facebook.com/brandpermissions/logos.php – Ligniform

Answer 1

Although it may not even be legal to do so (check the terms and policies for yourself), you could do something like:

/* Like button main text color */
div.like span.connect_widget_text {color:#fff;}
div.like div.connect_widget_confirmation {color:#fff;}
div.like span.connect_widget_text a {color:#ffc6ff;}

This link shows some mild styling options:

http://forum.developers.facebook.net/viewtopic.php?pid=236534

Mullins

I checked the policies, it explicitly says: "While you may scale the size to suit your needs, you may not modify the Like Button in any other way (such as by changing the design)." -> facebook.com/brandpermissions/logos.php good hint, thanks! – Nicknack

"it may not be legal" doesn't apply here, you didn't sign or commited to anything by copypasting some copyleft snippet from facebook.com. Don't be paranoid. Design of that button suck, and one size doesn't fit all. – Shoa

Has anyone ever really checked this? The button is inserted in an <iframe> from the Facebook server, so we cannot style it with CSS from our server. – Assembled

Well, there is always the option of using a proxy on your own server to load this. Once it loads, you can then iframe in from your own server that 'proxied page' and apply styles to avoid cross domain issues? – Mullins

@Shoa That's not quite responsible from your side. You are using a service and you should return the favor and respect the conditions. – Frenum

@gamerzfuse you sure? how would the page get the user's facebook session? – Lila

@skrat: "It may no be legal" surely does apply. The facebook icon and buttons are trademarked. You don't have to sign anything to be bound by their terms. – Dubose

This doesn't work. You can't style an external iframe beacuse of same origin policy. – Fastback

Answer 2

You don't need to make these illegal hacking. Just use the "Open Graph": https://developers.facebook.com/docs/opengraph/actions/builtin/likes/. The downside is you need to create an app.

Hodden

Exactly, since creating an app is free and easy. – Conservancy

Open Graph likes as outlined above can only be used to like content for your Facebook app, and the custom button can only be used by users that have authorized your application. It's not the same as the traditional Facebook like button. – Gautious

@briansharon that's right, but as Nimbuz says it's at least for free. If it's easy or not I guess is up to you. IMO i think it's quite tricky. Will edit my answer though! – Hodden

One downside to this approach is that it is not as seemless as the plugin. The open graph solution requires an extra step for visitors to your web site where they will have to authorize the app. – Meridel

Example please? :) Also second Todd's comment, doesn't this need them to login to your app first, then you can show them the like button? – Gapeworm

Answer 3

Are you guys lawyers or programmers? the question was HOW not '...to do or not to do...'.

@pixelistik button can be inserted either via script tag or iframe and of course you can use css with iframe just via JS, easy peasy.

@skrat good point!

@Slavic what service exactly? I call it half-service because you can like only - no place for criticism so... your criticism is not proper. Like our posts! :P

generally: if you create custom button and you didn't sign to any t&c or something like that you can do whatever you want on YOUR webpage.

Destructive

It's called the open web, and an URL. Facebook's very happy to use the web, it should return the favor by respecting the freedom of the web. Goes both ways. – Telephonist

Programmers don't need to be ignorant about legal issues. In fact the opposite is desirable. – Glanti

Answer 4

Easy peasy:

Simply set the opacity (filter for ie) to 0 and put the iframes over an image or div with a bg image. For bigger buttons simply load in multiple like buttons, don't load in too many this will make your page unbearable slow.

Fastback

Answer 5

Hiya, you can do it with some smart CSS - http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/

Anticosti

Answer 6

Although the legality of such edits is under question, I just wanted to share my findings on this subject.

I right clicked on a FB Like button in Firefox, and inspected the element with firebug. The readout of the class elements is:

.connect_widget_like_button .liketext { 
  background: url(http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png) -1px -33px no-repeat;
  background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png);
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  background-attachment: initial;
  background-position-x: -1px;
  background-position-y: -33px;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
}

This exists on line 172 of like.php

One company I know of that does use a custom like graphic is Disqus, however their button is a multi-functional element that offers you a choice between facebook & twitter onClick, which may be how they were able to customize it to their needs.

Softcover

You cannot add css to an iframe because off the same origin policy. – Fastback