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

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 2

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

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="facebook.js"></script>
<script src="jquery.min.js" type="text/javascript"></script>

</head>

<body>
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
 FB.init({appId:  133387220039676 , status: true, cookie: true, xfbml: true});
 FB.Event.subscribe( edge.create , function(href, widget) {
 // Do something, e.g. track the click on the "Like" button here
    $( #slidingDiv ).show();
 });
};
(function() {
 var e = document.createElement( script );
 e.type =  text/javascript ;
 e.src = document.location.protocol +  //connect.facebook.net/en_US/all.js ;
 e.async = true;
 document.getElementById( fb-root ).appendChild(e);
 }());
//-->
</script>
<fb:like href="http://www.facebook.com/TheRightMind" layout="standard" show-faces="false" width="450" action="like" colorscheme="light"></fb:like>

<div id="slidingDiv" style="display:none;">
Fill this space with really interesting content that you can
</div>

</body>
</html>

Answer 3

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 4

After verifying that liking the page will trigger that code (try console.log("AOK!")), you can make a <div> appear using this code:

Plain Old JavaScript:

FB.Event.subscribe( edge.create , function(href, widget) {
  document.getElementById("topsecret").style.display = "block";
});

The HTML:

<div id="topsecret" style="display:none;">
  Content Goes Here
</div>

If you re using the jQuery library or something similar, you can use a show() function to make the box appear instead:

FB.Event.subscribe( edge.create , function(href, widget) {
  $("#topsecret").show();
  //$("#topsecret").slideDown("fast");
  //$("#topsecret").fadeIn("fast");
});

You might also consider using an AJAX load command instead, because otherwise it s fairly easy to make the box appear when the content is only hidden.

FB.Event.subscribe( edge.create , function(href, widget) {
  $("#topsecret").load("mycontent.html");
});

友情链接