Sharing a URL with a query string on Twitter

Question

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.

You need to url encode the ENTIRE URL. That includes everything from the `http://` down — onteria_, Jun 01 '11 at 22:15

score 234 · Answer 1 · edited May 23 '17 at 11:55

234

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

edited May 23 '17 at 11:55

Community

1
1

answered Dec 30 '13 at 02:25

Youssef Subehi

2,790
1
18
20

3

Would have been a good answer if it … you know … answered the original question. – Dave Land Apr 17 '20 at 21:54
This sharing link structure is not working anymore. Use https://twitter.com/intent/tweet?text={your text} instead – kimomat Dec 06 '22 at 08:10

score 136 · Accepted Answer · edited Sep 24 '14 at 20:52

136

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

edited Sep 24 '14 at 20:52

Hozefa

1,676
6
22
34

answered Jun 01 '11 at 22:46

haydenmuhl

5,998
7
27
32

Plume and Tweetcaster don't handle this format (they just show the profile for intent or share, depending on the URL). Tweetdeck doesn't seem to handle twitter.com URLs at all. – Pierre-Luc Paour Oct 01 '12 at 14:47
Also see this link - http://blog.socialsourcecommons.org/2011/03/creating-share-this-on-facebooktwitter-links/ – Alpesh Trivedi Feb 11 '16 at 05:34
6

`https://twitter.com/intent/tweet?text={text_to_share}` works perfectly on all platforms. Been searching high and low for this.. Thanks! – Jack Dewhurst Jul 04 '18 at 09:40

kampageddon · Answer 3 · 2015-05-22T16:05:35.087

35

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

edited May 22 '15 at 16:05

answered Mar 25 '15 at 10:15

kampageddon

1,409
15
13

score 22 · Answer 4 · edited Feb 24 '21 at 07:00

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.

Here is the same code, but nicely formatted: https://codepen.io/emohamed/pen/jOzPxgv — Emil M, Jul 03 '22 at 06:43

score 14 · Answer 5 · answered Feb 15 '19 at 08:49

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>

A solution that doesn't rely on javascript would just build these links (in `var url = ...`) when generating the email. — Thomas Ebert, May 20 '19 at 12:49

score 9 · Answer 6 · answered Jul 23 '19 at 09:37

9

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>

answered Jul 23 '19 at 09:37

Ronen Rabinovici

8,680
5
34
46

score 5 · Answer 7 · answered Sep 04 '14 at 19:02

5

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

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

answered Sep 04 '14 at 19:02

Thiago Valentim

500
6
14

score 5 · Answer 8 · answered Nov 23 '19 at 14:12

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}`

score 3 · Answer 9 · answered Oct 09 '12 at 20:04

3

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

answered Oct 09 '12 at 20:04

Dragos Rusu

31
1

Joyce Babu · Answer 10 · 2014-05-11T12:46:38.003

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/

score 2 · Answer 11 · answered Sep 23 '19 at 07:32

2

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

With

&amp;

Standard html code for &

answered Sep 23 '19 at 07:32

Hans Ganteng

179
1
4

A full doc for building shared links using js https://css-tricks.com/simple-social-sharing-links/ – Ashnet Feb 23 '21 at 09:23

score 1 · Answer 12 · answered Jul 09 '14 at 04:57

1

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>

answered Jul 09 '14 at 04:57

user3798322

21
3

Has anyone tested to see if this relies on javascript from the twitter API to pull the url from the attribute and then redirect the browser to the right URL? – Mark Sep 03 '14 at 05:43

score 0 · Answer 13 · answered Jan 12 '15 at 18:12

0

Use the Twitter Intent resource https://dev.twitter.com/web/tweet-button/web-intent

answered Jan 12 '15 at 18:12

Wil Gichu

1

3

including a key snippet to answering the question would help – Paul Bastide Jan 12 '15 at 18:14

Sharing a URL with a query string on Twitter

13 Answers13

Linked