6

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.
amit
  • 10,133
  • 22
  • 72
  • 121
  • 3
    Possible duplicate of [Modify the URL without reloading the page](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) – DaveRandom Feb 09 '12 at 20:10
  • 1
    its not duplicate. i need to figure a way to create a fixed href. not temporary. the href should remain in place for facebook to access it. – amit Feb 09 '12 at 20:13
  • 1
    It is a duplicate if you think about what you actually have to do here - unless I have misunderstood. I interpreted this as you want to modify the content of the page with Javascript, but you also want to change the URL displayed in the address bar so that if you reloaded the URL, the same content would be generated. So what you actually want to do is exactly what the other question is asking. I'm not saying this is a *bad* question - which is why I haven't downvoted it - but I do think it is a dupe. But if I have misunderstood, please expand on exactly what you want... – DaveRandom Feb 09 '12 at 20:18
  • 1
    when i give the href to facebook, it uses it to scrape the page and also gives the users a link to go to. so i need a permanent link for that to function correctly. – amit Feb 10 '12 at 03:25
  • 1
    hey Amit are you making an iphone app? – Asish AP Feb 18 '12 at 17:13

5 Answers5

4

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.

DMCS
  • 31,720
  • 14
  • 71
  • 104
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.

Anthony Williams
  • 66,628
  • 14
  • 133
  • 155
  • 1
    Correct. Use the jQuery history plugin. I have working code here almost the same as what you want. http://www.capriccioitaliano.com.au/site#menu. each page is loaded via jQuery.ajax(post) using the history plugin and has a like button. in .htaccess u can do this `Options +FollowSymLinks RewriteEngine On RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] RewriteCond %{REQUEST_URI} !^/site\.htm RewriteCond %{REQUEST_URI} /site/|(/[^.]*|\.(php|html?|htm|feed|pdf|vcf|raw))$ [NC] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule .* site.htm [L]` – Damien Keitel Feb 17 '12 at 01:26
0

You have to implement hash navigation.

Here is short tutorial.

Here is more conceptual introduction.

Alexander Yagovdik
  • 37
  • 5
  • While this works great on the client side, facebook's linter tool does not run javascript, so it will get the old content. – DMCS Feb 10 '12 at 11:57
0

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

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

thesmart
  • 2,993
  • 2
  • 31
  • 34
0

This actually sounds pretty straight forward to me. You have the urls as usual, using hash (#) you can extract the info both in the client and 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 to the facebook bot (if i'm not mistaken it's something like "facebookexternalhit"), if it turns out to be the facebook bot then return what ever you want which describes the url for a like/share (open graph meta data), and if it's any other user agent string return the content as usual.

Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299