Twitter Functionality - Need help!

Twitter Functionality - Need help!
0
#1

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Random Quote Generator</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
  <div class="container">
    <h1>Random Quotes Rewritten</h1>
    <p>Would you like a random sentence to send to someone or incorporate in your project? Press the button below!</p>
    <div class="quotearea">

    </div>
    <button id="newquote">New quote</button>
    <button class="tweetquote"><i class="fa fa-twitter" aria-hidden="true"></i>
       Tweet Quote</button>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="script.js"></script>
</body>

</html>

JS:

var quoteObj;
var quoteContent;
var quoteTitle;

$("#newquote").click(function(){
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=30&jsonp=mycallback", function(a) {
    $(".quotearea").empty();
    $(".quotearea").addClass("border");
    quote = a[Math.floor(Math.random()*a.length)];
    quoteContent = quote.content;
    quoteTitle = quote.title;
    $(".quotearea").append(quoteContent + " " + quoteTitle);
    $('.tweetquote:hidden').show();
  });
});

$('.tweetquote').click(function() {
  window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(quoteContent) + (encodeURIComponent(quoteTitle)));
});

Using encodeURIComponent:

Without encodeURIComponent:

As you can see, when it hits the first apostrophe (or dash, etc.) the string cuts. I can understand why, it’s because it’s not being escaped. However using the URI Encode makes the string look funny and coverts the characters to &sdf4; (or whatever the heck it is).

Any help would be fantastic.

Thanks,
James.

#2

Hi, you have to extract the text out of HTML code. You could pass your ‘quoteContent’ through an extractor like this one proposed by Rick Hitchcock, to obtain a plain text version of the quote. I’m a newbie, and maybe this is not at all the best solution, but I hope this could be helpful.

#3

Sorry this is so late, you seem to have flown under my radar.

Add www to your twitter link, like so:

https://www.twitter.com/...

As for removing the <p> tags, just run the replace string method

quoteContent = quote.content.replace(/\<\/?p\>/, "")
#4

Hi guys, thanks for the feedback. Removing the p tags worked perfectly. However I am still struggling to fix the bug where the string stops after encountering a strange character.

I figured out that the tweet stops because it encounters ‘Curly quotation marks’. So I did a google and found this:

I tried his solution, however it still doesn’t work. Here is a code snippet from the project:

quoteContent = quote.content.replace(/(<p[^>]+?>|<p>|<\/p>)/img, "").replace(/“/g, "\'").replace(/”/g, "\'").replace(/‘/g, "\'").replace(/’/g, "\'");
    console.log(quoteContent);

I check the console and notice that the p tags have been removed. Great! Oh wait, the HTML entities are still there (&8220, &8221, etc…).

I have tried so many things… I just don’t know why it’s not working! Argh!

Any more solutions would be great.

Thanks,
James.

#5

Do you have your project in CodePen to share?

#6

I do, however the functionality isn’t working working as expected. When generating a new quote it doesn’t seem to appear. Perhaps it just needs to be run in your own environment; I’m not sure.

Anywho enough blabbing here it is:

#7

Hi! To make it work, you have just to change http: to https: into your getJSON url.
For the other issue, you can add an extractor, something like
extractor = function(parameter) { var span= $('<span/>'); tweet=span.html(parameter).text(); };
and then call it with quoteContent as the parameter. Then you have just to replace quoteComponent with tweet in the twitter buton handler.

You should probably replace your tweet button with an anchor tag with terget="_blank" instead of that ‘window.open’. Take a look at the Twitter API documentation.

#8

Hello,

Thanks for your help, it’s almost there. Just a couple of questions:

  var span = $('<span/>');
  tweet = span.html(string).text();

How does creating and returning a span element help with my situation? I am struggling to get my head around it.

Also, the characters are being converted nicely when I console.log, however when I tweet the quote, the curly apostrophes are now replaced with ‘?’. See screenshot below:

818f82d5f97a477642b32900c7b5f0cd.png802x185 6.68 KB

Perhaps this is just an error with twitter intents failing to recognize those characters. So as a result I tried my previous solution:

  tweet.replace(/“/g, "\'").replace(/”/g, "\'").replace(/‘/g, "\'").replace(/’/g, "\'");

However the characters aren’t being replaced for whatever reason.

Full pen is here:

Thanks again for the help!

James.

#9

I fixed it!

  tweet = span.html(string).text().replace(/[\u2018\u2019]/g, "'").replace(/[\u201C\u201D]/g, '"');

It was just a matter of using escaping the actual unicode characters!

Thanks for your help, guys!

#10

@dem-s’ answer should work and is a better solution than your regex one - what if you find more unicode characters that break your code? Will you just add more and more regex replace?

The only reason you create a temporary span element and add your string as an HTML code (.html(string)) is to get its text content with .text(). This way you strip every unnecessary characters.

The reason your extractContent() function didn’t work is because you never used that. You called it but its return value had never been assigned to your quoteContent variable:

quoteContent = quote.content
extractContent(quoteContent); /*** Oops ***/
quoteTitle = quote.title;
$(".quotearea").append(quoteContent + " " + quoteTitle);

It should be:

quoteContent = extractContent(quote.content)
#11

Hello!

Thanks for your answer, that makes a lot more sense and as a result I have cleaned up a few more lines of code!

Thanks,
James.