How Does Facebook Rewrite the Source Url of a Page in the Browser Address Bar

How does facebook rewrite the source URL of a page in the browser address bar?

It's using HTML5's new history.pushState() feature to allow the page to masquerade as being at a different URL to that from which it was originally fetched.

This seems only to be supported by WebKit at the moment, which is why the rest of us are seeing ?v=wall#!/facebook?v=info instead of ?v=info.

The feature allows dynamically-loaded pages to be properly bookmarked, exchanged etc between JS-supporting and non-JS-supporting user agents. Because if you as a JS user linked someone to ?v=wall#!/facebook?v=info and their browser didn't support JS and XMLHttpRequest, the page wouldn't work for them. The #! is also used as a tip to search engines to download the non-AJAX version.

The Facebook footer bar is an iframe, so why it doesn't it reload with the rest of the page?

Well, powtac pretty much gave you the answer: Facebook doesn't reload the whole page when you click a link, it requests the new content via XMLHttpRequest and refreshes only those portions of the page that change.

It's pretty slick about this: a naive implementation might not use real links at all, thus preventing you from opening, say, a different Facebook tab in a separate browser tab.

This technique - intercepting link navigation - also allows Facebook to use custom prompts when you try to navigate away without saving, and re-write paths as fragments, allowing it to track the current location in the URL without reloading the page.

FWIW, this question has already been asked and answered - see: How are the facebook chat windows implemented?

How does this web page change URL query parameter in the address bar?

Is using window.history.replaceState

In: https://cdn.shopify.com/s/files/1/0061/4134/5903/t/13/assets/theme.js?v=13437044988013674143

Its has:

_updateHistoryState: function(variant) {
   if (!history.replaceState || !variant) {
     return;
   }
  
   var newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?variant=' + variant.id;
   window.history.replaceState({path: newurl}, '', newurl);
},

Is the only place in the source which assigns ?variant

Found by downloading site (right-click save-as), then doing a search for ?variant

How is Facebook's website front-end and it's right sidebar designed?

Since nobody wants to answer this I think I can provide the answer which helped me answered my question most accurate.

The answer is in this Facebook's dev blog post, which describe BigPipe design pattern pioneered by Facebook. BigPipe separates page into different chunks called 'pagelets' and loads them asynchronously (in parallel).

I found an open source PHP implementation of BigPipe and live example here but it is long since it's been updated and doesn't look to be in active development.

---

Related Topics