Open Graph Protocol - how to make it work with multiple stories on a page?

Question

The Open Graph Protocol is a new methodology for storing metadata to make it easier for third party sites (think the Facebook LIKE button) to identify relevant content on your page.

It looks like this:

<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

The question is, if you have multiple LIKE buttons on a page, each for a different article, how does one differentiate the Open Graph meta tags that belong to the article, not the page itself. Since the tags go in the HEAD is seems you only get one set per page.

Can Open Graph be "namespaced" or associated with content within the page, rather than the page itself?

score 5 · Accepted Answer · answered Dec 14 '10 at 21:45

5

As far as I know, you're stuck - but if you figure out a way, let me know!

I worked on a project that needed to have multiple Open Graph tags on a page - in the end, we ended up trimming down the number of items we needed OG for, so that we'd only have one story on a page.

answered Dec 14 '10 at 21:45

girasquid

15,121
2
48
58

Sadly, I think you're right. At least I can stop pounding my head against the wall. – Diodeus - James MacFarlane Dec 15 '10 at 21:14

score 1 · Answer 2 · answered Dec 18 '10 at 14:19

1

All I can think of is using <iframe>. Each article is gonna have its own page, suitable to be placed inside another page. And then you can display all those articles inside the master page.

answered Dec 18 '10 at 14:19

Pankaj

3,592
2
26
22

I was thinking of that but it's too far into the project to change that aspect of it. – Diodeus - James MacFarlane Dec 20 '10 at 15:39

score 1 · Answer 3 · answered Dec 21 '10 at 16:02

1

If each like button is associated with an item on the same page, then header of each item could link through to a page for just that item. That page could carry all the meta tags for the item and like button would use the url of that page. I did this here http://cinema-shorts.org/past/ (P.S. this is the first proper website Ive built so if its broken please forgive me)

answered Dec 21 '10 at 16:02

user550164

11
1

Unfortunately the addition of FB to this project comes late in the game and the client didn't think it through and doesn't have the budget for landing pages for each article. What you say makes sense though. – Diodeus - James MacFarlane Dec 21 '10 at 18:43

Simon Cross · Answer 4 · 2012-12-06T11:20:28.680

Each object is represented by a unique URL so, no, multiple objects cannot exist on a single page.

You can have multiple like buttons on one page, but each must be set to point at a different URL by using the href attribute.

You can make each of your object urls do a JavaScript redirect (window.location.href = new_url) to make users who arrive at each of your object pages be redirected to a single user-visible page.

Open Graph Protocol - how to make it work with multiple stories on a page?

4 Answers4

Linked