点赞操作未显示在用户墙上

发布于 2025-01-04 20:26:35 字数 1655 浏览 3 评论 0原文

我花了几天时间试图解决这个问题但没有成功。问题是,当用户单击“喜欢”按钮时,并不表明他们喜欢墙上的任何内容。虽然代码在本地主机的测试设置上可以正常工作,但在生产中却无法工作。

我的客户正在使用 WordPress 的图像库插件以及名为 FancyBox 的灯箱插件,以便在用户单击缩略图时显示更大版本的图像。他要求我在每个 fancybox 上添加一个类似 facebook 的按钮。

由于 fanybox 是动态生成的,因此每当呈现 fancybox 时,我都会生成一个新的类似按钮 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. 仅使用基本 URL 而不使用 custom &photo=/location/of/photo.jpg
  2. 在本地主机上测试此代码时,它会发布到 facebook。

我不知道为什么这些赞没有出现在用户的 Facebook 墙上。有人有什么想法吗?

I've spent several days attempting to resolve this issue without success. The issue is that when a user clicks on a like button it does not indicate that they like anything on their wall. While the code works correctly on my test setup at localhost, it does not work in production.

My client is using an image gallery plugin for wordpress along with a lightbox plugin known as FancyBox to show larger versions of images when a user clicks on the thumbnail. He has asked me to add a facebook like button to each fancybox.

Since fanyboxes are dynamically generated, I generate a new like button iframe whenever a fancybox is rendered. The URL used by the like button iframe is unique to the picture clicked on by the user. The code adds &photo=/location/of/photo.jpg to the gallery URL. Then the entire custom URL is passed through encodeURIComponent() and handed to the iframe.

Here is the code snippet used to generate the 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 + "&send=false&layout=button_count&width=80&show_faces=true&action=like&colorscheme=dark&font&height=21&appId=314592468583405" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>  
    </div>
</span>

Here is a link to the code running in production.

The like button code seems to work without a hitch, it allows you to like and unlike photos. The only issue is that when a photo is liked, nothing appears on the users wall.

Notes:

  1. Everything works correctly when using just the base URL without the
    custom &photo=/location/of/photo.jpg
  2. When testing this code on localhost it DOES post to facebook.

I'm not sure why these likes are not showing up on the users facebook wall. Does anyone have any ideas?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

压抑⊿情绪 2025-01-11 20:26:36

正如 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 调试器 并输入 URL 解决了这个问题。这会导致 Facebook 刷新页面开放图标签的缓存。

As pointed out by Heera, the production code IS working but when Facebook posts to the users wall it posts the URL of the portfolio NOT including the &photo=/location/of/photo.jpg. This is happening because there is an Open Graph meta tag in the header that feeds Facebook the portfolio URL and nothing more.

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

I was not able to see a post on my wall since I had already liked the portfolio URL. As it turns out, this open graph tag is automatically added to the header by the both the 'Simple Facebook Connect' and 'Tweet, Like, Google+, and Share' plugins. This also explains why my code works on my localhost test site because Facebook could not scan localhost for open graph tags when I liked a photo.

Thanks for the help!

Edit:

After I disabled the plugins and made sure my open graph tags displayed properly in html, I experienced an issue related to Facebook caching the open graph tags for a given URL. This caused the previous incorrect URL redirection to continue occurring. I resolved this by visiting Facebook's Open Graph Debugger and entering the URL. This causes Facebook to refresh the cache of open graph tags for the page.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文