Sharing a URL with a query string on Twitter
TwitterQuery StringShareUrl EncodingTwitter Problem Overview
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.
Twitter Solutions
Solution 1 - Twitter
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
Solution 2 - Twitter
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.
Solution 3 - Twitter
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
Solution 4 - Twitter
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.
Solution 5 - Twitter
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>
Solution 6 - Twitter
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>
Solution 7 - Twitter
You must to change & to %26 in query string from your url
Look at this: https://dev.twitter.com/discussions/8616
Solution 8 - Twitter
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}`
Solution 9 - Twitter
You don't necessarily need to use intent, it you encode your URL it will work with twitter share as well.
Solution 10 - Twitter
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/
Solution 11 - Twitter
If you add it manual on html site, just replace:
&
With
&
Standard html code for &
Solution 12 - Twitter
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>
Solution 13 - Twitter
Use the Twitter Intent resource https://dev.twitter.com/web/tweet-button/web-intent