Question

I need some help to get this to work. It works, but i have to click at the side of the like button. I want it to register the click when the iframe is clicked. I tried setting the onclick in the iframe too, but that didn’t work either.

This is my script in the top of the page:

<script type="text/javascript">
function updateLikes(id) {
var ajax;

// Code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
    ajax=new XMLHttpRequest();
} else { // code for IE6, IE5
    ajax=new ActiveXObject("Microsoft.XMLHTTP");
}

ajax.onreadystatechange=function()
{
if (ajax.readyState==4 && ajax.status==200)
{
document.getElementById("images0").innerHTML=ajax.responseText;
}
}

ajax.open("POST","update_likes.php", false);
ajax.send("image_id=" + id);

}
</script>

Then there is what im echo’ing out:

        echo '
        <div align="center" class="images" id="images'.$i.'">
        <a class="image" border="0" href="p.php?id='.$row['id'].'">
        <img class="img" src="'.$row['path'].'" alt="image" />
        </a>
        <div class="meta" style="padding-bottom:5px;">Lastet opp av <div style="color:#47a09f; display:inline;"><a href="user.php?user='.$row['uploader'].'" style="color:#47a09f;">'.$row['uploader'].'</a></div></div>
        <div id="likebutton" class="faceLike" align="center" onClick="updateLikes(' . "'" . $row['id'] . "'" . ');"><iframe src="//www.facebook.com/plugins/like.php?app_id=144501772249167&amp;href=http://www.puffys.net/p.php?id='.$row['id'].'&amp;send=true&amp;layout=button_count&amp;width=0&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></div>

        </div>
        ';

My problem is the facebook button. When i click it, i want it to register the click with onclick so it’s inserted to my database. But that does not happen. Only if i click at the side of the like button.

Thx in advance.

Answer 1

You won’t be able to capture the click event of the DIV, as the document ONCLICK event from the IFRAME precedes it.

Also, you won’t be able to capture the click event of the IFRAME, as it is overriden by the destination page.

You need to use the Facebook API, as described here: Facebook "Like" button callback