Facebook Open Graph - “Like Button” - 在“Like”时显示隐藏内容答案

【问题标题】：Facebook Open Graph - 'Like Button' - Hidden Content Revealed Upon 'Like'Facebook Open Graph - “Like Button” - 在“Like”时显示隐藏内容
【发布时间】：2010-05-24 22:02:32
【问题描述】：

我想知道，我希望有一个带有 Facebook 开放图表（特别是喜欢按钮）的登录页面，并且我希望基本上将内容设置为 display: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 从 display:none 设置为 display:block 吗？

谢谢你。

【问题讨论】：

标签： javascript facebook facebook-like facebook-opengraph

【解决方案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 事件不会触发，除非您在通话中使用的 URL 与您尝试触发该事件的 URL 完全相同。

我在 example.DEV（我的本地笔记本电脑开发环境）上运行了一个站点，该站点引用了 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>

【讨论】：

【解决方案3】：

只需将Log.info() 调用替换为显示div 的JavaScript。在 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>

【讨论】：

我仍然有这方面的重大问题，我似乎无法找到任何解决方案。我知道对于这样一个无助的成员来说这是一个巨大的要求，但是您能否提供 div 格式来伴随此代码以使其正常工作？谢谢你的时间ceejay。

【解决方案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");
});

【讨论】：