Custom skin for facebook like button

问题

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.

回答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

回答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.

回答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.

回答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.

回答5:

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

回答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.

来源：https://stackoverflow.com/questions/3493117/custom-skin-for-facebook-like-button

标签

facebook

fbml

skinning