1

我想知道，我希望有一个带有 Facebook 开放图形（特别是喜欢按钮）的登录页面，并且我希望基本上将内容设置为 display:none（在用户喜欢页面之前不记得具体内容。一个例子是电子商务商店上的一个 div，当用户喜欢该页面时，该 div 设置为 display:block 并且用户可以兑换优惠券代码以获得折扣。

我希望能够使用 div 显示来做到这一点。

我在 Facebook 开发者论坛上看到了这段代码：

| （取自http://fbrell.com/xfbml/fb:like） （注意：点击“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 从 display:none 设置为 display:block 吗？

谢谢你这么。

4

4 回答 4

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>
于 2010-10-21T09:20:13.577 回答
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除非您在通话中使用的 URL 与您尝试从中触发的 URL 完全相同，否则您的事件不会触发。

我有一个在example.DEV（我的本地笔记本电脑开发环境）上运行的站点，它引用了example.com（实时服务器）上的一个链接，并且在FB.Event.subscribe()我上传文件并从中触发之前，该块中的任何内容都不会运行实时服务器。

如果它到目前为止不起作用，这可能就是您遇到麻烦的原因！

于 2010-07-03T04:51:36.613 回答
0

只需将Log.info()调用替换为显示div. 在 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>
于 2010-05-24T22:10:03.553 回答
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");
});
于 2013-04-11T16:22:54.933 回答