个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我找到了 tutorial for lazy loading Facebook's like box , 但仅当您在页面上使用一个 FB 小部件时才合适。
如果你想正常加载“like button”，但又想延迟加载“like box”，那会是什么样子，i. e.仅当用户滚动并且喜欢的框在视口(viewport)中时才加载它？
此外，是否可以在没有任何插件的情况下做到这一点，并且可能没有 jquery，我。 e.仅使用纯 JavaScript？
这里是提到的代码:
/**
* check if facebookHolder is in viewport, and then load Like Box widget
*/
$(document).ready(function() {
function checkScrollingForWidget(event) {
$('#facebookHolder:in-viewport').each(function() {
$('#facebookHolder').append('<div id="fb-root"></div>');
$('#facebookHolder').append('<fb:like-box href="http://www.facebook.com/forexagone" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
FB.init({status: true, cookie: true, xfbml: true});
});
$(window).unbind('scroll', checkScrollingForWidget);
}
$(window).bind('scroll', checkScrollingForWidget);
});
由于 Facebook 的点赞框被广泛使用并且可以稍微减慢页面加载速度(即使它是异步的)，我很惊讶地看到没有更新的教程如何做到这一点。有可能吗？
预先感谢您的想法。
这是一个简单的 HTML 文档中 Markus 的代码:
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy Load</title>
<script src="http://code.jquery.com/jquery-git.js" type="text/javascript"></script>
<script src="http://www.appelsiini.net/download/jquery.viewport.js" type="text/javascript"></script>
<style type="text/css">
.facebookHolder {
height: 50px;
background: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
</script>
</head>
<body>
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
</body></html>
最佳答案
您可以随时动态添加 Facebook 小部件，但您需要调用 FB.XFBML.parse将其添加到 DOM 之后。
关于javascript - 如何延迟加载 Facebook 的 Like Box？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20814661/
24
4
0
我为我们的业务创建了一个 Facebook 页面，我创建了一个 Facebook 应用程序来获取 AppID，以便在 Facebook 插件中使用它。 我注意到 Facebook 应用程序的页面看起来
是否有可能知道哪个 Facebook 用户点击了我的应用用户在 Facebook 上分享的链接？ 为了清楚起见，让我改写一下:我想知道我的应用用户的哪些 friend 点击了他的共享链接。 感谢任何提
我正在浏览 facebook pixel，对 facebook pixel 如何知道哪个转化来自哪个 facebook 广告感到很困惑？ 假设我有这个 url http://example.com安装
我正在开发 sucsongmoi.net(越南语)，当浏览者从他们的墙上分享网站链接时，一些链接 facebook 获得描述和图像，一些链接 facebook 无法获得描述和图像。 例如:分享 suc
一位同事错误地设置了个人 Facebook 页面；它应该是一个企业 Facebook 页面。 个人页面上有几个 friend 需要重定向到正确的 Facebook 业务页面。 我可以将用户从错误的个人
在 Facebook 上，当您转到“编辑我的个人资料”>“艺术和娱乐”时，会有一个“电影”自动完成小部件，它会在您输入电影时推荐电影。 因此，如果您输入“Jones”，它将开始建议: 印第安纳琼斯 布
我在我的网页上使用 Facebook 登录。首次登录时，Facebook 登录应用程序会请求获取用户数据的权限。 有什么方法可以改善这个问题，以请求喜欢我的 Facebook 页面的许可？用户点击后，
我需要知道是否可以将现有的 Facebook 页面(类别:应用程序页面)链接到 Facebook 应用程序？当我进入 Facebook 应用程序设置时，他们建议创建一个新页面。但我需要的只是链接到现有
我的网站应用程序具有通过 Facebook 登录进行登录的功能。为此，我的应用程序出现在 Facebook 上。使用 Facebook 登录工作正常。 但应用程序具有将 Facebook 帐户链接和取
我正在制作一个应用程序，让人们可以在 Facebook 上与特定的 friend 分享内容。示例:Alice 使用我的应用程序，她与 Bob 分享了一篇文章，Bob 是她的 Facebook 好友。现
我正在按照列出的说明进行操作 http://docs.appcelerator.com/platform/latest/#!/api/Modules.Facebook 并查看 Arrow 示例目录中的
假设我有一个餐厅的商业网站，一位顾客为一大群人预订了一张 table 。有没有一种方法可以让客户有机会在餐厅网站上创建 Facebook 事件，作为预订流程的一部分。我知道客户必须以某种方式从餐厅网站
我想让我的用户将他们的用户帐户与 Facebook 或 Twitter 相关联，并允许他们使用他们的 Facebook/Twitter 帐户登录我的服务器，而不是使用传统的用户名/密码。与StackO
我们有一个面子书页面。我们添加了一个自定义 FBML 选项卡。现在我们要添加评论面子书插件。我尝试添加一个脚本，我从 Face book Social Plug in .代码是 之后我将此脚本放入自
大家好 请帮我找到关于以下的官方信息: 1) 什么是“FaceBook 登录” 2) 什么是“FaceBook Connect” 谢谢 最佳答案 你可以在那里找到你需要的一切: http://deve
这是最奇怪的事情。我有非常简单的 CF 代码，查看 cgi.HTTP_REFERER。简单地说，它查看推荐人。如果链接是从我们的主要网站域之外单击的，它会显示一些内容。否则，什么也不会发生。所以，如果
我还是 Facebook Graph API 的新手，正在尝试开始使用 Facebook 地点搜索。 (按位置搜索地点) https://graph.facebook.com/search?type=
我不想开设 Facebook 帐户，但我被要求为需要使用 Facebook API 的应用程序开发功能。有没有一种方法可以开发这些功能并使用 Facebook API，而无需开设个人 Facebook
我已经按照指示实现了 DotNetOpenAuth 提供的示例应用程序 here . 正如您在下面看到的，这要求用户安装此 facebook 应用程序。 我只是想让用户使用他们的 Facebook 登
我的主页上有标准的 Facebook 登录按钮，我不希望人们仅在用户单击登录按钮时使用他们的 Facebook 帐户自动登录我的网站。 如果用户未登录 Facebook，将出现一个弹出窗口询问他的凭据
我是一名优秀的程序员,十分优秀！