Custom simple like button (not facebook)

Question

I'm looking for the easiest way to add a simple like button to my site. Basically, a button that, when clicked - changes to a new graphic (letting you know you clicked it), can't be clicked again, and sends to a php script so the server knows what you liked.

I thought a good technique might be putting a like button inside an iframe so you can click it and the php page could just echo 'thanks for liking this' - but the problem is the iframe has to have a source. I don't want a ton of external files loading into each page. Is there any way I could just have an iframe tag and put HTML inside it without it being external?

Is it possible for you to use javascript? You could use an ajax call and have the handler alter the contents of your button. — showdev, Jun 05 '13 at 00:17
your sources for the iframes could be http://www.mysite.com/like.php?id=135325 — Orangepill, Jun 05 '13 at 00:51

score 1 · Answer 1 · answered Jun 05 '13 at 01:35

Hopefully this makes sense. I do not know your server structure, so its hard for me to build a complete example but this should get you off your feet!

File: Index.php

// query the database and check to see if there is a record for this content piece and ip address
// select count() from statistics where contentId='1' and ip='0.0.0.0' limit 1;
$contentLiked = false;

?>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script src="site.js"></script>
</head>
<body>
<? if(!$contentLiked): ?>
<a href="JavaScript:void(0);" rel="1" class="likeButton status">like</a>
<? else: ?>
<a href="JavaScript:void(0);" rel="1" class="likeButton status liked">unlike</a>
<? endif ?>
</body>
</html>

File: site.js

$(document).ready(function() {

    $('.likeButton').click(function() {

        var contentId = $(this).attr('rel');
        var link = this;

        if(!$(link).hasClass('liked')) {
            $.post("like.php", { Id: contentId }).done(function(data) {         
                if(data) {
                    $(link).addClass('liked');
                    $(link).html('liked');
                }
            });
        }

    });
});

File: like.php

<?

    $contentId = $_POST['Id'];
    $timestamp = time();
    $usersIP = $_SERVER['REMOTE_ADDR'];

    // php code to update the database
    // insert: contentId, timestamp, ip address


    // if injected then echo / print true;
    echo 'true';

?>

That seems to work almost flawlessly, except in the like.php file I had to change the first line from to — Robby Mulvany, Jun 05 '13 at 01:54
You need to make sure that the response from the "like.php" returns an echoed (or printed) value of "true". If you notice in the site.js, it is looking for the response of "true" in order to update the text verbiage. If you feel that this answer has solved your issue, can you mark it as an valid answer? — Jonathan Christensen, Jun 05 '13 at 18:30

score 0 · Answer 2 · answered Jun 05 '13 at 01:11

You should use jquery animate. It allows you to create an animation on a HTML element that you choose with jquery.

With Jquery, using the 'click' event, you can use the animate effect, and have something like this:

$("#my-button").click(function(){
    $(this).animate({
        height: 'toggle'
    }, 500, function(){
        $(this).animate({
            height: 'toggle'
        }, 500);
    });
});

Please see the following example of doing that

Custom simple like button (not facebook)

2 Answers2