0

When I click on "Liked By" below an instagram post, it shows a popup of the list of people who liked that post. Somehow, it also changes the url from www.instagram.com to www.instagram.com/p/<some random alphanumeric text here>/liked_by/. As you see, the url has changed without the page being reloaded and there is no # in there either. How is this done?

I've a .NET background but I'm not up to date on the latest web technologies and this question is technology agnostic because I don't know what technology instagram uses but feel free to point me in the right direction and I'll research the .NET equivalent of what's going on.

Achilles
  • 1,099
  • 12
  • 29

1 Answers1

1

I think you are looking for the history.pushState method, it allows you to push a url to the history of navigated pages and it will change the url reference to the value you passed. In the examples you provided, it would be like this:

history.pushState({}, "some title", "/p/<some random alphanumeric text here>/liked_by/")

It accepts both relative and absolute paths.

All this is done via javascript on the browser-side, I don't think you can do this without javascript. If you want to check the history api, you can check it here.

Felipe Gonçalves Marques
  • 847
  • 6
  • 13
  • Ah, just for curiosity, this is what frameworks as Angular and React uses, you can check here: https://github.com/angular/angular/search?q=history.pushState&unscoped_q=history.pushState and https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/package.json#L47 – Felipe Gonçalves Marques Apr 07 '19 at 07:31
  • Thank you, this was very helpful. – Achilles Apr 07 '19 at 22:49