• Blog
  • About Esrun
  • Blackhat SEO Scripts
  • Contact

Disguising a Facebook ‘Like’ link

November 23, 2010 on 5:50 pm | 16 Comments

facebook like buttonThe Facebook Like button allows people to share interesting sites they find, with their friends on Facebook. You can place a Like button on any web page and when a user clicks on it, a story appears in the user’s friends’ News Feed with a link back to your website.

Using some clever CSS, you can disguise the Like button to look like something else and trick people to click on the button ;)

.

Update: As a commenter pointed out. This does not work in Internet Explorer because it lacks support for pointer-events. It does work in Firefox, Chrome and Safari.

Disguising Facebook Like button (iframe)

In the example button below, I’ve disguised the Like button to look like a button that might be used to move between different pages. If you click on it, you’ll be Liking my blog.

(If you don’t see the custom Like button above, go to the Facebook Like test page)

Result (iframe)

The result of clicking on the above customised Like button is a post going out to all my friends on Facebook letting them know I like http://www.esrun.co.uk

facebook like result

As yet, I haven’t found a way to redirect a user after they click, due to browser security policies on third party content loaded in iframes.

Code (iframe)

This code is ready to rock. Just swap out ‘href=http://www.esrun.co.uk’ with your own URL and replace the background URL for #fake_facebook_button in the CSS.

Disguising Facebook Like button and redirecting on click (XFBML)

In the example below, I’ve again disguised the Like button. This time, when you click on it, not only will you be liking esrun.co.uk but you’ll also be redirected to the next page (for example sake, it redirects to Google).

Note: I’ve placed the sample button inside an iframe so you don’t get taken off this blog post. If you want to see it in use on a regular page then go direct to the Facebook XFBML Like test page

Code (XFBML)

This code is ready to rock n’ roll. Just swap out fb:like href=”http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/” with your own URL and replace the background URL for #fake_facebook_button in the CSS.

NOTE: Unlike the iframe method, with XFBML, if you want to capture and redirect the user when they click on the Like button then the domain where the button is hosted and the URL that the user is Liking must match.

For example I can put the Like button within this post and have people Like any page on esrun.co.uk but couldn’t make them Like a page on onlinehoster.com

Legitimate use

There are also legitimate uses of the code above.

For example, if you operated an online store, you could offer a discount during the checkout process if the user ‘Likes’ your website. Instead of redirecting after the user clicks the button(as above), you’d fill in the discount box with your special code.

Another viral example would be making the Like button look like a play button below a new movie trailer. When the user clicks on the button, you’ll start the trailer (instead of redirecting the user, as above). Hell, you could even just use the real button instead of customising it and be upfront by telling the user that they need to click on it before you let them watch the trailer.

16 Comments »

RSS feed for comments on this post. TrackBack URI

  1. Is there any way that once the user clicks on it and he is take to some other page. Like if he clicks on next then he is diverted to other page.

    Comment by Saurabh — 23rd November, 2010 #

  2. Saurabh, that’s exactly what I’ve been playing with. Trying to redirect the user on click, hide the button, anything really. So far I haven’t had much luck because of the way browser security works.

    Comment by admin — 23rd November, 2010 #

  3. [...] via Skandalös! [...]

    Pingback by How to confuse an idiot – RELOADED : Milchrausch! — 23rd November, 2010 #

  4. Thx for posting this Esrun!

    Just a warning for everyone. If you use this for example as play button and your video goes viral, it’ll most likely crush your server… :D
    Use it with caution for stuff like this…

    Comment by Joko — 24th November, 2010 #

  5. Does this work only in FF? (thanks to pointer-events?)

    Comment by Domcat — 24th November, 2010 #

  6. Domcat, I tested it in Firefox, Safari and Chrome. It worked in those 3. I haven’t tested it in Internet Explorer.

    Comment by admin — 24th November, 2010 #

  7. okay, thanks.
    I also wonder if we could somehow fake the title of the page that is displayed on the FB wall with the tags or somehow, what do you think?

    Comment by Domcat — 24th November, 2010 #

  8. Hmm, well the title is generated by Facebook scraping the page you’re promoting with the Like button. So if you added code to that promotion page which checks the useragent, you could serve up a different title to the Facebook bot :)

    Comment by admin — 24th November, 2010 #

  9. it is very interesting your post, just what was seeking

    is there any way to do this in facebook fans page in a tab fbml just like this page?:
    http://www.facebook.com/FanPageEngine?v=app_148891981830105

    thanks I expect your answer.

    Comment by jorge — 16th January, 2011 #

  10. Now that’s a great little trick! Thanks for posting it.

    Comment by Blippitt — 24th January, 2011 #

  11. This is awesome!
    It could get a site viral in no time. I was just wondering what could happen if facebook sees what you’re doing. Ban your domain? Send a C&D and sue you? lol
    I guess this would only happen when a user reports you anyway right?

    Comment by stamadum — 7th February, 2011 #

  12. Hmm I’m really not sure to be honest. It wouldn’t surprise me if they closed your account. But I really can’t imagine them taking any form of legal action over it. But i’m not a lawyer, so consult one before doing it blah blah etc etc

    Comment by admin — 24th February, 2011 #

  13. I’m trying to use this somehow on my page, waxstax.com I’m using wordpress and the premium. It has options to put in images for ad’s that appear on the front page (4 squares) but I want one of the ad images to function like this (so when you click it, you automatically like the waxstax facebook page) where would I need to insert this code to make this work. Currently I just have options for an image link, and a url link. Thanks

    Comment by WaxStax — 23rd June, 2011 #

  14. An year passed. It’s September 2011. Is this method against the TOS now?

    Item IV. 7. d. “You must not obscure elements of the Like button or Like box plugin.”

    http://developers.facebook.com/policy/

    Comment by toss — 24th September, 2011 #

  15. Hmm well that would suggest it’s against the ToS. I’d imagine most readers of my blog wouldn’t be that concerned about breaking a companies ToS :P

    Comment by admin — 25th September, 2011 #

  16. In IE 8.0 and Opera (last version) I couldn’t click on iframe because it’s behind the fake like div block.
    In other browsers fake like div looks like absolutely opacity, that’s why I can click on iframe behind it.
    Could anyone help me?

    Comment by Halfist — 4th April, 2012 #

Leave a comment

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>