动态生成 Facebook Open Graph 元标记 [英] Generating Facebook Open Graph meta tags dynamically

查看:30
本文介绍了动态生成 Facebook Open Graph 元标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

正如标题所暗示的,我正在尝试动态生成 Facebook Open Graph 元标记,但我无法让它工作.甚至有可能吗?

更新:

最后我在@saccharine 的帮助下得到了它.以下代码对我有用:

 0){$params = $_GET;} 别的 {$params = $_POST;}//默认值if($params['type'] == "") $params['type'] = "restaurant";if($params['locale'] == "") $params['locale'] = "en_US";if($params['title'] == "") $params['title'] = "默认标题";if($params['image'] == "") $params['image'] = "thumb";if($params['description'] == "") $params['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"/><!-- 开放图谱元标记--><meta property="fb:app_id" content="MY_APP_ID"/><meta property="og:site_name" content="meta 站点名称"/><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']; ?>"/>

我现在放入 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?开始时间=2000-12-12T04:00:00&expires_in=7200&
estaurant=' + encodeURIComponent(getRedirectURI() + '?type=restaurant' + '&description=arnold' + '&title=stalone'), 'post', function (response) {if (!response || response.error) {console.log('postRestaurant: 发生错误 =>' + response.error.message);} 别的 {console.log('postRestaurant: 发布成功!操作 ID:' + response.id);}});}

就像一个魅力!:]

解决方案

首先,我想重申,我几乎肯定您的问题是由于您传递给调试器的 url 不是动态生成的.url 标签本质上充当重定向器.除非它与您正在测试的 url 完全相同(意味着 url 元对象上的元标记与您传入的 url 上的元标记相同),否则您将不会得到您正在寻找的结果.

元标记

需要动态生成.调试器被重定向到您的默认索引页面,而不是动态生成的页面.

例如,我为我正在使用的每个对象分配一个 id,所以我有如下内容

<meta property="og:url" content="http://example.com/index.php?id=<?php echo $_GET['id'] ?>"/>

我将那个确切的 url 传递给调试器,因此调试器登陆的最终页面将是那个确切的 url.

另外,在下面

属性是如何动态生成的?你记得在你的实际代码中设置如下内容吗?

<meta property="og:type" content="<?php echo $_GET['type'] ?>"/>

您似乎还把所有内容都塞到了 url 中,这很危险,可能会引起巨大的头痛,这可能是这里的问题.相反,只推送一件事,例如 ?type=bistro,然后从数据库传播必要的数据.

我建议根据 object_id 动态生成大多数 OG 标签.为每个 object_id 存储相关的 OG 信息,然后在访问时传播它们.这样,您还可以轻松地扩展和编辑更新 OG 时使用的标签.

如果您在使用 OG 时遇到问题,请毫不犹豫地将它们作为新问题而不是评论发布,因为我保证其他人也有同样的问题.

As the title implies I'm trying to generate Facebook Open Graph meta tags dynamically, but I can't get it working. Is it even possible?

UPDATE:

Finally I got it working with the help of @saccharine. The following code is working for me:

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

The url I'm putting into the Facebook debugger now can include any of the dynamic parameters or even none, all or only a selection and in any order like so:
http://mysite.com/index.php?type=restaurant&title=luigis
or this:
http://mysite.com/index.php?locale=de_DE&description=hi&type=bistro

Having that accomplished: I can now publish actions to the user's stream:

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);
        }
    });
}

Works like a charm! : ]

解决方案

First, I want to reiterate that I am almost positive that your problem is due to the fact that the url you are passing into the debugger is not dynamically generated. The url tag essentially acts as a redirector. Unless it's the exact same (meaning the meta tags on the url meta object is the same as those on the url you are passing in) as the url you are testing, you won't get the results you're looking for.

The meta tag

<meta property="og:url"> 

needs to be dynamically generated. The debugger is being redirected to your default index page instead of the dynamically generated page.

For example, I assign an id to every object I'm using, and so I have something like the following

<meta property="og:url" content="http://example.com/index.php?id=<?php echo $_GET['id'] ?>"/> 

I pass in that exact url into the debugger, and thus the final page the debugger lands on will be that exact url.

Also, in the following

<meta property="og:type" content=""/>

how is the property being dynamically generated? Did you remember to set in your actual code something like the following?

<meta property="og:type" content="<?php echo $_GET['type'] ?>"/>

You also appear to be shoving everything into the url, which is dangerous and can cause huge headaches, which might be the issue here. Instead, shove only one thing , eg ?type=bistro and then propagate the necessary data from the DB.

I would recommend dynamically generating most OG tags based on an object_id. Store the relevant OG info for every object_id, and then propagate them when accessed. This way, you can also easily expand and edit the tags you use when OG is updated.

If you have problems with OG you shouldn't hesitate to post them as new questions instead of comments as I guarantee other people also have the same problem.

这篇关于动态生成 Facebook Open Graph 元标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆