Os identificadores de fragmento são a parte #loremipsum opcional de um URL (por exemplo, http://shldz.us/travels/#Provo ).
Os identificadores de fragmento são usados apenas no navegador do cliente e não são enviados ao servidor. Usar isso pode ser incrivelmente útil para alterar dinamicamente o conteúdo de uma página da web sem ter que solicitar a página inteira do servidor novamente. Eles podem ser contrastados com strings de consulta que seguem o ponto de interrogação em uma URL e são enviadas ao servidor.
Um exemplo da utilidade dos identificadores de fragmento
Eu tenho algum código Javascript em shldz.us/travels que usa o identificador de fragmento para abrir imagens específicas no meu visualizador de lightbox, criando um link como http://shldz.us/travels/#Winter+http://shldz.us /travels/Now/2014/2013/Winter/IMG_0001.JPG abre a imagem correta.
Pelo que o servidor sabe, ele apenas serviu ao cliente o recurso em shldz.us/travels e é isso, mas meu código Javascript no cliente também sabia pegar a imagem no identificador de fragmento e abri-lo.
Isso é ótimo, porque como alguém está percorrendo as imagens em uma galeria, posso alterar o URL para a imagem atual sem enviar e receber uma solicitação totalmente nova para o servidor.
O problema com o botão Curtir do Facebook (e outros recursos)
Usar identificadores de fragmento pode ser difícil se você estiver tentando fazer algo como adicionar um botão ‘Curtir’ do Facebook à sua página dinâmica.
Para informar ao Facebook que você deseja curtir em sua página, o código do servidor criará algumas tags especiais do Facebook para informar ao Facebook sobre a página da web atual. No meu exemplo (shldz.us/travels), quero que cada imagem seja vista no Facebook como uma página separada com seus próprios ‘likes’.
Quando a página é criada, você adiciona a tag “meta property = ‘og: url’ content = ‘$ url'”, que é usada para informar ao Facebook qual URL considerar para curtir. Mas o servidor não sabe o que realmente queremos Gostar porque está descrito no identificador de fragmento, que o servidor nunca consegue ver !!
A solução
Provavelmente, existem várias respostas para resolver este problema, mas a que eu encontrei é muito simples: basta escrever seu código para responder a uma string de consulta (o que vem após um?) Enviando o usuário para a mesma URL exata com um fragmento identificador em vez disso.
Por exemplo, se o seu servidor receber uma solicitação de shldz.us/travels?anawesomeimage, você poderá criar as metatags do Facebook com este URL (caso o Facebook esteja nos verificando) e retornar a página ao cliente. Portanto, você teria algo como o seguinte no início de sua página:
$qs = $_SERVER['QUERY_STRING'];
if($qs){
$url = "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
echo "<meta property='og:url' content='$url' />";
//Create any other tags you want....
}Esta página é devolvida ao solicitante, atendendo a todas as solicitações dos robôs do Facebook.
Então, você poderia escrever seu código de cliente para responder às strings de consulta e identificadores de fragmento exatamente da mesma maneira, mas eu escolhi uma abordagem menos elegante e mais fácil:
if(location.search){ //Check if there is a query string in the URL
var temp = location.search.substring(1); //Get the query string without the '?'
var url = 'http://shldz.us/travels/#' + temp; //Use the query string as the fragment identifier
window.location = url; //Redirect the user
}Javascript simplesmente redireciona o usuário para shldz.us/travels#anawesomeimage e, a partir daqui, seu código de cliente saberá o que fazer. Isso é reconhecidamente deselegante, pois significa redirecionar um usuário assim que uma página é recebida, mas para minha situação parece bom.
Agora, sempre que você estiver conversando com o Facebook sobre seus recursos da web (em código ou ao postar no Facebook), você sempre usará a URL com a string de consulta. Os usuários poderão clicar nele para visitar seu site e não saber a diferença.
Vá em frente, visite http://shldz.us/travels/?New_York+http://shldz.us/travels/Now/2014/2013/New_York/IMG_1583.JPG e procure a string de consulta assim que a página for carregada.
Isso resolveu meu problema, mas pode não resolver o de todos, então aceite o que vale a pena (grátis).