Ajax page design requires a physical address

Question

I am creating a web application in php. I load content through ajax based request. when I click on the hyperlink, the corresponding page is retrieved via ajax and the content is replaced by the selected page.

Now the problem is that I need a physical href so that I can implement facebook functions and also support the browser history property. I can’t do the old school POSTBACK on a php page because I am doing a transitional animation in which the current page bounces and the new page is a slide.

Is there a way to save the animation and still have a valid physical href and history.

application design is as follows:

• application captures rss feed.
  
• it creates a DOM for these rss feeds.
  
• when you click on any title, the page enlivens and completes the history of the RSS feed.
  
• I need to create a “like” button on the full story page. but i dont have a valid url.
  

Answer 1

First, if you need a URL for facebook, then come up with a structure that gives you such that your server code loads the correct page when you set that URL. It could be something like http://yourdomain.com/page.php?feed=<feedname>&link=<linknumber> , which allows you to check the parameters using the PHP $_GET array. If you do not have parameters, load the index page; if you do, download the corresponding article.

Secondly, use something like history.js to provide you with cross-browser support for the HTML5 pushState() function, so that you can set the page URL when you make an AJAX call without requiring the browser to restart completely.

Answer 2

While Alexander's answer works fine on the client side, the Facebook linter tool does not run javascript, so it will get the old content. None of the two links solve this problem.

What you need to implement is server-side parsing. See http://www.php.net/manual/en/function.parse-url.php . A snippet is what the server sees as a hash tag value. In your php code, render the correct og: snippet based tags.

Answer 3

You must implement hash navigation.

Here is a quick guide.

Here's a more conceptual introduction.

Answer 4

If you are using jQuery, I can recommend BBQ for hash navigation:

http://benalman.com/projects/jquery-bbq-plugin/

Answer 5

It actually sounds pretty straight at me. You have URLs, as usual, using hash (#), you can retrieve information both on the client side and on the server side.

There is only one thing that is missing on the server side, before you return the content, check the user agent string and compare it with facebook bot (if I'm not mistaken, this is something like "facebookexternalhit"), if it turns out to be facebook bot, and then returns what you need, which describes the URL for the similar / generic (metadata public metadata), and if any other line of the user agent returns the content as usual.