在JQuery Galleriffic上实现Facebook Like按钮

Question

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

我想在这个页面上实现Facebook的喜欢按钮和开放图形协议。

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链接更改为适当的页面链接。

假设用户点击了第五张图片，那么打开的图形协议链接应该会变成

<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>

请告诉我有没有可能。这个问题的解决方案将挽救我的生命。请帮我弄一下代码。

谢谢。

Answer 1

我也遇到过同样的问题。问题是，社交网络的“插件”(Facebook、Twitter、Google+等)都注入了iframe，它们在iframe中工作。因此，更改页面的元信息为时已晚，因为它已经被解析以构建iframe，并且在那之后都被忽略，并且对于iframe中的任何JS都是不可访问的。我甚至尝试删除带有iframe的div，并在更改元信息后重新添加它，但第二次注入永远不会像第一次那样灵巧。

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

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

当然，您失去了行内计数和“朋友也喜欢”，但至少访问者可以喜欢画廊中的确切图像。