Facebook Open Graph - 'Like Button' - Hidden Content Revealed Upon 'Like'
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);
});
<开发者_StackOverflow社区/script>
Can this be modified to effective set a div from display:none to display:block?
Thank you SO.
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!
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>
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>
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");
});
加载中,请稍侯......
精彩评论