Facebook xfbml Like 按钮无法正常工作
我的网站上有一个由 ajax 驱动的新闻部分。我正在尝试实现 Facebook Like 按钮的 xfbml 版本，但遇到了一些问题。
当第一次点击新闻项上的“赞”时，不会拉入任何 og 标签，因此您得到的只是一个评论框。 奇怪的是，如果我随后查看另一个新闻项并返回到第一个新闻项，则“like”按钮可以正常工作，并且所有日志数据都可以正确提取。这似乎是某种缓存问题？
我还遇到了一个问题，在点击“赞”后，在有机会输入评论之前，浮动弹出框消失了。它在那里只持续了不到一秒钟。如果我不喜欢该新闻项目并重新喜欢它，浮动弹出框最终会保持不变，但可能需要多次尝试。
这是标题的示例
<!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:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en-GB" lang="en-GB">
<head>
<meta property="og:title" content="She's in fashion"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.kirkleescollege.ac.uk/news/1103"/>
<meta property="og:image" content="http://www.kirkleescollege.ac.uk/photo/news/1103/full"/>
<meta property="og:site_name" content="Kirklees College"/>
<meta property="og:description" content="This year Rebekah Crowther will take the first steps towards her dream career in fashion retail thanks to a new course at Kirklees College."/>
<title>Kirklees College News - She's in fashion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
这是正文代码，当前位于测试服务器上，而不是实时服务器上。
<div id="fb-root"></div>
<script>
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){
}});
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#appId=APPID&xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=APPID&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.kirkleescollege.ac.uk/news/<?php echo $id; ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
关于上述代码，有几点需要提及，实时代码设置了我的应用程序 ID，但我不确定这是否是敏感信息，因此我在此处将其删除。我假设两个应用程序 ID 应该相同？
FB.XFBML.parse() 代码来自 Stackoverflow。它允许在 ajax 驱动的页面上加载“like”按钮。
我不明白的是为什么它是间歇性的。你可能会想，即使有什么问题，它仍然会保持一致。
希望有人可以提供帮助，因为这让我发疯！
I have a news section on my site that is ajax driven. I'm trying to implement the xfbml version of the Facebook Like button and have run into a few problems.
When clicking on 'Like' on a news item for the first time, none of the og tags are pulled in, so all you get is a comments box.
Strangly, if I then view another news item and go back to the first news item, the like button works correctly and all og data is pulled correctly. It seems like some sort of caching issue?
I've also had an issue with the floating popup box disappearing after clicking on like, before having chance to enter a comment. Its there for a fraction of a second. If I then unlike the news item and relike it, the floating popup box does eventually stay put, but it can take several attempts.
Here is a sample of the header
<!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:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en-GB" lang="en-GB">
<head>
<meta property="og:title" content="She's in fashion"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.kirkleescollege.ac.uk/news/1103"/>
<meta property="og:image" content="http://www.kirkleescollege.ac.uk/photo/news/1103/full"/>
<meta property="og:site_name" content="Kirklees College"/>
<meta property="og:description" content="This year Rebekah Crowther will take the first steps towards her dream career in fashion retail thanks to a new course at Kirklees College."/>
<title>Kirklees College News - She's in fashion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
And this is the body code, currently on the testing server, not the live server.
<div id="fb-root"></div>
<script>
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){
}});
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#appId=APPID&xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=APPID&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.kirkleescollege.ac.uk/news/<?php echo $id; ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
A coulpe of things to mention about the above code, the live code has my app ID set but I wasn't sure if this was sensitive information so I've removed it here. I'm assuming both app id's should be the same?
The FB.XFBML.parse() code came from Stackoverflow. It allows the like button to load on an ajax-driven page.
What I can't understand is why its intermittent. You would think If something with wrong it would still be consistent.
Hope someone can help as this is driving me crazy!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您必须在代码中添加 appid
检查行
您必须粘贴自己的appid，而不是APPID
you have to add the appid in the code
check the line
instead of APPID you hv to paste your own appid