Facebook Share URL with a hash

Question

There are several products on my single page page, and the product information is displayed as a simple pop-up when clicked. There is a Facebook share for each product. But when I share Facebook by URL, say www.example.com#product1 in the generic URL #product1 , split up.

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

When I share, it only comes as http://example.com/ , not http://example.com/#product1 . I want the full URL to be shared, e.g. http://example.com/#product1 . He is being cleaned somehow.

How to avoid this?

Answer 1

As CBroe mentions, Facebook and # index URLs are not considered part of the URL.

The solution is to use the hashbang #! notation instead #! . Facebook follows the Google Ajax specification to allow indexing of Ajax websites in this case.

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

You can read a more detailed answer here: fooobar.com/questions/334002 / ...

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

Answer 2

Now Facebook and Twitter do not allow sharing of the URL containing the # tag. However, you can exchange URLs 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 avoid the url with encodeURIComponent

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

Answer 4

Depends on the needs and how they are implemented, this can be done using the goo.gl API to create a unique, accessible link.

Two ways to implement it: 1. Manually, just go to goo.gl and post your full link, including #hash_tag (it will be available via Facebook) 2. Using the API for automatic sharing tasks ... for example, applications, etc. . Using the goo.gl url API.