在 JQuery Galleriffic 页面上实现 Facebook Like 按钮答案

【问题标题】：Implement Facebook Like Button on JQuery Galleriffic page在 JQuery Galleriffic 页面上实现 Facebook Like 按钮
【发布时间】：2011-12-07 02:55:41
【问题描述】：

我在我们的网站上使用 JQuery Gallerific 相册。 http://www.twospy.com/galleriffic/example-5.html

我想在这个页面上实现 Facebook Like 按钮和 Open Graph 协议。

facebook 喜欢按钮

<fb:like href="http://www.twospy.com/galleriffic/example-5.html" layout="button_count"></fb:like>

开放图协议

<meta property="og:url" content="http://www.twospy.com/galleriffic/example-5.html"/>
<meta property="og:image" content="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg"/>

我想在用户点击下一个按钮和上一个按钮时将 og:url 和 og:image 链接更改为相应的页面链接。

假设用户点击第 5 张图片，那么开放图协议链接应更改为

<meta property="og:url" content="http://www.twospy.com/galleriffic/example-5.html#5"/>
<meta property="og:image" content="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" />

和like按钮需要改为

<fb:like href="http://www.twospy.com/galleriffic/example-5.html#5" layout="button_count"></fb:like>

请让我知道这是否可能。解决这个问题将挽救我的生命。请帮我写代码。

谢谢。

【问题讨论】：

您使用的是服务器端语言吗？如果有，是哪一个？
您好 Karim79，该页面是 html 页面。我不打算为此页面使用任何服务器端语言。是否可以使用 jquery 和 javascript 来解决这个问题。

标签： jquery facebook

【解决方案1】：

我遇到了同样的问题。问题是社交网络“插件”（Facebook、Twitter、Google+ 等）都注入了 iframe，它们在其中工作。因此，更改页面的元信息发生得太晚了，因为它已被解析以构建 iframe，并且在此之后都被忽略，并且 iframe 内的任何 JS 都无法访问。我什至尝试使用 iframe 删除 div 并在更改元信息后重新添加它，但第二次注入永远不会像第一次那样整洁。

我使用的解决方案是一个老式的“like”或“tweet”或“plus-one”按钮链接，我将在 Galleriffic onSlideChange() 方法中更新这些链接。在对 URL 和标题进行编码后，更改 a 的 href（假设它在下面的示例中具有“facebooksharer”的 ID）：

$("facebooksharer").attr("href","http://www.facebook.com/sharer/sharer.php?u="+newUrl+"&t="+newTitle);

当然，您会失去在线计数和“朋友也喜欢”，但至少访问者可以喜欢图库中的确切图片。

【讨论】：