Viewed   119 times

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

 Answers

5

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.

Wednesday, October 19, 2022
2

Don't forget that they also want you to declare some schemas to the html tag - specifically the open graph one via xmlns:og="http://opengraphprotocol.org/schema/. OG is based on RDFa which adds the additional attributes to the meta tags.

Once you're done with that, be sure to add your fb:like - <fb:like href="http://developers.facebook.com/" width="450" height="80"/> - the example is pretty straightforward. Don't forget to add xmlns:fb="http://www.facebook.com/2008/fbml" otherwise you will be sad

Found this answer on SO regarding validation of the meta tag. Doing what that answer describes should give let you pass it through any w3c validator.

Monday, September 19, 2022
 
crixo
 
2

Check out this link: http://developers.facebook.com/tools/debug

Input your url or og tag here to get if there is something wrong with your markup.

Wednesday, December 14, 2022
3

I don't know about other major consumers of the OGP so this might not be a problem for your case, but if you plan to implement it for Facebook,

stick to meta tags.

Doing a quick live test with the open graph debugger and fiddling with the og: tags, it appears that facebook only recognizes them if they are placed in <meta>s.

Try it

If you create an empty HTML file with a single og:url tag in its <head> section, upload it to any URL and run it through the debugger above, both

<link rel="og:url" href="http://www.imdb.com/title/tt0117500/" />

and

<link property="og:url" content="http://www.imdb.com/title/tt0117500/" />

edit or, as suggested in the comments

<link property="og:url" href="http://www.imdb.com/title/tt0117500/" />

will fail to parse and return the original URL, while

<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> 

parses correctly and returns the contents of The Rock on IMDb instead. At the end of the day semantics are nice, but working code is even better.

Saturday, September 24, 2022
3

There isn't a hard limit on the data you can put there, but in various rendering places Facebook will limit it. The limit in news feed is different from the limit in Ticker which is different than the limit on timeline.

Just put the correct content in there and we'll truncate it when rendering.

Friday, November 11, 2022
 
Only authorized users can answer the search term. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :