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="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.harding.edu%2Ffmccown%2F&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35" 
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>
    &nbsp;
    <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.

2 comments:

  1. This is so awesome nicely done man! I was wondering if there was a way to make the comments come out in order for e.g. case 1 then case 2 then case 3 and so on. Thanks

    ReplyDelete
  2. I should have also included this in my previous post but how would you go about making it appear in a box rather than it being displayed written next to it ? Sorry about this im just new to website designing and we have to make one for an assignment its really annoying got to learn so much in so little time hahaha ive learnt basics of html & css and now trying to learn javascript not going so well XD

    ReplyDelete