logo标签列表

动态生成 Facebook Open Graph 元标签

phpfacebookfacebook-opengraphmeta-tags
52

如标题所示，我正在尝试动态生成Facebook Open Graph元标签，但我无法使其正常工作。这是否可能？

更新：

最终在@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>

我现在正在将URL放入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);
        }
    });
}

运作得很好！：]

2
和你一样，我能够通过调用带有GET/POST参数的对象URL来生成动态元标记，但是你是否已经想出如何在你的应用程序中实现类似的功能了呢？到目前为止，当我使用Javascript SDK尝试发布一个操作，并在我的对象URL中包含参数（就像在调试器中一样），Facebook似乎会剥离这些参数，以至于我的对象页面（对于你来说是index.php）从未收到它们。有什么想法吗？ - bradleygriffith
2
@bradleygriffith 是的，我已经成功将动态发布到用户的流中。我再次更新了我的问题，并提供了一个使用JavaScript SDK的示例。 - borisdiakur
@Lego 对我来说几乎可以工作，但是当我通过Facebook Graph API Explorer发布帖子时，元属性中总是得到默认值。这可能是什么原因？ - deko
@Lego，谢谢，我几乎每小时都在使用/debug。我的头部有go标签。目前的情况是，所有动态生成的页面（如/blog/post-123456）都继承了/blog的og标签。例如，单个帖子的og:title是“blog”，更重要的是，规范的og:url是/blog。我将与构建它的人员支持一起解决这个问题，但如果您能识别出我需要更改的任何有用的部分，那么这是我找到的最接近的选项。 - jordanconductor
1
@AryanVenkat 这是不可能通过客户端代码实现的，因为Facebook抓取器在解析您的网站之前不会执行任何JavaScript代码。 - borisdiakur
显示剩余6条评论
5个回答
31
首先，我想重申一下，我几乎可以确定你的问题是由于调试器中传递的URL没有动态生成。URL标签本质上充当重定向器。除非它与你要测试的URL完全相同（即URL meta对象上的元标记与你传递的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时遇到问题，不要犹豫，应该发布新的问题而不是评论，因为我保证其他人也有同样的问题。
@Lego，目前我正在使用动态生成的元标签来完成我正在处理的某些工作，并且一切都很顺利。我能看到你是如何传递url属性的吗？例如，在你的代码示例中，你实际上没有明确包含传入的参数。我已经修改了我的答案，以更详细地展开这个问题。 - saccharine
@Lego 很高兴我能帮到你。你也可以接受我的问题作为答案，这样我就能获得更多的网络积分 :D。只需点击赞同标志下方的复选框即可。 - saccharine
@saccharine 对我来说它几乎可以工作，但当我通过Facebook Graph API Explorer发布帖子时，元属性中总是得到默认值。这可能是什么原因？ - deko
@deko FB最近更新了他们的东西，所以我甚至不确定我的东西是否仍然适用。可能有很多原因。如果没有更多信息，就无法确定。FB调试器对您的页面有何说法？听起来您没有生成正确的动态标签。 - saccharine
@saccharine 谢谢你的回答！我已经在这里解决了我的问题：http://stackoverflow.com/questions/15378534/facebook-post-with-parameters#comment21736579_15378534 - deko
显示剩余2条评论
4
2

是的，它非常好用，但对我来说需要进行一些重新编码。我不得不创建一个类似于这样的新页面：

<!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>
1
当您在对象类型中单击“获取代码”链接时，是否尝试将其提供的代码粘贴到您的网站上？ 我建议您先尝试将其粘贴到您的网站上，如果可以正常工作，则再复制HTML输出。 请尝试不使用DOCTYPE标记。 以下是我得到的示例，我没有看到这些标记：fb:app_id，不确定是否有影响。 此外，og:url是否应该包括末尾的变量？ http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
0

针对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上。 - klewis
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接