Steven Mihelakis Steven Mihelakis - 25 days ago 6
HTML Question

Facebook Like button Jquery Javascript

I have a little problem hopefully someone can help with :)

I have a Facebook like button on a page, that I would like to, when 'clicked' to display a form underneath it. So far I have tried

.click
and it doesn't work, however,
.hover
does! But I don't want it that way.

Any info would be greatly appreciated!

(for testing purposes the like button doesn't refer to any page yet, also for facebook script to work needs to be on a server, localhost or otherwise)

Here is my code:

<!-- Add Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!--My styles -->
<style>
#form{display: none;width:400px;}

</style>

<!-- Facebook Code -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<!-- MY click Event -->
<script>
$(document).ready(function(){
$(".fb-like").click(function(){ //click doesnt work, hover does
$("#form").css("display","block");
});
});

</script>

<!-- the Button -->
<div class="fb-like" data-href="#" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>

<!-- The Form -->
<form id="form">
<input type="text" name="name" value="First Name"><br>
<input type="email" name="email" value="Your Email">
<button type="submit" name="submit" value="submit">Sign Up</button>
</form>

Answer

A scratch my previous answer. I looked again and found out that the like button is rendered in an iframe. That means it is protected by first origin policy and you CANNOT access DOM components on another domain. Tough luck.