2

我花了几天时间试图解决这个问题，但没有成功。问题是当用户点击一个赞按钮时，它并不表示他们喜欢墙上的任何东西。虽然代码在我在本地主机上的测试设置上正常工作，但它在生产中不起作用。

我的客户正在使用 wordpress 的图片库插件以及称为 FancyBox 的灯箱插件，以在用户单击缩略图时显示更大版本的图像。他让我在每个fancybox 中添加一个类似facebook 的按钮。

由于 fanybox 是动态生成的，因此每当呈现 fancybox 时，我都会生成一个新的 like 按钮 iframe。点赞按钮 iframe 使用的 URL 对用户点击的图片来说是唯一的。该代码将 &photo=/location/of/photo.jpg 添加到图库 URL。然后整个自定义 URL 通过 encodeURIComponent() 传递并传递给 iframe。

这是用于生成 iframe 的代码片段

var currentURL = document.URL,  
    currentIMG = $("#fancybox-img").attr("src").split("http://www.downsplash.com").pop();  
if (currentURL.match("&photo=")) {  
    var currentURL = currentURL.split("&photo=").shift();
};
var thisURL = encodeURIComponent(currentURL + "&photo=" + currentIMG);
<span id="fancybox-title-over">
    <div id="facebook-like" style="display:inline-block;">
        <iframe src="//www.facebook.com/plugins/like.php?href=" + thisURL + "&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=true&amp;action=like&amp;colorscheme=dark&amp;font&amp;height=21&amp;appId=314592468583405" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>  
    </div>
</span>

这是生产中运行的代码的链接。

喜欢按钮代码似乎可以顺利工作，它允许您喜欢和不喜欢照片。唯一的问题是，当一张照片被点赞时，用户墙上什么也没有出现。

笔记：

  1. 仅使用没有自定义 &photo=/location/of/photo.jpg 的基本 URL 时，一切正常
  2. 在 localhost 上测试此代码时，它会发布到 facebook。

我不确定为什么这些喜欢没有出现在用户的 Facebook 墙上。有没有人有任何想法？

4

1 回答 1

0

正如Heera所指出的，生产代码正在运行，但是当 Facebook 发布到用户墙时，它会发布投资组合的 URL，不包括 &photo=/location/of/photo.jpg。发生这种情况是因为标题中有一个 Open Graph 元标记，它向 Facebook 提供投资组合 URL，仅此而已。

<meta property="og:url" content="http://www.downsplash.com/?portfolio=portraits">

因为我已经喜欢了投资组合 URL，所以我无法在墙上看到帖子。事实证明，“Simple Facebook Connect”和“Tweet、Like、Google+ 和 Share”插件会自动将这个打开的图形标签添加到标题中。这也解释了为什么我的代码可以在我的本地主机测试站点上运行，因为当我喜欢一张照片时，Facebook 无法扫描本地主机以查找打开的图形标签。

谢谢您的帮助！

编辑：

在我禁用插件并确保我的打开图形标签在 html 中正确显示后，我遇到了与 Facebook 缓存给定 URL 的打开图形标签相关的问题。这导致之前的错误 URL 重定向继续发生。我通过访问Facebook 的 Open Graph Debugger并输入 URL 解决了这个问题。这会导致 Facebook 刷新页面的打开图形标签的缓存。

于 2012-02-13T03:29:23.583 回答