0

如何将 Open Graph 属性添加到 iframe？

例如，这是 prettyPhoto（用于显示全屏图像的类似灯箱的 jquery 插件）默认生成的 Facebook“点赞”按钮：

<iframe src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href=http%3A%2F%2Fexample.com%2F%23prettyPhoto%2F2%2F&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowtransparency="true"></iframe>

这段代码有以下问题：

  1. 在实践中，它喜欢页面http://example.com而不是动态照片页面（即http://example.com/#prettyPhoto/2/）
  2. 它显示来自页面http://example.com的标题和描述，而不是动态照片页面

http://developers.facebook.com/tools/debug工具，当我将我的动态图像页面地址传递给它时（http://example.com/#prettyPhoto/2/）告诉我：

Inferred Property:  The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property:  The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property:  The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.

设置这些属性是否有助于获得正确的图像 url 和描述？如何将这些属性插入到“喜欢”按钮 iframe 中？例如，假设 og:title 是“我的超级形象”。上面提到的 iframe 代码在这个属性集下应该是什么样子，放在哪里？

4

1 回答 1

1

如何将 Open Graph 属性添加到 iframe？

当然，一点也不。

这些属性被放入提供 HTML 文档的 URL 的 HTML 代码中；“iframe”与它无关。

这段代码有以下问题：

在实践中，它喜欢页面http://example.com而不是动态照片页面（即http://example.com/#prettyPhoto/2/）

它显示来自页面http://example.com的标题和描述，而不是动态照片页面

这些不是类似按钮代码的问题，而是http://example.com.

URL 的散列部分仅具有客户端含义——它甚至根本不会传输到 Web 服务器。http://example.com/#prettyPhoto/2/从 Web 服务器（服务于 example.com 的服务器）的角度来看，完全相同的 URL 也是http://example.com/ 如此。因此，它将为对这两个 URL 的请求提供相同的数据，这完全不是点赞按钮或 Facebook 的错。

这很可能是菜鸟的错，他们使用花哨的 AJAX和东西在 example.com 上设置了该页面，认为这很酷等等，但同时缺乏有关所涉及技术的基本知识。

设置这些属性是否有助于获得正确的图像 url 和描述？

不; 直到使网站的个别内容在个别 URL 下可用的问题没有首先解决。

于 2012-08-20T08:59:11.350 回答