当前位置： 文江博客话题详情

动态生成 Facebook Open Graph 元标签

发布于 2024-12-20 03:06:07 字数 3176 浏览 4 评论 0原文

正如标题所暗示的，我正在尝试动态生成 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>

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

就像魅力一样！ ：]

原文

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! : ]

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

倾城花音 2024-12-27 03:06:07

首先，我想重申，我几乎肯定您的问题是由于您传递到调试器的 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'] ?>"/>

您似乎还把所有内容都塞进了网址中，这很危险并且可能会引起巨大的麻烦，这可能就是这里的问题。相反，只推送一件事，例如 ?type=bistro，然后从数据库传播必要的数据。

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

如果您在 OG 方面遇到问题，您应该毫不犹豫地将它们作为新问题而不是评论发布，因为我保证其他人也有同样的问题。

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.

回复 原文
眼泪也成诗 2024-12-27 03:06:07

我相当确定 Facebook 不再抓取任何带有参数的网址。它总是“重定向”到 URL 的精简版本。

在 OP 示例中：

http://example.com/index.php?type=restaurant& ;title=luigis

变成

http://example.com/index.php

无论什么你做。我见过的最接近解释的是这个：

A URL with no session id or extraneous parameters. All shares on Facebook will use this as the identifying URL for this article.

I'm fairly certain Facebook no longer crawls any urls with parameters. It always "redirects" to a stripped version of the url.

In OPs example:

http://example.com/index.php?type=restaurant&title=luigis

becomes

http://example.com/index.php

regardless of what you do. Closest thing I've seen to an explanation is this:

A URL with no session id or extraneous parameters. All shares on Facebook will use this as the identifying URL for this article.
回复 原文
走野 2024-12-27 03:06:07

是的，就像一个魅力，但需要对我进行一些重新编码。我必须创建一个像这样的新页面：

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

Yes, works like a charm, but needs some recoding for me. I have had to create a new page like this:

<!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>
回复 原文
她如夕阳 2024-12-27 03:06:07

当您单击对象类型中的“获取代码”链接时，您是否尝试粘贴它为您提供的代码？

我会尝试粘贴到您的网站，然后如果有效，请复制 html 输出。

尝试不使用 DOCTYPE 标签。

这是我得到的示例，我没有看到上面的这些标签：fb:app_id，不确定它是否有区别。

另外，og:url 不应该在末尾包含变量吗？

http://ogp.me/ns# fb: http://ogp.me/ns/fb# 网站：http://ogp.me/ns/website#">


;

When you click the Get Code link in your object types, did you try pasting the code it gave you?

I would try pasting to your web, and then if it works, replicate the html output.

Try it without the DOCTYPE tag.

Heres a sample of what I got, and I dont see these tags above: fb:app_id, not sure if it makes a difference.

Also, shouldnt the og:url also include the variables at the end?

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="fb:app_id" content="1234567888">
<meta property="og:url" content="http://mysite.com/index.php?type=MY_APP_NAMESPACE%3Abistro">

回复 原文
眉目亦如画i 2024-12-27 03:06:07

对于 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(); ?>" />

For Joomla Opengraph Meta dynamic:

<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(); ?>" />
回复 原文
~没有更多了~

关于作者

一人独醉

暂无简介

文章
评论
567 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文