CODEWITHSUNDEEP
javascriptjqueryfacebookfacebook-sharer
Dustin
Dustin

Reputation: 4459

Facebook ignoring part of my query string in share URL

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..

queryString = "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/

Upvotes: 13

Views: 17141

Answers (4)

Hooman Bahreini
Hooman Bahreini

Reputation: 15559

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

  1. I ask Facebook scraper to scrape this link: 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>
  1. Facebook scraper grabs whatever value I am proving in 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.

Upvotes: 0

Glen
Glen

Reputation: 104

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

Upvotes: 1

Jason P
Jason P

Reputation: 27012

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);

Upvotes: 24

ceejayoz
ceejayoz

Reputation: 179994

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.

Upvotes: 1

Related Questions