4

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!

Mark Boulder
  • 13,577
  • 12
  • 48
  • 78
  • Question is not constructive. Please provide the code issue. – jmishra Feb 23 '12 at 12:57
  • If you want to replace the like button with a simple text link instead then hide the like button with CSS and trigger an anchor click event on the button using JavaScript, easiest is with jQuery `.trigger()` – Thielicious Aug 14 '17 at 15:22

3 Answers3

4

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>
David Jones
  • 10,117
  • 28
  • 91
  • 139
  • Any idea how to achieve the same thing with Facebook's Like though? Preferably with a (N) counter next to it. – Mark Boulder Jul 22 '12 at 07:43
  • There may be a way to do that, but you'll definitely need to use Facebook's API. In the past I've just recorded the number of times people click the link and display that number instead of dealing with all the overhead of the Facebook API. Of course the number won't really be the number of 'likes' on Facebook, but who cares? – David Jones Jul 23 '12 at 04:17
  • Cool, but I need it to go through Facebook for the viral marketing or what not. – Mark Boulder Aug 07 '12 at 00:58
  • Getting share counts in plain text: https://gist.github.com/jonathanmoore/2640302 – a2f0 Apr 07 '15 at 14:30
1

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/

scibuff
  • 13,377
  • 2
  • 27
  • 30
  • 1
    I know that many sites design their own social networking buttons that work into the design of the site. They often use recognizable aspects of the social logos so that there is good brand recognition but still keep things in the design language of the site. Like kickstartproductions.net and trenchescomic.com. – DorkRawk – Mark Boulder Feb 25 '12 at 06:54
1

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.

Marshall Mathews
  • 347
  • 5
  • 18
  • Another suggestion i have is to not use facebook for this purpose but rather your own database, just use a facebook style button for all the clicking so the users will think its likes on facebook :D – Marshall Mathews Feb 23 '12 at 13:57