CODEWITHSUNDEEP
javascriptjqueryfacebook
andrewb
andrewb

Reputation: 3095

Detect when Facebook like button is clicked

I have the following JavaScript code

<div class="fb-like-box" data-href="snip" data-colorscheme="light" 
    data-show-faces="false" data-header="false" data-stream="false" 
    data-show-border="true"></div>

I am trying to detect when the like button is clicked. The above code renders an iframe so my jquery event handler of

$('.fb-like-box > button').on('click', function() { console.log('Clicked'); });

Never fires. I tried wrapping this div and other content in a wrapper div and target that in the $() call but it only fires when the other content is clicked, not the area that is rendered by the Facebook SDK.

Upvotes: 2

Views: 6435

Answers (3)

andyrandy
andyrandy

Reputation: 73984

https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.3

You just need to subscribe to the edge.create event for likes. See docs for example code.

But as commented, you are not allowed to reward users for liking. Read the platform policy for more information: https://developers.facebook.com/policy/

Update: https://developers.facebook.com/blog/post/2017/11/07/changes-developer-offerings/

edge.create and edge.remove JS SDK Events: These Events will no longer be accessible. As an alternative, you can use our Webhooks and be notified every time someone likes one of your Facebook Pages.

Upvotes: 5

Ihor Kalaida
Ihor Kalaida

Reputation: 11

edge.create and edge.remove JS SDK Events: These Events will no longer be accessible. As an alternative, you can use our Webhooks and be notified every time someone likes one of your Facebook Pages.

https://developers.facebook.com/blog/post/2017/11/07/changes-developer-offerings/

Upvotes: 0

Keinan Goichman
Keinan Goichman

Reputation: 121

This code works for me:

<script>
var liked_page = function() {
  alert("liked!");
}

FB.Event.subscribe('edge.create', liked_page);
</script>

I have placed it at the end of the page. Furthermore I believe you should also place 

<div id="fb-root"></div>

At the beginning of the page, right after the <body> tag.

Upvotes: 0

Related Questions