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

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

#1

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"
  href="https://twitter.com/intent/tweet?text=Hello%20world">
Tweet</a>

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!


#2

$("#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.


#3

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:


#4

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.


#5

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


#6

@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!


#7

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));
};

#8

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.


#9

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?


#10

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


#11

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:


#12

I have no idea how to nicely animate that.