Web intent not encoding correctly, tweet content truncated

[JustForTwitter]

Hello Twitter Devs,

I have a quote app with a tweet button to share a quote, (yes it’s the same one, I’ve been working on other things and came back to it) and I’m trying to add the quotation marks to the pre-populated text. It was working fine until I tried to do this - I updated the JavaScript that builds the twitter button on the page, which already contains the web intent code (I did not change the code you gave me). I added a “%22” before and after the quote content string variable, which works fine, UNLESS there is anything within the quote itself that requires encoding such as a question mark. One of the quotes is “Why not?” - Timothy Leary. The tweet content looks like this:

The URL you can’t see there is https: //twitter.com/intent/tweet?ref_src=twsrc^tfw&text="9%20Why%20not&tw_p=tweetbutton&url=file%3A%2F%2F%2FC%3A%2FUsers%2FDell%2FWebDevSandbox%2FFCCRandomQuote.html

Can you help me understand why the question mark is not getting encoded and therefore dropping the rest of the content? It was encoding the question mark just fine before I added the encoded quotation marks to the string. (Also, ignore the number 9, I numbered them to test the randomization algorithm.)

If you want to know why I don’t just add the quotation marks to the actual strings, I might eventually just do that, but right now I have the style tags doing that so they handle nested quotes automatically, which is more convenient.

Thanks!!

[kltelles]

Hi there! Can you give this a try and let me know if it works? Wrap the whole thing in %20 and replace the question mark with %3 like this:

%22hello%20world%3fasdasda%22

jsfiddle

[JustForTwitter]

Hello,

Thanks for your reply.

I don’t think I can make that work, here’s why.

var printOut = "<div class=\"row text-center\"></div> <a href=\"https://twitter.com/intent/tweet?text=" + "%22" + array2[0].wiseQuote + "%22";
printOut += " -" + array2[0].whoSaidIt + "\" class=\"twitter-share-button\" data-size=\"large\"></a>";

twttr.widgets.load($(".quote")); //Twitter dev wrote this for me, this is called in the html below.

<div class = "jumbotron jumbo row text-center quote">
  <h2>Click the button for a quote.</h2>
</div>

So, the random quote text is a variable, array2[0].wiseQuote, which is being placed by my JavaScript, and I cannot, and probably should not, make an exception for instances where quotes contain special characters such as question marks. There must be URL encoding happening somewhere in the twitter widgets JavaScript, (https://platform.twitter.com/widgets.js) which is happening at some point after the tweet button is clicked, and then un-encoding before passing the text to the tweet text area, I’m guessing?

OK I finally decided to make a JSfiddle to share because I can’t get the tweet button to work AT ALL in codepen, but guess what, It doesn’t work in JSfiddle either, so here’s the codepen. It works fine in FF and Chrome when I test it locally, so idk what the problem is??? Well here’s the link anyway if you want to see all my code: codepen

[kltelles]

Hi there! So we actually ask that you include “[p]re-populated UTF-8 and URL-encoded Tweet text.” Looking at your code pen, I don’t think you can avoid doing some parsing and/or encoding before passing the string into your embedded html.

[JustForTwitter]

OK thank you!

Fantastic, I see that I missed that whole step. I wouldn’t have noticed if I didn’t happen to have a quote with a question mark in it. I’ve got some work to do now!

Do you think that will solve the problem of the button not showing up in codepen and JSfiddle? That part isn’t super important, I’m just curious.

Thanks again!! You guys are great about responding!

[JustForTwitter]

I fixed it! It works now!!

[andypiper]

Great to know things are working and we are glad we could help to figure it out.

[andypiper]