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  quot Build Your Own quot  Tweet button  For example  sharing a link to Google   lt a href  quot http   www twitter com share url http   www google com  gt Tweet lt  a gt   This works fine   The problem I m having is when the URL has a query string   lt a href  quot http   www twitter com share url http   mysite org foo htm bar 123 amp baz 456 quot  gt Tweet lt  a gt   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   lt a href  quot http   www twitter com share url http   mysite org foo htm 3Fbar 3D123 26baz 3D456 quot  gt Tweet lt  a gt   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 amp 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

User · Accepted Answer

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

User · Answer

This will Work For You  http   twitter com share text text goes here amp url http   url goes here amp hashtags hashtag1 hashtag2 hashtag3   Here is a Live Example About it    http   twitter com share text Im Sharing on Twitter amp url https   stackoverflow com users 2943186 youssef-subehi amp hashtags stackoverflow example youssefusf

User · Answer

Twitter now lets you send the URL through a data attribute  This works great for me     lt 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  gt Tweet lt  a gt

User · Answer

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

User · Answer

Use tweet web intent  this is the simple link   https   twitter com intent tweet url  lt   urlencode  url   gt    more variables at https   dev twitter com web tweet-button web-intent

User · Answer

It s working for me   lt div class  quot links quot  gt       lt ul gt       lt li class  quot social-share facebook quot  gt Share on Facebook lt  li gt       lt li class  quot social-share twitter quot  gt Share on Twitter lt  li gt       lt li class  quot social-share linkedin quot  gt Share on LinkedIn lt  li gt       lt  ul gt   lt  div gt   And in js file add this   setShareLinks         function socialWindow url        var left    screen width -570    2      var top    screen height -570    2      var params    quot menubar no toolbar no status no width 570 height 570 top  quot    top    quot  left  quot    left   window open url  quot NewWindow quot  params     function setShareLinks         var pageUrl   encodeURIComponent document URL       var tweet   encodeURIComponent    quot meta property  og description   quot   attr  quot content quot         quot  social-share facebook quot   on  quot click quot   function     url  quot https   www facebook com sharer php u  quot    pageUrl  socialWindow url           quot  social-share twitter quot   on  quot click quot   function     url    quot https   twitter com intent tweet url  quot    pageUrl    quot  amp text  quot    tweet  socialWindow url           quot  social-share linkedin quot   on  quot click quot   function         url    quot https   www linkedin com shareArticle mini true amp url  quot    pageUrl  socialWindow url         Hope this will work well

User · Answer

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

User · Answer

You must to change  amp  to  26 in query string from your url  Look at this  https   dev twitter com discussions 8616

User · Answer

You can use these functions    function shareOnFB           var url    https   www facebook com sharer sharer php u https   yoururl com amp 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 amp via getboldify amp 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       lt a onClick  shareOnFB    gt  Facebook  lt  a gt   lt a onClick  shareOntwitter    gt  Twitter  lt  a gt   lt a onClick  shareOnGoogle    gt  Google  lt  a gt

User · Answer

I reference all the methods   Encode the query twice is the fast solution   const query   a 123 amp b 456  const url    https   example com test   encodeURIComponent encodeURIComponent query         const twitterSharingURL  https   twitter com intent tweet  amp url   url

User · Answer

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

User · Answer

If you add it manual on html site  just replace    amp    With   amp amp    Standard html code for  amp

User · Answer

Doesn t get simpler than this     lt a href  https   twitter com intent tweet text optional 20promo 20text 20http   example com foo htm bar 123 amp baz 456  target   blank  gt Tweet lt  a gt

[twitter] Sharing a URL with a query string on Twitter

Examples related to twitter

Examples related to query-string

Examples related to url-encoding

[twitter] Sharing a URL with a query string on Twitter

Examples related to twitter

Examples related to query-string

Examples related to share

Examples related to url-encoding