Facebook Open Graph - 'Like Button' - Hidden Content Revealed Upon 'Like'

Question

I was wondering, I wish to have a landing page with Facebook's Open Graph (specifically the like button) and I wanted to basically have content set to display:none (can't remember the specific until a user likes a page. An example being a div on an e-commerce store that when a user likes the page, the div is set to display:block and users can redeem a coupon code for discount.

I would like to be able to do this with div displays.

I saw this little snippet of code on the Facebook developers forum:

| ( taken from http://fbrell.com/xfbml/fb:like ) (Note: The event that's fired when you click "like")

<script>
  // this will fire when any of the like widgets are "liked" by the user
  FB.Event.subscribe('edge.create', function(href, widget) {
    Log.info('You liked ' + href, widget);
  });
</script>

Can this be modified to effective set a div from display:none to display:block?

Thank you SO.

Answer 1

Just replace the Log.info() call with JavaScript that displays the div. In jQuery:

<script>
  // this will fire when any of the like widgets are "liked" by the user
  FB.Event.subscribe('edge.create', function(href, widget) {
    $('#yourdiv').show();
  });
</script>

Answer 2

If you specifically want to update your div to display:block, use...

<script>
  // this will fire when any of the like widgets are "liked" by the user
  FB.Event.subscribe('edge.create', function(href, widget) {
    $('#divid').css('display','block');
  });
</script>

One caveat...

Your edge.create event WON'T fire unless the URL you use as part of your call is EXACTLY the same as the URL you're attempting to fire this from.

I had a site I was running on example.DEV (my local laptop dev env) which referenced a link on example.com (the live server) and anything in the FB.Event.subscribe() block wouldn't run until I uploaded the file, and fired it from the LIVE server.

That could be why you're having trouble if it's not working so far!

Answer 3

I can't catch edge.create fire. This is my code:

window.fbAsyncInit = function() {
FB.init({appId: 'x', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
    console.log(href, widget);
});
};

(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = 'http://connect.facebook.net/en_US/all.js';
 document.getElementById('fb-root').appendChild(e);
}());

Any ideas?

Answer 4

I found the following solution, but you will need jQuery to do it. (possibly not but thats what i used to do it)

Here is the code

Untitled Document













Fill this space with really interesting content that you can

Answer 5

Untitled Document

Fill this space with really interesting content that you can