How to add Open Graph properties to an iframe?

For example, this is a Facebook "Like" button generated by default by prettyPhoto (lightbox-like jquery plugin for displaying full-screen images):

<iframe src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href=http%3A%2F%2Fexample.com%2F%23prettyPhoto%2F2%2F&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowtransparency="true"></iframe>

This code has the following problems:

in practice, it Likes the page http://example.com instead of the dynamic photo page (which is http://example.com/#prettyPhoto/2/)
It shows title and description from page http://example.com instead of the dynamic photo page

The http://developers.facebook.com/tools/debug tool, when I pass my dynamic image page address to it (http://example.com/#prettyPhoto/2/) tells me that:

Inferred Property:  The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property:  The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property:  The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.

Will setting those properties help to have the correct url and description for the image? How to insert those properties into the "Like" button iframe? For example, let's assume that the og:title is "My super image". How should the mentioned above iframe code look like with this property set, where to put it?

Solution

How to add Open Graph properties to an iframe?

Not at all, of course.

Those properties are put into the HTML code of URLs delivering HTML documents; the “iframe” has nothing to do with it whatsoever.

This code has the following problems:

in practice, it Likes the page http://example.com instead of the dynamic photo page (which is http://example.com/#prettyPhoto/2/)

It shows title and description from page http://example.com instead of the dynamic photo page

Those are not problems of the like button code, but of the site at http://example.com.

The hash part of an URL has only client-side meaning – it does not even get transferred to the web server at all. So http://example.com/#prettyPhoto/2/ and http://example.com/ are the exact same URL, from the web server’s view (the server serving example.com). So it will deliver the same data for requests to “both” of those URLs, and that is totally not the like button’s or for that matter Facebook’s fault.

It is most likely the fault of the noob who set up that page on example.com using fancy AJAX an’ stuff, thinking that’s cool and whatnot, but lacking basic knowledge about the techniques involved at the same time.

Will setting those properties help to have the correct url and description for the image?

No; not until the matter of making the individual contents of the site available under individual URLs is not resolved first.