Jquery Detect Click Facebook Like Button -

<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"> </script> Use the XFBML version, not the iframe version.

So, how do we solve it? You need to use the and listen for their built-in Edge events . The Short Answer (No jQuery for the Click) You cannot do this: jquery detect click facebook like button

If your script runs after the SDK loads, the event subscription will fail. <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> // Define this BEFORE the SDK loads window.fbAsyncInit = function() FB.init( appId : 'your-app-id', // Optional for like button xfbml : true, version : 'v18.0' ); // jQuery-powered detection FB.Event.subscribe('edge.create', function(href, widget) $('#output').html('<strong>Liked!</strong> URL: ' + href); ); FB.Event.subscribe('edge.remove', function(href, widget) $('#output').html('Unliked :('); ); ; </script>  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"> </script> </head> <body> <div class="fb-like" data-href="https://www.facebook.com/facebook" data-layout="standard"></div> <div id="output" style="margin-top:20px; font-weight:bold;"></div> </body> </html> Why Can’t We Just Use $('.fb-like').on('click') ? A few developers try to target the parent container of the Like button. While you can detect a click anywhere inside that container, you cannot reliably tell if it was the Like button vs. the share button, counter, or empty space. The Short Answer (No jQuery for the Click)

<div class="fb-like" data-href="https://your-website.com/article" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="false"></div> Now, add this JavaScript (with jQuery): While you can detect a click anywhere inside

Now go build that social analytics dashboard you’ve been planning! Drop a comment below – I’ll cover those next.

If you’ve tried the standard onclick event, you already know it doesn’t work. The Like button is embedded inside an iframe (sandboxed from your page). You cannot directly attach a jQuery click handler to elements inside an iframe from the parent document.

// This will NOT work $('#facebook-like-button').on('click', function() alert('Liked!'); ); The Like button resides in a cross-origin iframe. jQuery cannot see inside it for security reasons. Facebook provides its own event system. When someone clicks "Like" (Facebook calls this creating an "edge"), the SDK fires an event you can listen for. Step 1: Load the Facebook JavaScript SDK Make sure the SDK is loaded on your page.