Here's the scenario..
I have a web app that's used to display content dynamically. The page containing the app is static, stored in an S3 bucket.
The app doesn't have any data in it, just code and a few DOM objects. It's a liveblog reader. Think of it as a container that can be used to display lots of different stuff.
When it starts up, it loads the data from a file, displays it.
The URL parameter contains the ID of an item within the file it's displaying. It moves the cursor there. Here's an example, a post about cheese.
The user then posts the link on Facebook, the one from #4 above. The user thinks they're posting a link to their story, not to my app. They barely realize my app exists. It's all about what they've written.
When Facebook displays the post, I readers to see a description of the item that's being pointed to, what readers will see when they click the link.
So what I need to do is change the og:url, og:title, og:description, and og:image elements in the <head> when the app starts up. And (this is what doesn't work) have Facebook recognize the changes.
I want links to items to be passed around the net just like all links are. I could of course provide a programmatic way to post a link to Facebook, and that could have whatever info I want it to, but -- I love the magical scraping FB does. I just want it to get it right.
Here's a demo app that illustrates.
And a Facebook post about the feature.
And I'm accumulating notes here on my liveblog. This shit is useful!