Multiple Facebook opengraph objects on the same page

Question

I have a page where users must initiate actions on multiple objects, but Facebooks design limits you to just one object per page using the required meta property tags.

Has anyone found a solution to this problem?

Answer 1

The Open Graph uses the URL as the object identifier, so its not possible to have several objects on one page, the page is the object.

Instead, you'll need a URL for each object, and that URL's HTML should contain the correct OG markup.

You can put multiple like buttons on one page, and make them point at each of your objects by specifying the 'href' parameter for each like button.

However, if you want the user to end up back at the SAME page when they click on the link to each of these objects, you can do this, but its a bit tricksy...

On your object pages, on your server, look at the incoming request useragent. If the useragent contains the string 'facebookexternalhit' then render the HTML and the OG markup - this is how the Facebook scraper sees your page. If the useragent does not contain this string, perform a 302 redirct to the page you want the user to see.

Result? Many objects, but only one user-visible page. Win.

And this is how you would do it:

<?php

if ($_SERVER["HTTP_USER_AGENT"] != "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)") {
    redirect('http://www.somesite.com', 302);
}
function redirect($url, $type=302) {
    if ($type == 301) header("HTTP/1.1 301 Moved Permanently");
    header("Location: $url");
    die();
}

?>

<html...

Answer 2

https://stackoverflow.com/a/7659770/1354666 This is a great answer, but a few things about it aren't working out well for me, so I've tried an alternative.

Instead of using href's in button tags I'm using Iframes.

1. Make a series of html pages for each of OG objects.
2. In Each of these pages add the necessary facebook header scripts and facebook root elements to call the facebook api.
3. Create form input elements that will call the actions for each of these OG objects. Give each of these elements an id.
4. Include a small script that will determine if you're and Iframe or a page, so you can redirect users back to your home page if they click on the facebook feed.
5. Finally, place and your sized iframe with a style set to no frame on the page and set it to no scroll. Use the ids of the form elements to target which action should be in the iframe view.

I'm still working on refining this for my mobile phones output, but it's working as I it should for most browsers.