Friday, June 18, 2010

A Dislike button for yourself

I've been playing with Facebook's new Like button which you can place on any of your web pages. When someone clicks on the Like button, it shows up in their Facebook account. All you have to do is insert an iframe into your webpage. Here's what my iframe looks like for my Harding home page:
<iframe src="" 
scrolling="no" frameborder="0" style="border:none; 
overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

It got me wondering though, what if someone wanted to dislike me? So I created a Dislike button and rigged up a little JavaScript to display a snarky message when someone clicks on the button. You can see it on my home page, right under the Like button.

If you'd like to make your own Dislike button, just follow these steps:
  1. Place this image on your website:

  2. Use the following HTML to display the Dislike button and a place-holder for some text:
    <a href="javascript:Dislike()"><img
    src="dislike.png" width="61" height="24"
    title="Click here to dislike this item" border="0" /></a>
    <span id="dislike_text" style="position:relative; top:-7px; 
    font-family:Tahoma; font-size:8pt;"></span>

  3. Finally, insert this JavaScript function somewhere in your page which randomly chooses a message to display:
    function Dislike()
       var responses = [
          "I'm not crazy about you either.",
          "Whatever.", "Seriously?", 
          "My feelings are so hurt.",
          "I'd rather be feared than liked.", 
          "Nice try."];
       // Get a random number between 0 and responses.length - 1 
       var num = Math.floor(Math.random() * responses.length);
       document.getElementById("dislike_text").innerHTML = responses[num];

Note that this is only for fun, and it will not show up in Facebook.

If you are really interested in having a Dislike button that works in Facebook, check out this Firefox plug-in.