Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Generating Facebook Open Graph meta tags dynamically

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

like image 207
borisdiakur Avatar asked Dec 08 '11 13:12

borisdiakur


People also ask

How do you add meta tags to Open Graph?

Just go to Page Settings > Social Image > Upload. If you need to add other OG tags and customize the default settings, go to Page Settings > Advanced > Page Header Code Injection. Read the following section on adding the tags manually and copy-paste the code there.

How do you add a tag to an Open Graph on Facebook?

Click on 'Social'. Click on the 'Facebook' tab. Toggle the 'Add Open Graph meta data' switch. To enable the feature, toggle the switch to 'On'.

How do I make an image OG dynamic?

You can change og:image with following code: $('meta[name=og\\:image]'). attr('content', newVideoUrl); But, if you want to change the image permanently (so Facebook can scrape your data and the image will be available for sharing), you need to change this value on the server.

How do I get a metatag on Facebook?

Go to your business account settings, in the "Brand Security" section, click on Domains. Click Add, enter a domain, and click Add Domain. Click on the added domain and go to the “Meta Confirmation” tab. Select the option to validate your domain using a meta tag.


2 Answers

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.

like image 137
saccharine Avatar answered Oct 19 '22 15:10

saccharine


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. 
like image 31
gerbz Avatar answered Oct 19 '22 15:10

gerbz