Esa página tiene una estructura de directorios que replica los enlaces que carga vía AJAX.
Para simplificar, voy a mostrarte un ejemplo con pushstate y hash, así no es necesario trabajar con directorios, que es más complejo de explicar y entender. El ejemplo podés verlo online aquí:
http://disegnocentell.com.ar/ejemplo/
Vamos a trabajar con un index.html que cargará las páginas uno.html, dos.html y tres.html, y vamos a imaginar que tres.html es la que querés compartir.
index.html tendrá todas las funciones de carga vía AJAX:
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ejemplo</title>
<style>
*{padding:0; margin:0}
ul{ padding-left:20px}
li{ cursor:pointer; list-style:none;display:inline-block; padding:3px 10px; background:#CCC; margin-right:5px}
li:hover,.active{ background:#666}
#contenido{ color:red; padding:20px}
#btcompartir{ color:#FFF; background:#4862A3; padding:5px; width:200px; text-align:center; margin-top:20px}
</style>
<script>
function http(){
if(typeof window.XMLHttpRequest!='undefined'){
return new XMLHttpRequest();
}else{
try{
return new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
alert('Su navegador no soporta AJAX');
return false;
}
}
}
function request(url,params,callback){
var H=new http();
if(!H)return;
var p='';
for(var i in params){
p+='&'+i+'='+escape(params[i]);
}
H.open('get',url+'?'+p+'&'+Math.random(),true);
H.onreadystatechange=function(){
if(H.readyState==4 && H.status == 200){
if(callback)callback(H.responseText);
H.onreadystatechange=function(){}
H.abort();
H=null;
}
}
H.send(null);
}
function $(x){
return document.getElementById(x);
}
function loadPage(cual){
request(
cual+'.html',
{},
function(r){
$('uno').className=$('dos').className=$('tres').className='';
$('contenido').innerHTML=r;
history.pushState(null, 'titulo de '+cual, '#'+cual);
$(cual).className='active';
}
);
}
onload=onpopstate=function(){
if(location.hash.indexOf('dos')!=-1 ){
loadPage('dos');
}else if(location.hash.indexOf('tres')!=-1 ){
loadPage('tres');
}else{
loadPage('uno');//index
}
}
</script>
</head>
<body>
<ul id="menu">
<li id="uno" onClick="loadPage('uno')">uno</li> <li id="dos" onClick="loadPage('dos')">dos</li> <li id="tres" onclick="loadPage('tres')">tres</li>
</ul>
<div id="contenido"></div>
</body>
</html>
Es bastante simple el código: durante la carga de la página o cuando se altera la url, se analiza si la url explicita que se deba cargar una sección. Si no explicita nada, se carga la sección por defecto. La función que carga la página, lo hace vía AJAX e ingresa una entrada en el historial con pushState.
Las páginas uno.html y dos.html son prácticamente iguales: solo contienen las palabras uno y dos respectivamente.
La página tres.html tiene, además de la plabra tres, un botón para compartir:
Código:
tres<br />
<div id="btcompartir" onclick=" window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent('http://www.disegnocentell.com.ar/ejemplo/compartir.html'),'sharer','toolbar=0,status=0,width=760,height=636,scrollbars=yes');">compartir esta sección</div>
El botón de compartir le pasa a la api de Facebook la ruta absoluta de la página a compartir. La página de compartir se llama compartir.html y sólo tiene datos para que lea el robot de Facebook y un redireccionamiento a la url a la que queremos que se redirija al usuario desde el post de Facebook. Ese redireccionamiento, en nuestro caso es a la página que carga el contenido de tres.html, que es nuestro index con el hash tres en la url.
compartir.html:
Código:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>El título</title>
<meta name="title" content="lo que sea" />
<meta name="description" content="lo que sea" />
<link rel="image_src" href="http://royalbloodband.com/cdn/_graphics/mceuploads/news/RB_PreOrderPack.jpg" />
<meta property="og:title" content="lo que sea" />
<meta property="og:description" content="lo que sea"/>
<meta property="og:image" content="http://royalbloodband.com/cdn/_graphics/mceuploads/news/RB_PreOrderPack.jpg" />
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.disegnocentell.com.ar/ejemplo/compartir.html"/>
<meta property="og:site_name" content="lo que sea"/>
</head>
<body>
<script>top.location='http://www.disegnocentell.com.ar/ejemplo/#tres';</script>
</body>
</html>
Eso sería todo :)