使用 jQuery click 更改 OG:IMAGE 的值答案

【问题标题】：Changing the value of OG:IMAGE with jQuery click使用 jQuery click 更改 OG:IMAGE 的值
【发布时间】：2012-09-06 11:00:35
【问题描述】：

我只是用一个 HTML 页面构建了一个图片组合，其中所有图片都是动态加载的。到目前为止，一切都很好，除了 facebook META OG:IMAGE。

由于页面只加载一次，我可以分配一次 OG:IMAGE URL... 但我真的希望每张照片都有自己的 OG:IMAGE，因为这是一个相册。

图片通过点击 --li class="open-pic"-- 标签加载。每次单击 --li class="open-pic"-- 标签时，我都想更改 OG:IMAGE 值。

有可能吗？我发现了这样的东西：

$('meta[name=og\\:image]').attr('content', newImageUrl);

但是，我不知道如何将此链接到 li.open-pic onclick 事件。谢谢！

【问题讨论】：

标签： jquery image facebook-opengraph

【解决方案1】：

$('li.open-pic').click(function(){
 $('meta[name=og\\:image]').attr('content', newImageUrl);
});

【讨论】：

哎呀...太简单了。我为自己感到羞耻。非常感谢。
不需要感谢 :).. 如果这有帮助，请不要忘记标记为答案或投票。这也可能对其他人有所帮助
我相信这不起作用......是的，它会改变元标记的值......但它没用，因为 facebook 仍然会显示在元标记中注册的原始图像...... .见CBroe的回答...
我认为你需要使用 $('meta[property="og:image"]') insted of $('meta[name=og\\:image]')

【解决方案2】：

由于页面只加载一次，我可以分配一次 OG:IMAGE URL...但我真的希望每张图片都有自己的 OG:IMAGE，因为这是一个相册。

在客户端更改 OG 元标签并没有实际用处——因为 Facebook 会通过它的抓取工具读取这些标签，这意味着他们将对您的 URL 进行 HTTP 请求并查看 HTML 代码中的内容；并且爬虫不执行任何 JavaScript。

解决方案：为每张照片提供一个单独的 URL，并附上它自己的元信息 - 并让您的点赞按钮/分享功能/任何 FB 功能指向每张照片的该 URL。

（您如何处理 客户端 无关紧要 - 您仍然可以在一页中显示所有照片，通过 AJAX 加载新内容，无论您喜欢什么 - 但您会您的照片需要单独的 URL 才能被识别为单独的 Open Graph 对象。）

【讨论】：

非常感谢，CBroe！我真的很感谢你的澄清。我在 wordpress 环境中工作，毕竟，我将为每张图片创建一个单独的页面 - 无法逃脱。

【解决方案3】：

这是冒号。尝试像这样使用单引号和双引号：

var imgSrc = $(this).find('img').attr('src'); // image stored as variable
$('meta[property="og:image"]').attr('content', imgSrc); // assigns meta property

【讨论】：