Text-only version of Facebook's Like button?

Question

Does anybody feel the Facebook Like button is too intruding in ones UI? Like it doesn't fit in, like it's some cheap plastic thing?

Have anybody ever used JS or something to make any alternatives like a plain text one? If so, has anybody ever done any A/B testing to see if it performs equally well to the original?

Moreover, would this violate Facebook's TOS saying "You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin"?

http://jsfiddle.net/dwaynie/HqA3H/9/

Thanks!

Answer 1

Make text-only links for Facebook and Twitter and use CSS to do your styling. Here's how to create the links (with appropriately-sized pop-up windows):

http://jsfiddle.net/c6XQT/

Here's the code:

<a href="JavaScript:window.open('http://www.facebook.com/sharer.php?u=http://jsfiddle.net','','width=657,height=400,scrollbars=1')">Like</a>

<a href="JavaScript:window.open('https://twitter.com/share?url=http://jsfiddle.net&text=Check out this link:','','width=450,height=350')">Tweet</a>

Answer 2

The only allowed modifications to the Like button (and all other social plugins) are those achievable via the code generation interface http://developers.facebook.com/docs/reference/plugins/like/

Answer 3

Well, here is what i've come up with. A bit of googling did the trick

http://jsfiddle.net/HqA3H/24/

In the fiddle after the script tags, you can see

var fbURL = "http://www.facebook.com/plugins/like.php?href=http://www.lolwhuuutwtf.com&show_faces=trace&width=450&action=like&colorscheme=light";

Change www.lolwhuuutwtf.com to whatever your website link is and it will work just fine :) You can scroll down and see the html, edit it to your needs but be sure not to remove 'id="flb" onclick="insertLikeButton();"' Because that triggers the javascript and so on.