Facebook Share URL having hash

Question

My single page website has some products, and product details appear as simple pop-up when clicked. For each product there is Facebook share. But when I Facebook-share the url say www.example.com#product1 in the shared url the #product1 get stripped.

FB.ui({
  method: 'share',
  href: 'http://example.com/#product1',
}, function(response){});

When I share it comes as only http://example.com/ , not http://example.com/#product1. I want the full URL to be shared like http://example.com/#product1. Its getting stripped off somehow.

How to avoid this?

Answer 1

Like CBroe mentions, Facebook indexes URLs and the # is not considered part of the URL.

A solution is to use "hashbang" #! notation instead. Facebook follows the Google Ajax Specification to allow indexing of, in this case, Ajax websites.

The effect is that http://www.example.com/#!/product1 will be rewritten and instead the query to your server becomes http://www.example.com/?_escaped_fragment_=/product1. In turn, you can catch that on your server and reply with a page dedicated to that product.

You can read a more elaborate answer here: https://stackoverflow.com/a/15024853/561485

The most important part is that your website should be able to provide dedicated pages for each product; if you only have index pages, using the # notation will always share the same url.

Answer 2

Now Facebook and Twitter doesn't allow sharing of URL's containing # tag. However you can share URL by using %23 instead of #

<a class="twitter-share" href="https://twitter.com/intent/tweet?url=http://www.goparties.com/%23/party/{{id}}" target="_blank">

Answer 3

You can also escape the url with encodeURIComponent

FB.ui({
  method: 'share',
  href: encodeURIComponent('http://example.com/#product1'),
}, function(response){});