Personalise the Facebook like button

Question

I'm creating an application in Wordpress which a user downloads a video after they like the video. Videos are like posts. I have the Facebook like button but I want the button to change into download if the user likes the post. Any idea of what I should do? Thanks.

Answer 1

Just put the Facebook Like button in the same place as a download button, for example putting them in a common div element:

<div id="like_download_container">
    <div id="fb-like></div>
    <div id="download_button><!-- button code here --></div>
</div>

and give the download button the z-index value set to -1 . Then, bind an event in Javascript to a click event on the Like button which then bumps the z-index to 2 .

With jQuery (well, even without, but jQuery makes it way simpler), you can even apply a nice animation to it. Since you can't really animate a z-index change (it would just make the bottom element suddenly appear as soon as it passes the second one's z-index value), an idea is to play with opacity:

$('#download_button').css({
    'opacity' : '0',
    'z-index' : '2'
});
$('#download_button').animate('opacity', '1');