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.

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. — Craig Hooghiem, Aug 16 '10 at 12:35
I am using the version where you include 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... — Max, Aug 16 '10 at 12:38
You can find further information here: https://www.facebook.com/brandpermissions/logos.php — Oscar, Oct 17 '12 at 09:47

bolmaster2 · Answer 1 · 2012-09-26T14:52:00.560

5

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.

edited Sep 26 '12 at 14:52

answered Sep 05 '12 at 13:43

bolmaster2

9,376
4
20
16

Exactly, since creating an app is free and easy. – eozzy Sep 05 '12 at 18:40
1

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. – brian sharon Sep 26 '12 at 00:28
@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! – bolmaster2 Sep 26 '12 at 14:50
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. – Todd Chaffee Sep 28 '12 at 14:22
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? – rogerdpack May 15 '17 at 16:00

score 4 · Answer 2 · answered Sep 21 '12 at 14:55

4

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.

answered Sep 21 '12 at 14:55

1

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. – Kheldar Apr 18 '13 at 15:42
1

Programmers don't need to be ignorant about legal issues. In fact the opposite is desirable. – Rolf Aug 19 '14 at 21:00

score 1 · Answer 3 · answered Jun 13 '12 at 23:24

1

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.

answered Jun 13 '12 at 23:24

Tosh

1,789
15
20

score 1 · Accepted Answer · edited Jul 12 '13 at 11:24

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

edited Jul 12 '13 at 11:24

sakibmoon

2,026
3
22
32

answered Aug 16 '10 at 12:40

Craig Hooghiem

1,272
5
15
39

3

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)." -> http://www.facebook.com/brandpermissions/logos.php good hint, thanks! – Max Aug 16 '10 at 12:59
11

"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. – skrat Mar 03 '11 at 13:26
18

Has anyone ever really checked this? The button is inserted in an from the Facebook server, so we cannot style it with CSS from our server. – pixelistik May 11 '11 at 08:50
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? – Craig Hooghiem May 18 '11 at 19:03
3

@skrat That's not quite responsible from your side. You are using a service and you should return the favor and respect the conditions. – Slavic Dec 30 '11 at 08:56
1

@gamerzfuse you sure? how would the page get the user's facebook session? – Omar Al-Ithawi Jan 02 '12 at 06:55
1

@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. – Paul Alexander Jan 11 '12 at 21:23
This doesn't work. You can't style an external iframe beacuse of same origin policy. – Tosh Jun 13 '12 at 23:25

score 0 · Answer 5 · answered Nov 23 '10 at 19:09

0

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

answered Nov 23 '10 at 19:09

Stevie

245
4
9

score 0 · Answer 6 · edited Jul 12 '13 at 11:31

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.

You cannot add css to an iframe because off the same origin policy. — Tosh, Sep 24 '12 at 15:18

Custom skin for facebook like button

6 Answers6

Linked