动态生成 Facebook Open Graph 元标记
Posted
技术标签:
【中文标题】动态生成 Facebook Open Graph 元标记【英文标题】：Generating Facebook Open Graph meta tags dynamically 【发布时间】：2012-01-15 22:20:47 【问题描述】：正如标题所暗示的，我正在尝试，但我无法使其正常工作。有可能吗？
更新：
最后我在@saccharine 的帮助下成功了。以下代码对我有用：
<?php
$params = array();
if(count($_GET) > 0)
$params = $_GET;
else
$params = $_POST;
// defaults
if($params['type'] == "") $params['type'] = "restaurant";
if($params['locale'] == "") $params['locale'] = "en_US";
if($params['title'] == "") $params['title'] = "default title";
if($params['image'] == "") $params['image'] = "thumb";
if($params['description'] == "") $params['description'] = "default description";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Open Graph meta tags -->
<meta property="fb:app_id" content="MY_APP_ID" />
<meta property="og:site_name" content="meta site name"/>
<meta property="og:url" content="http://mysite.com/index.php?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/>
<meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/>
<meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
<meta property="og:title" content="<?php echo $params['title']; ?>"/>
<meta property="og:image" content="http://mysite.com/img/<?php echo $params['image']; ?>.png"/>
<meta property="og:description" content="<?php echo $params['description']; ?>"/>
</head>
</html>
我现在放入 Facebook 调试器的 url 可以包含任何动态参数，甚至不包含，全部或仅包含一个选择，并且以任何顺序排列，如下所示：http://mysite.com/index.php?type=restaurant&title=luigis 或者这个：http://mysite.com/index.php?locale=de_DE&description=hi&type=bistro
完成后：我现在可以将操作发布到用户的流中：
function postRestaurant()
FB.api('me/MY_APP_NAMESPACE:have_lunch?\
start_time=2000-12-12T04:00:00&\
expires_in=7200&\
restaurant=' + encodeURIComponent(getRedirectURI() + '?type=restaurant' + '&description=arnold' + '&title=stalone'), 'post', function (response)
if (!response || response.error)
console.log('postRestaurant: Error occured => ' + response.error.message);
else
console.log('postRestaurant: Post was successful! Action ID: ' + response.id);
);
像魅力一样工作！ : ]
【问题讨论】：
和你一样，我可以通过使用调试器中的 GET/POST 参数调用我的对象的 URL 来生成动态元标记，但是你知道如何用你的应用程序实现类似的东西吗？到目前为止，当我使用 javascript SDK 尝试发布操作，并在我的对象的 URL 中包含参数时（就像我在调试器中那样）Facebook 似乎删除了这些参数，以便我的对象页面（index.php为你）永远不会收到他们。有什么想法吗？ @bradleygriffith 是的，我已经设法将操作发布到用户的信息流中。我再次用一个关于如何使用 JavaScript SDK 的示例更新了我的问题。 我遇到了同样的问题。你究竟是如何解决这个问题的？您如何解释 facebook 以读取所有参数的完整 URL？ 我总是收到此错误：URL 'mydomain.com/object/?og:type' 类型为'website'的对象 @AryanVenkat 无法处理客户端代码，因为 facebook 抓取工具在解析您的网站之前不会执行任何 JavaScript 代码。 【参考方案1】：首先，我想重申一下，我几乎可以肯定您的问题是由于您传递给调试器的 url 不是动态生成的。 url 标签本质上是一个重定向器。除非它与您正在测试的 url 完全相同（意味着 url 元对象上的元标记与您传入的 url 上的元标记相同），否则您不会得到您正在寻找的结果。
元标记
<meta property="og:url">
需要动态生成。调试器被重定向到您的默认索引页面，而不是动态生成的页面。
例如，我为我正在使用的每个对象分配一个 id，所以我有如下内容
<meta property="og:url" content="http://example.com/index.php?id=<?php echo $_GET['id'] ?>"/>
我将那个确切的 url 传递给调试器，因此调试器到达的最后一页将是那个确切的 url。
还有，在下面
<meta property="og:type" content=""/>
属性是如何动态生成的？您是否记得在您的实际代码中设置如下内容？
<meta property="og:type" content="<?php echo $_GET['type'] ?>"/>
您似乎还把所有东西都塞进了 url，这很危险，可能会引起巨大的头痛，这可能是这里的问题。相反，只推一件事，例如 ?type=bistro 然后从数据库传播必要的数据。
我建议基于 object_id 动态生成大多数 OG 标签。存储每个 object_id 的相关 OG 信息，然后在访问时传播它们。这样，您还可以轻松扩展和编辑更新 OG 时使用的标签。
如果您对 OG 有疑问，请不要犹豫，将它们作为新问题而不是 cmets 发布，因为我保证其他人也有同样的问题。
【讨论】：
@Lego 现在我正在使用我目前正在处理的东西动态生成我的元标记，并且它运行良好。我可以看看你是如何传递 url 属性的吗？例如，在您的代码示例中，您实际上并没有明确包含传入的参数。我已经修改了我的答案以对此进行更多扩展。 @Lego 只要 url 对象不是动态的并且像您现在设置它的方式一样指向您的无参数索引页面，调试器将继续忽略您的所有参数。当您查看您传递给调试器的 url 的来源时，您可以发布元标记吗？ 非常感谢！如果可以的话，我会为你点赞十次！我几乎相信这是不可能的，但你让我再试一次。您对动态网址是正确的，最后它可以工作了！我已经更新了上面的question。 @Lego 很高兴我能帮上忙。您也可以接受我的问题作为答案，给我更多的互联网积分：D。只需点击赞成标志下方的复选框即可。 @saccharine 它几乎对我有用，但是当我通过 Facebook Graph API Explorer 发帖时，我总是在元属性中获得默认值。会是什么？【参考方案2】：我相当肯定 Facebook 不再使用参数抓取 任何 url。它总是“重定向”到 url 的剥离版本。
在 OP 示例中：
http://example.com/index.php?type=restaurant&title=luigis
变成
http://example.com/index.php
不管你做什么。我见过的最接近解释的是this：
A URL with no session id or extraneous parameters. All shares on Facebook will use this as the identifying URL for this article.
【讨论】：
【参考方案3】：是的，就像一个魅力，但需要为我重新编码。我不得不像这样创建一个新页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Open Graph meta tags -->
<meta property="og:title" content="<?= urldecode($_GET['title']) ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?= "http://www.calsots.com".$_SERVER['REQUEST_URI']; ?>" />
<meta property="og:image" content="<?= $_GET['image'] ?>" />
<meta property="og:site_name" content="Calsots.com" />
<meta property="fb:admins" content="MY_APP_ID" />
<meta property="og:description" content="<?= urldecode($_GET['description']) ?>" />
</head>
</html>
【讨论】：
【参考方案4】：当您单击对象类型中的“获取代码”链接时，您是否尝试粘贴它提供给您的代码？ 我会尝试粘贴到您的网站，然后如果可行，请复制 html 输出。 试试不带 DOCTYPE 标签。 这是我得到的一个示例，我没有在上面看到这些标签：fb:app_id，不确定它是否有所作为。 另外，og:url 不应该在最后包含变量吗？
http://ogp.me/ns# fb: http://ogp.me/ns/fb# 网站: http://ogp.me/ns/website#">【讨论】：
【参考方案5】：对于 Joomla Opengraph Meta 动态：
<meta property="og:title" content="<?=
$title = $this->getTitle();
?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?= "http://YORUWEBSITE.com".$_SERVER['REQUEST_URI']; ?>" />
<meta property="og:image" content="http://YOURWEBSITE.com/images/stories/BIGIMAGE.jpg" />
<meta property="og:site_name" content="YOURWEBSITE.com" />
<meta property="fb:app_id" content="YOURFACEBOOKAPPIDNUMBER" />
<meta property="og:description" content="<?= $title = $this->getDescription(); ?>" />
【讨论】：
您也可以将同样的方法应用于 SMARTY。以上是关于动态生成 Facebook Open Graph 元标记的主要内容，如果未能解决你的问题，请参考以下文章