facebook share page can't show &(ampersand) mark?

Question

in facebook sharer page, it can show title including & mark ex:

url to share: http://myhome.com?q=hi&there

title tag of this page is

<title>hi&amp;there</title>

But, actually, facebook sharer page shows title: hi link: http://myhome.com?q=hi

I call the API like below. "http://www.facebook.com/sharer.php?u=" + encodeURIComponent(location.href) + "&t=" + encodeURIComponent(document.title) and I tried to use Open graph meta tag(og:title, og:url), but it does not help.

I checked my url in facebook developer's debug site(https://developers.facebook.com/tools/debug). but in debug site, it printed right title and link (including ampersand sign)

Thanks.

Answer 1

You need to make sure your ampersand is encoded in your original url, otherwise it acts as a delimiter between variables.

Assuming your app echoes the value in the q query string as its title, a url like you show: http://myhome.com?q=hi&there returns two variables: 'q' = 'hi' and 'there' = 1.

Your URL should have the literal & encoded: http://myhome.com?q=hi%26there to return 'q' = 'hi&there'.

Answer 2

You can use php encode any url string like

<? echo urlencode("http://myhome.com?q=hi"); ?>

Answer 3

By the question above, I guess that hardcoding the url exactly like it should be and pass it to the sharer api is not an option.

The problem:

As you may have noticed, facebook (and g+ also) will not accept the '&' character as well as anything that follows that.

So we should find a way to decode ONLY this '&'.

If you use encodeURIComponent then, all you url's special characters will be transformed to '%xx' style.

I.E.

var url_enc = encodeURIComponent('http://myhome.com?q=hi&there');
alert(url_enc);

will output this: http%3A%2F%2Fmyhome.com%3Fq%3Dhi%26there

which is not accepted by sharer either!

As I wrote before, what is really needed here is to send a url like this:

http://myhome.com?q=hi%26there 

which is accepted by facebook api.

Solution:

If you can't send the url as it is, and it maybe needs to be passed through a library that creates sharers and does the job for you, you need to pass exactly the url as it should be and then combine encodeURI and decodeURIComponent like below. (Personally i had to make this correction in order to work fine, so it was a serious bug)

In the following example, i assume that a javascript library is used.

var url = 'http://myhome.com?q=hi%26there';
library_function_that_creates_sharer(some_variable, url);

and then, inside that function, encode and decode to keep the url exactly the same.

decodeURIComponent(encodeURI(url));

In other words:

var url_new = decodeURIComponent(encodeURI(url));

ends up to be url_new = url.