2010-05-24 159 views
1

我想知道,我希望有一个登陆页面与Facebook的开放图形(特别是像按钮),我想基本上有内容设置为显示:none(用户不喜欢某个页面时记不清具体情况,例如电子商务商店中的div,当用户喜欢该页面时,div被设置为display:block并且用户可以兑换优惠券代码对于Facebook的开放图 - '喜欢按钮' - 隐藏的内容显示'喜欢'

折扣,我想能够与格显示器做到这一点

我看到的代码在Facebook上开发者论坛,这个小片段:

| (从http://fbrell.com/xfbml/fb: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> 

可以这样修改,以有效集中显示来自一个div块?

谢谢。

回答

0

只需用显示div的JavaScript代替Log.info()调用即可。在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> 
+0

我仍然有这个主要问题,我似乎无法得到任何解决方案的工作。我知道这对于这样一个无助的成员来说是一个巨大的要求,但是你能否提供div格式来陪伴这段代码使其工作?谢谢你的时间ceejay。 – DoMx 2010-05-24 22:34:32

2

如果你特别希望更新您的div来display:block,使用...

<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> 

一个警告...

edge.create事件将不会触发除非您作为呼叫的一部分使用的网址与您试图从中触发的网址完全相同。

我有一个网站,我在example.DEV(我的本地笔记本电脑开发ENV),它引用在链路上运行example.com(直播服务器)和任何在FB.Event.subscribe()块,直到不会跑我上传了该文件,并从LIVE服务器中解雇了它。

这可能是为什么你有麻烦,如果它不工作到目前为止!

2

我发现了以下解决方案,但您需要使用jQuery来完成它。 (可能不是,但那是我以前做的)。

下面是代码:

<!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> 
0

验证喜欢的页面将触发代码(试行console.log("AOK!"))后,你可以做一个<div>使用此代码显示:

普通老式的JavaScript:

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

的HTML:

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

如果你使用jQuery库或类似的东西,你可以用一个show()功能,使箱子出现,而不是:

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

你也可以考虑使用AJAX加载命令代替,因为否则当内容仅被隐藏时,使框出现是相当容易的。

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