Sharing a URL with a query string on Twitter

145
votes

I'm trying to put a Twitter share link in an email. Because this is in an email I can't rely on JavaScript, and have to use the "Build Your Own" Tweet button.

For example, sharing a link to Google:

<a href="http://www.twitter.com/share?url=http://www.google.com/>Tweet</a>

This works fine. The problem I'm having is when the URL has a query string.

<a href="http://www.twitter.com/share?url=http://mysite.org/foo.htm?bar=123&baz=456">Tweet</a>

URLs with query strings confuse Twitter's URL shortening service, t.co. I've tried URL encoding this in various ways and cannot get anything to work. The closest I have gotten is by doing this.

<a href="http://www.twitter.com/share?url=http://mysite.org/foo.htm%3Fbar%3D123%26baz%3D456">Tweet</a>

Here I've encoded only the query string. When I do this, t.co successfully shortens the URL, but upon following the shortened link, it takes you to the encoded URL. I see http://mysite.org/foo.htm%3Fbar%3D123%26baz%3D456 in the address bar, and get the following error in the browser

Not Found

The requested URL /foo.htm?bar=123&baz=456 was not found on this server.

I'm at a loss as to how to solve this problem.

Edit: Re: onteria_

I've tried encoding the entire URL. When I do that no URL shows up in the Tweet.

13
twitterquery-stringshareurl-encoding
You need to url encode the ENTIRE URL. That includes everything from the http:// down – onteria_

13 Answers

209
votes

This will Work For You

http://twitter.com/share?text=text goes here&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3

Here is a Live Example About it

http://twitter.com/share?text=Im Sharing on Twitter&url=https://stackoverflow.com/users/2943186/youssef-subehi&hashtags=stackoverflow,example,youssefusf

130
votes

This can be solved by using https://twitter.com/intent/tweet instead of http://www.twitter.com/share. Using the intent/tweet function, you simply URL encode your entire URL and it works like a charm.

https://dev.twitter.com/web/intents

29
votes

Use tweet web intent, this is the simple link:

https://twitter.com/intent/tweet?url=<?=urlencode($url)?>

more variables at https://dev.twitter.com/web/tweet-button/web-intent

10
votes

You can use these functions:

 function shareOnFB(){
       var url = "https://www.facebook.com/sharer/sharer.php?u=https://yoururl.com&t=your message";
       window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
       return false;
  }


function shareOntwitter(){
    var url = 'https://twitter.com/intent/tweet?url=URL_HERE&via=getboldify&text=yourtext';
    TwitterWindow = window.open(url, 'TwitterWindow',width=600,height=300);
    return false;
 }


function shareOnGoogle(){
     var url = "https://plus.google.com/share?url=https://yoururl.com";
     window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=350,width=480');
     return false;
}


<a onClick="shareOnFB()"> Facebook </a>
<a onClick="shareOntwitter()"> Twitter </a>
<a onClick="shareOnGoogle()"> Google </a>
7
votes

Doesn't get simpler than this: 

<a href="https://twitter.com/intent/tweet?text=optional%20promo%20text%20http://example.com/foo.htm?bar=123&baz=456" target="_blank">Tweet</a>
7
votes

It's working for me:

<div class="links">
    <ul>
    <li class="social-share facebook">Share on Facebook</li>
    <li class="social-share twitter">Share on Twitter</li>
    <li class="social-share linkedin">Share on LinkedIn</li>
    </ul>
</div>

And in js file add this:


setShareLinks();

    function socialWindow(url) {
    var left = (screen.width -570) / 2;
    var top = (screen.height -570) / 2;
    var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;  window.open(url,"NewWindow",params);}

function setShareLinks() {
    var pageUrl = encodeURIComponent(document.URL);
    var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));

$(".social-share.facebook").on("click", function() { url="https://www.facebook.com/sharer.php?u=" + pageUrl;
socialWindow(url);
});

$(".social-share.twitter").on("click", function() {
url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
socialWindow(url);
});

$(".social-share.linkedin").on("click", function() {
    url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl;
socialWindow(url);
})
}

Hope this will work well.

5
votes

You must to change & to %26 in query string from your url

Look at this: https://dev.twitter.com/discussions/8616

5
votes

I reference all the methods.

Encode the query twice is the fast solution.

const query = a=123&b=456;
const url = `https://example.com/test?${encodeURIComponent(encodeURIComponent(query),)}`;


const twitterSharingURL=`https://twitter.com/intent/tweet?&url=${url}`
3
votes

You don't necessarily need to use intent, it you encode your URL it will work with twitter share as well.

2
votes

As @onteria_ mentioned, you need to encode the entire parameter. For anyone else facing the same issue, you can use the following bookmarklet to generate the properly encoded url. Copy paste it into your browser's address bar to create the twitter share url. Make sure that the javascript: prefix is there when you copy it into address bar, Google Chrome removes it when copying.

javascript:(function(){var url=prompt("Enter the url to share");if(url)prompt("Share the following url - ","http://www.twitter.com/share?url="+encodeURIComponent(url))})();

Source on JS Fiddle http://jsfiddle.net/2frkV/

2
votes

If you add it manual on html site, just replace:

&

With

&amp;

Standard html code for &

1
votes

Twitter now lets you send the URL through a data attribute. This works great for me: 

<a href="javascript:;" class="twitter-share-button" data-lang="en" data-text="check out link b" data-url="http://www.lyricvideos.org/tracks?videoURL=SX05JZ4FisE">Tweet</a>