使用 Ajax 更新 facebook like 按钮答案

【问题标题】：Updating facebook like button with Ajax使用 Ajax 更新 facebook like 按钮
【发布时间】：2011-12-06 09:32:08
【问题描述】：

我刚刚完成了一个 100% 基于 ajax 的小型网站。但是我在更新 facebook Like 按钮的链接时遇到了问题。

我只使用了 facebook 生成的 code 并包含了图形元标记。当用户按下按钮时，它会加载一个新的 youtube 视频，我会更新元标记

<meta property="og:url" content="http://www.mySite.com/"/>

以这种方式使用 jQuery：

$("meta[property=og:url]").attr("content", nUrl);

nUrl 是包含新随机选择的视频的新页面 url。

当我点击“Like”时，它只会抓取点击“Like”，它只会抓取原始的 og:url 元标记内容，现在是 ajax 设置的新内容。如何使用 javascript 更新类似按钮的 url？我做错了什么？谢谢

【问题讨论】：

标签： jquery facebook facebook-like meta-tags facebook-opengraph

【解决方案1】：

因此，我为其他有相同问题的人解决了我的问题：将此添加到您的网站：

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="http://www.facebook.com/2008/fbml" >

这会将 fbml 添加到您的站点。然后使用 FBML 版本的点赞按钮（或评论系统，或其他），因为我使用了这个：

<span id="fbLike"><fb:like href="http://www.your-site.com?v=1" send="false" layout="button_count" width="80" show_faces="true"></fb:like></span>

现在每次用户进行 Ajax 操作时都有一个新的 facebook like 按钮，只需将此 jquery 代码添加到您在客户端代码中处理此操作的位置：

var nUrl = "http://www.your-site.com?v="+toPlayId.substring(1);
$( '#fbLike' ).html('<fb:like href="'+nUrl+'" send="false" layout="button_count" width="80" show_faces="true" />');
        if (typeof FB  != "undefined"){
        FB.XFBML.parse(document.getElementById('fbLike'));}

您基本上只是用一个新按钮替换按钮所在的位置。 nUrl 是您希望新按钮指向的新链接。您不需要一个真正的新 URL，只需在 url 中添加一个参数，这样您的 ajax 就知道当他找到参数时要显示什么。就是这样。

【讨论】：

这不是我想要的，但关于使用FB.XFBML.parse 的部分终于点击了。重写span里面的html是巧妙的得到新的like按钮。

【解决方案2】：

不要使用 AJAX 或 javascript 修改元标记。设置服务器端脚本以在第一次正确设置它们。

当您在 Facebook 上点赞/分享 URL 时，Facebook 将向该 URL 发出 HTTP 请求并解析它看到的元标记。

【讨论】：

是的，但是like按钮应该指向好的页面url，如果它只是指向you-fake.com，我不知道用户喜欢什么视频来设置正确的元标记
是的，这就是我说服务器端脚本的原因。我使用 GET 变量来确定元标记设置的服务器端逻辑。

【解决方案3】：

您无法使用 Javascript 更新 OG 标签。 Facebook 将向您的服务器发出服务器端请求，这必须返回代表该对象的 OG 标签。

您需要为网站上的每个对象创建一个 URL - 例如：

http://www.yoursite.com/video/VIDEO_ID

当您的视频页内视频随 Ajax 发生变化时，您会呈现一个新的点赞按钮，该按钮指向这样的 URL。在没有 JS 的情况下点击此 URL 应该呈现正确的 OG 标签 - 这就是 Facebook 将如何查看您的页面。然后，您可以添加 javascript 重定向 (window.top.location = NEW URL) 将用户重定向到基于 ajax 的视频播放器。

【讨论】：