Facebook like or share with dynamic document title

Question

I found this problem all over the net but no answer yet, so maybe here someone solved it ...? I built a page relying heavily on jquery.address. It's got one index page and the rest loads dynamically via Ajax following Google's /#!/ scheme for crawlable pages. Now I want to add Facebooks Like or share button but I can't get it to grab the actual page title or url.

Whatever I do, it always falls back to title and url of the index page. It tried:

• (obviously) changing title an openGraph meta on load of the new parts.
• "linking" the crawler page (?_escaped_fragmet_=xyx) but specifying the #! page in meta
• "sharing" with a given title and url.

I never get anything but a link to the index page or a blank "share" to the right url with title and thumbnail ignored.

Has anyone got a similar setup working?

Thanks for any hints, thomas

Resign

Did you find a solution yet? since i still couldn't find one either. Facebook does use #! itself but doesn't seem to support it for their crawler right? – Clemmer

I actually found out that facebook is using #! two days ago. Now it works! If you build your site so that site.de/?_escaped_fragment=something is identical to site.de/#!/something all you have to do is "share" the #! url and it'll display the info from the escaped fragment page. Use this URL to check: developers.facebook.com/tools/debug – Resign

You also might want to check github.com/balupton/history.js/wiki/Intelligent-State-Handling for a much cleaner solution. – Resign

cool. why don't you write it down as an answer to your question? people will probably find that more than usefull! – Clemmer

Answer 1

Facebook is actually using #! now and it works! If you build your site so that http://site.de/?_escaped_fragment=something is identical to http://site.de/#!/something all you have to do is "share" the #! url and it'll display the info from the escaped fragment page.
Use this URL to check: http://developers.facebook.com/tools/debug

But: A much cleaner solution to the problem can be found here: http://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Resign

Answer 2

My guess would be that Facebook's crawler doesn't run Javascript and will always display whatever's actually in the page it gets from the server.

Goar

Answer 3

Facebook share has a BRUTAL cache, last time I checked it was impossible to change the title / description data once it was scraped :(

Superphysical

Didn't know about this Lint tool or that it refreshes cache, thanks :) – Superphysical

Answer 4

The issue I had was the og:url and the actual url of the page did not match. I also read a number of comments about the og data being just after the title element, but I don't think that solved anything.

With regard to issues of caching, it is true that Facebook's caching is "brutal", but it does not cache anything for the lint tool: http://developers.facebook.com/tools/debug.

I use no-hash-bang urls when sharing links. I process the hard links and redirect them to a hash bang client side using javascript. That way if a crawler goes to the hard linked page it will display the information just as it would if javascript were enabled.

Compare:

http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Flikeapage.com%2F%23!%2FChristmas%2Fvs%2FBacon

and

http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Flikeapage.com%2FChristmas%2Fvs%2FBacon

Hope this helps.

Lakeishalakeland