Facebook Open Graph - “点赞按钮” - 通过“点赞”显示隐藏内容

发布于 2024-09-02 23:29:51 字数 707 浏览 3 评论 0原文

我想知道，我希望有一个带有 Facebook 开放图谱（特别是“喜欢”按钮）的登陆页面，并且我希望基本上将内容设置为显示：无（在用户喜欢某个页面之前不记得具体内容。一个例子是电子商务商店上的一个 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 吗？

谢谢你。

原文

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);
  });
</script>

Can this be modified to effective set a div from display:none to display:block?

Thank you SO.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瑕疵 2024-09-09 23:29:51

我找到了以下解决方案，但您需要 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>

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>

回复收藏 0 原文

昨迟人 2024-09-09 23:29:51

如果您特别想将 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>

一个警告...

除非您使用的 URL，否则您的 edge.create 事件不会触发作为您调用的一部分与您尝试触发此操作的 URL 完全相同。

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

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

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!

回复收藏 0 原文

渡你暖光 2024-09-09 23:29:51

只需将 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>

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>

回复收藏 0 原文

寄与心 2024-09-09 23:29:51

验证喜欢该页面将触发该代码后（尝试 console.log("AOK!")），您可以使用以下代码显示

：

普通旧式 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");
});

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");
});

回复收藏 0 原文

~没有更多了~

关于作者

梦行七里

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

Facebook Open Graph - “点赞按钮” - 通过“点赞”显示隐藏内容

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

Facebook Open Graph - “点赞按钮” - 通过“点赞”显示隐藏内容

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。