Question

我想知道，我希望在Facebook的Open Graph（特别是类似按钮）上有一个登陆页面，我希望基本上能够显示内容：none（在用户喜欢某个页面之前不记得具体内容）。一个例子是电子商务商店的div，当用户喜欢该页面时，div被设置为display：block，用户可以兑换优惠券代码以进行折扣。

我希望能够通过div显示来做到这一点。

我在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：无显示：块？

谢谢你。

Answer 1

如果您特别想将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 （我的本地笔记本电脑开发环境）上运行的网站，它引用了 example.com （实时服务器）上的链接和任何内容FB.Event.subscribe()块中的内容在我上传文件后才会运行，并从LIVE服务器中解除。

这可能就是为什么你遇到麻烦，如果它到目前为止没有工作！

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

Answer 3

只需使用显示Log.info()的JavaScript替换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>

Answer 4

在确认喜欢该页面后会触发该代码（尝试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");
});

Facebook开放图表 - '喜欢按钮' - 隐藏的内容透露在'喜欢'上

4 个答案: