Question
I have a page with a Facebook Share button. The URL I want to share has a query string on it that I build with javascript. Here is how I'm generating the URL to share..
https://stackoverflow.com/questions/19100333
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianqueryString = "cup=blue&bowl=red&spoon=green";
//the values of this are actually generated by user input, don't think its important for this example though. So in this example its just a basic string.
siteURL = "http://example.com/?share=1&";
//the url without the query string
sharingURL = siteURL+queryString;
//Combing the domain/host with query string.. sharingURL should = http://example.com?share=1&cup=blue&bowl=red&spoon=green
function FBshare(){
shareURL = siteURL+queryString;
console.log(shareURL);
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+shareURL,
'facebook-share-dialog',
'width=626,height=436');
return false;
}
$(".facebook").bind("click", function(){
FBshare();
});
When facebook grabs the URL for some reason its leaving off everything that was created in the queryString variable. So the shared URL ends up being just http://example.com/?share=1. Any ideas why its leaving off the queryString variable? The correct URL gets put into the console.log just fine, plus its in the Facebook share.php URL as a query string (for example https://www.facebook.com/sharer/sharer.php?u=http://example.com/?share=1&cup=blue&bowl=red&spoon=green).. but the actual link on Facebook is incomplete.
Here is a jsFiddle. http://jsfiddle.net/dmcgrew/gawrv/
Solution
The facebook URL comes out as this:
https://www.facebook.com/sharer/sharer.php?u=http://example.com?share=1&cup=blue&bowl=red&spoon=green
The first & and the parameter cup (as well as the other parameters) are interpreted as part of the facebook url.
Use encodeURIComponent(), which will encode special characters like &:
shareURL = encodeURIComponent(siteURL+queryString);
OTHER TIPS
In addition to Jason P's answer, sharer.php is long since deprecated.
Instead, you should use the Facebook Feed and Share dialogs: https://developers.facebook.com/docs/reference/dialogs/feed/
These offer more control over the share dialog, as well as better debugging via the Facebook Debugger.
As of October 2014, Facebook have deprecated both the sharer.php and the Facebook Feed and Share dialogs.
The current recommendation for link sharing is to use the Share Dialog:
https://developers.facebook.com/docs/sharing/reference/share-dialog#redirect
I came across this problem in this particular scenario:
I would share the following link:
FB.ui({
method: 'share',
href: 'mysite.com?p=10&og=15',
}, function(response){});
And Facebook scraper would remove the og parameter from the URL and would scrape the following URL: mysite.com?p=10
Reason
mysite.com?p=10&og=15. The scraper would make a request to the given URL and gets a response which looks like this:<head>
<meta property="og:url" content="mysite.com?p=10">
<meta property="og:image" content="mysite.com?photo=1145">
// more meta tags...
</head>
og:url meta tag and would make a request to that URL and scrape that page.Solution
I had to fix the value of og:url meta tag to include all the required parameters.
