[Quote Machine] Tweet Button doesn't work at all - server responds with error 404

Hi guys,

I’m at the end of my quote machine app. The last thing to do is this tweet button.
It won’t work. I looked up the twitter api and you have to get to this link with the arguments:

<a class="twitter-share-button"

I made a little javascript function that does exactly this. Changes the href with the correct link + text.

function shareTwitter(quote) {
  var link = "http://twitter.com/intent/tweet?text=";
  var quoteArr = quote.split(' ');
  var quote = quoteArr.join('%20');
  $("#twitterBtn").attr("href", "link" + quote);

My CodePen: https://codepen.io/GeraltDieSocke/pen/OxXJJr
Problem is that in the java console I get this error Failed to load resource: the server responded with a status of 404 () And a weird link pointing to a /boomerang/iFrame… site. What is this? When I click the link I come to the code pen’s 404 (Page Not Found).

Don’t know whats going on and why it is not working? This link is so weird. Is this a problem with codepen?

Thank you guys!

$("#twitterBtn").attr("href", "link" + quote);

You are using the string "link" but you want the variable link.

According to CodePen:

Note that if you don’t use target="_blank" on a link, and link to something not on CodePen, the link will simply fail due to our sandboxing and cross-origin security.

1 Like

Thanks man its working now. I just have to figure out how to get rid of the p tags in the sentence :smiley:
/edit: If you are interested look at my codepen again. I found a dirtly little fix for the p tag issue :smiley:
Just add a div element. Set the innerHtml to the quote (including the p tags). Then get the innerText from it. It’s dirty but working :smiley:

1 Like

Nice workaround!

Note, that your tweet functionality will still fail when the quote contains some special characters (&, ', etc).

I believe using encodeURIComponent() could fix this.

Nice did not know about that. Will fix that tomorrow. Nice Component right there :smiley:

@BenGitter Sorry but I tried it out, but can’t get it to work with that. I also went through my code again and don’t see why it should fail when there are & characters in the quote (besides that the quote never have special signs in it).
Could you please give me a hint :slight_smile:

Thank you!

Yeah, my bad, I must have noticed it before you used the div to get rid of the p tags. Most characters are now indeed correctly placed in the tweet box. The only exception I could find is the semi-colon, but not sure if you want to cover that case.

If you do:

function shareTwitter(quote) {
  var link = "http://twitter.com/intent/tweet?text=";
  // get rid of p tags in quote
  var div = document.createElement("div");
  div.innerHTML = quote;
  var text = div.textContent || div.innerText || "";
  $("#twitterBtn").attr("href", link + encodeURIComponent(text));

Ok get it now a 100 %. Also made the box with the quote in it a little less wide. I think I can now move on to the next project.

1 Like

Added a rotation function which rotates the div everytime button gets clicked. What do you think? It’s not as smooth as I wanted it to be. Any ideas?

TBH I don’t think this adds anything. It might be nicer to animate the change in height.

The height is chaning, depending on whether the text is longer as the text before.
Or did you mean something eles? I know it’s not an advantage to rotate this thing but I wanted to try it anyway. But it’s just ugly and not smooth. Because it first changes the text and then rotates it. I would be nicer if the text change when the rotation is at 90° because then the div is not visible.
Ideas? :smiley:

I have no idea how to nicely animate that.