CODEWITHSUNDEEP
htmlajaxfacebookfacebook-opengraph
fernandohur
fernandohur

Reputation: 7134

Facebook meta tags not working for AJAX website

I have a 100% ajax webapp and I have the following problem. My site generates dynamic content, and I have a like button for each ajax "page" generated dynamically. To be clear, he links are "...#subpage", and a user can put like on "...#subpage". However, I would like a preview of that content to be available.

I have put the apropriate meta tags (og:image, og:url, etc.) However, in the facebook link debugger (http://developers.facebook.com/tools/debug) It always says that the tags are in their initial state (as in just the plain html page, no ajax).

So question is, how to make the meta tags work dyamically for facebook links

Upvotes: 2

Views: 1457

Answers (1)

chris5marsh
chris5marsh

Reputation: 468

It's best to actually give the pages their own URL. You can use server side methods like .htaccess to redirect a URL like http://yourdomain.com/birds/bees to http://yourdomain.com?page=birds&subpage=bees. That way your content becomes searchable, accessible and bookmarkable.

You can use the HTML5 history API (http://html5demos.com/history) to update the address bar with the current URL without reloading the page. You can also attach an event to the back button, which makes your site even more user-friendly.

When you update the address bar, you can use Javascript to update the meta tags too, so the Facebook like button will like the 'correct' page.

The HTML5 History API works in all modern browsers, Internet Explorer is the only unsupported browser.

Upvotes: 1

Related Questions