How to handle facebook sharing/like with hashbang urls?

Question

I am building a website where from the homepage i will open some other URI on the website into a lightbox (AJAX), and i want to use HTML5 push state and hash bangs as a fallback to manage changes of states.

Now i want the urls to be crawlable and Facebook shareable/likeable..

If the user browser supports HTML5 push state, no problem, he can share the URL (for example : http://myserver/example ) and Facebook will find the appropriate OG metas in the static content.

But if the user uses a HTML4 browser, he will have a url like http://myserver/#!/example. and i want him to be able to share it through facebook anyway...

Now it looks like Facebook supports the _escaped_fragment_ replacement method, so i though i would simply redirect requests from http://myserver/?_escaped_fragment_=/example to http://myserver/example and everybody should be happy…

So i added a rewrite condition to my htaccess :

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

My problem is that i can't make it work with Facebook, with Facebook linter it seems to percent-escape all the time the part of the URL after the hashbang, resulting in urls like http://myserver/%2Fexample which lands to a 404 :-(

Does anybody knows how to trick Facebook into not escaping this part of the URL ? Can i do something on the apache mod_rewrite side ?

I am also open to any other valid ajax crawlable/likeable URL strategy ;)

Clarkia

Answer 1

i ended using a php header() redirect, which works perfectly :

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

I don't know why i got escaped characters when doing it with the htaccess rewrite condition.

Clarkia

Answer 2

I think the answer at http://facebook.https://mcmap.net/q/745446/-opengraph-on-ajax-based-website provides some really good advice on how to make this happen.

Here's the content:

---

No. Open Graph markup must be present on HTML pages which are GETable with pure HTTP.

This is because when a user interacts with an OG object (like, performs an action etc) Facebook will perform an HTTP GET on the OG URL, and expect to see OG tags returned in the markup.

The solution is to create canonical URLs for each of your objects. These URLs contain basic HTML markup including OG tags.

On requests to these URLs, if you see the incoming useragent string containing 'facebookexternalhit' then you render the HTML. If you don't, you serve a 302 which redirects to your ajax URL. On the ajax URLs, your like buttons and any OG actions you publish should point to the canonical URL object

Example:

As a user, I'm on http://yoursite.com/#!/artists/monet. I click a like button, or publish an action, but the like button's href parameter, or the URL of the object when you post the action should be a web hittable canonical URL for the object - in this case, perhaps http://yoursite.com/artists/monet

When a user using a browser hits http://yoursite.com/artists/monet you should redirect them to http://yoursite.com/#!/artists/monet, but if the incoming useragent says it is Facebook's scraper, you just return markup which represents the artist Monet.

For real world examples, see Deezer, Rdio and Mog who all use this design pattern.

Superaltar

Yes, it's because "Open Graph markup must be present on HTML pages which are GETable with pure HTTP" that i want to redirect facebook to the "real" url yoursite.com/artists/monet. I can't find how to redirect them with htaccess rules, but i ended up doing it with a php header location and it works well. Now facebook sees clean urls with OG metas when a user wants to share a url with a hashbang. – Clarkia

Does anyone know if this approach works with Twitter, LinkedIn, Pinterest and other OpenGraph networks also? – Delfeena

Answer 3

If you use the following syntax you can share hashbang urls on facebook: https://mcmap.net/q/218157/-facebook-share-button-and-custom-text-closed

Glow