Steven Mihelakis Steven Mihelakis - 1 year ago 108
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

and it doesn't work, however,
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=""></script>

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


<!-- 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); = id;
js.src = "";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

<!-- MY click Event -->
$(".fb-like").click(function(){ //click doesnt work, hover does


<!-- 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>

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download