Ajax page fetch design requires physical address

Question

I am creating a web app in php. i am loading content through a ajax based request. when i click on a hyperlink, the corresponding page gets fetched through ajax and the content is replaced by the fetched page.

now the issue is, i need a physical href so that i can implement facebook like functionality and also maintain the browser history property. i cannot do a old school POSTBACK to the php page as I am doing a transition animation in which the current page slides away and the new page slides in.

Is there a way I can keep the animation and still have a valid physical href and history.

the design of the application is such:

1. the app grabs an rss feed.
   
2. it creates the DOM for those rss feeds.
   
3. upon clicking on any headline, the page animates and takes to the full story of the rss feed.
   
4. i need to create "like" button on the full story page. but i dont have a valid url.
   

Answer 1

While Alexander's answer works great on the client side, Facebook's linter tool does not run javascript, so it will get the old content. Neither of the two links provide a solution to this.

What amit needs to implement is server-side parsing of the url. See http://www.php.net/manual/en/function.parse-url.php. Fragment is what the server sees as the hash tag value. In your php code, render the correct og: tags for based upon the fragment.

Answer 2

Firstly, if you need a URL for facebook then think up a structure that gives you one, such that your server-side code will load the correct page when given that URL. This could be something like http://yourdomain.com/page.php?feed=<feedname>&link=<linknumber>, which would allow you to check the parameters using the PHP $_GET array. If you don't have the parameters then load the index page; if you do then load the relevant article.

Secondly, use something like history.js to give you cross-browser support for the HTML5 pushState() functionality so that you can set the page URL when you do the AJAX call, without requiring the browser to do a full reload.