ajax - w3schools - history pushstate example

¿Cómo manejar facebook sharing/like con hashbang urls?

Question

Estoy construyendo un sitio web donde desde la página de inicio abriré algún otro URI en el sitio web en un lightbox (AJAX), y quiero usar HTML5 push state y hash bangs como una alternativa para gestionar cambios de estados.

Ahora quiero que las urls se puedan rastrear y compartir en Facebook / agradable.

Si el navegador del usuario admite HTML5 push state, no hay problema, puede compartir la URL (por ejemplo: http://myserver/example ) y Facebook encontrará las metas OG apropiadas en el contenido estático.

Pero si el usuario usa un navegador HTML4, tendrá una url como http://myserver/#!/example . y quiero que él pueda compartirlo a través de Facebook de todos modos ...

Ahora parece que Facebook admite el método de reemplazo _escaped_fragment_, así que simplemente redireccione las solicitudes de http://myserver/?_escaped_fragment_=/example a http://myserver/example y todo el mundo debería estar contento ...

Así que agregué una condición de reescritura a mi htaccess:

RewriteCond %{QUERY_STRING} ^_escaped_fragment_=([^&]*)
RewriteRule .* http://%{HTTP_HOST}/%1? [R=301,L,NE]

Mi problema es que no puedo hacer que funcione con Facebook, con Facebook Linter parece escapar por ciento todo el tiempo la parte de la URL después del hashbang, lo que da como resultado URLs como http://myserver/%2Fexample que aterriza en a 404 :-(

¿Alguien sabe cómo engañar a Facebook para que no escape de esta parte de la URL? ¿Puedo hacer algo en el lado apache mod_rewrite?

También estoy abierto a cualquier otra estrategia válida de URL ajax rastreable / agradable;)

Answer 1

Creo que la respuesta en http://facebook..com/questions/8896773/opengraph-on-ajax-based-website proporciona algunos consejos realmente buenos sobre cómo hacer que esto suceda.

Aquí está el contenido:

No. El marcado de Open Graph debe estar presente en las páginas HTML que son GETable con HTTP puro.

Esto se debe a que cuando un usuario interactúa con un objeto OG (como, realiza una acción, etc.), Facebook realizará un HTTP GET en la URL OG, y espera ver etiquetas OG devueltas en el marcado.

La solución es crear URL canónicas para cada uno de sus objetos. Estas URL contienen marcado HTML básico que incluye etiquetas OG.

En las solicitudes a estas URL, si ve la cadena de caracteres entrantes entrante que contiene ''facebookexternalhit'', entonces renderiza el HTML. Si no lo hace, sirve un 302 que redirige a su URL de Ajax. En las URL de Ajax, sus botones similares y cualquier acción de OG que publique deben apuntar al objeto URL canónico

Ejemplo:

Como usuario, estoy en http://yoursite.com/#!/artists/monet . Hago clic en un botón Me gusta, o publico una acción, pero el parámetro href del botón Me gusta o la URL del objeto cuando publica la acción debe ser una URL canónica para el objeto, en este caso, tal vez http: // yoursite .com / artists / monet

Cuando un usuario que utiliza un navegador acceda a http://yoursite.com/artists/monet , debe redirigirlos a http://yoursite.com/#!/artists/monet , pero si el agente de servicio entrante dice que es el raspador de Facebook, simplemente devuelva el marcado que representa al artista Monet.

Para ejemplos del mundo real, vea a Deezer, Rdio y Mog, quienes usan este patrón de diseño.

Answer 2

Terminé usando una redirección php header (), que funciona perfectamente:

if(isset($_GET[''_escaped_fragment_''])) {
    Header( "HTTP/1.1 301 Moved Permanently" );
    header(''Location: http://''.$_SERVER[''HTTP_HOST''].$_GET[''_escaped_fragment_'']);
    die();
}

No sé por qué obtuve caracteres escapados cuando lo hacía con la condición de reescritura htaccess.

Answer 3

Si usa la siguiente sintaxis, puede compartir las URL de hashbang en Facebook: https://.com/a/6138879/372838