Is it possible to make "Anchor Navigation" - Facebook Conform

Question

I made an Ajax-Based Webpage. For compatibility reasons, I made a "Anchor-Navigation" to support all Browsers, and the History Buttons.

Now, I have Links like: http://www.harddance.at/#!/newsdetails/62/HoH+weibliche+Acts+bestaetigt

When a User posts this Link to Facebook, it looks like this:

enter image description here

I have an "?_escaped_fragment_?" in the Link-Description. And Facebook is parsing the wrong content.

Sorry for my Bad english.

score 3 · Answer 1 · answered Jan 17 '12 at 17:42

I would see what the following information I gather from this question OpenGraph on Ajax Based Website

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.

Thank You! The question, you linked is a question from me. Just 4 Information :) — C.E., Jan 18 '12 at 18:00

score 0 · Answer 2 · answered Jan 17 '12 at 13:27

0

Please see my answer on a different post that might assist you in debugging this issue :

http://facebook.stackoverflow.com/a/8887746/558021

I suspect that the issue is being caused by missing og:tags.

answered Jan 17 '12 at 13:27

Lix

47,311
12
103
131

Thanks for your Answer. I try to use the Open_Graph Tags, but it doesn't solved my Problem. The Problem is, the "?_escaped_fragment_?", Facebook try to Parse Content from this "commented url", and it doesnt work. – C.E. Jan 17 '12 at 13:30
All the information in the the picture above is extracted from the `og:tags` - including the URL that has that "?_escaped_fragment_?" part. Please read my answer in the link above - there is details there also of how to test the changes you make to the `og:tags`. – Lix Jan 17 '12 at 13:31
I tested all things, but nothing works. The Problem is Facebook, when i post a random URL, with the /#!/ parameter, parsing fails. My Solution: Anchor Navigation without the "!" charakter. Or is there another way? http://img6.imagebanana.com/img/4hf2e601/Unbenannt.PNG – C.E. Jan 17 '12 at 14:31
You still did not implement the `og:tags` on your page. – Lix Jan 17 '12 at 14:34
I removed them, but i tested it. I must find a solution, which works on Ajax Pages (The Meta tags were ignored from Facebook, if they are not in the "head" section of the Code, and i load my Ajax content in the "Ajax Content" Div, so i can only define 1 Page with the og:tags at the moment. I replace the /#!/ Anchor with the /#/ Anchor and all works fine. – C.E. Jan 17 '12 at 14:38

score 0 · Accepted Answer · answered Jan 20 '12 at 19:37

Now, i see the following "facts":

Facebook, makes an GET parameter, with the Elements, after "/#!/. So, i can create "OpenGraph" Pages for the Facebook Crawler, and i have solved my Problem! The Tip with the own "OpenGraph" Pages, i get from: OpenGraph on Ajax Based Website

Chris

if (isset($_GET['_escaped_fragment_']) and preg_match("/facebookexternalhit/is", $_SERVER['HTTP_USER_AGENT'])) {

$link_details = explode("/", strip_tags(html_entity_decode($_GET['_escaped_fragment_'])));

$show_page = $link_details[1];
$show_id = urldecode($link_details[2]);
$show_title = urldecode($link_details[3]);


      // Eventdetails
      if($show_page=="eventdetails") {
          include("./includes/opengraph_eventdetails.php");
      }


      // Newsdetails
      if($show_page=="newsdetails") {
          include("./includes/opengraph_newsdetails.php");
      }


exit();
}

Isn't this what I recommended in my answer? – DMCS Feb 04 '12 at 23:11 — DMCS, Feb 04 '12 at 23:11

Is it possible to make "Anchor Navigation" - Facebook Conform

3 Answers3