Tweet link behavior strange - Random Quote Generator

JavaScript
1

Weird/frustrating issue. I have the following code in my HTML to display the Tweet button:

<div id="twitter">
     <a class="button" id="tweet-quote" data-show-count="false">Tweet</a>
</div>​

This technically works, but the button is just text with a hyperlink. When I try to stylize the button for Twitter like so:

<div id="twitter">
     <a class="twitter-share-button" id="tweet-quote" data-show-count="false">Tweet</a>
</div>​

The button shows up correctly, but when pressed, it brings up a Tweet dialog box with “Quote Machine” (the title to my index.html) instead of the quote and author.

Here is some of my JavaScript code:

function getQuote() {
  $(document.body).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
  $.ajax({
    type: "POST",
    url: "https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous",
    responseType: "json",
    success: function(response) {
      showQuote(response);
      $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?text=' + encodeURIComponent('"' + response.quote + '" - ' + response.author));
    },
    error: function() {
      alert('Error retreiving quote');
    },
    beforeSend: setHeader
  });

  function setHeader(xhr) {
    xhr.setRequestHeader("X-Mashape-Key", "pmTSpn6I45mshpuPkHokTQ01lAo1p1ugEH1jsnoOS19Gk3KQvB");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Accept", "application/json");
  }
}

After hours of trying to figure this out, I’m at a loss. Any help would be greatly appreciated. Thanks.

Edit: If more code is needed, my GitHub repo is here: https://github.com/gmengler/RandomQuoteGenerator

2

Uhm…actually i did never see that ‘createShareButton’, it’s cool! Anyway, reading the docs:

twttr.widgets.createShareButton(
  '/',
  document.getElementById('new-button'),
  {
    count: 'none',
    text: 'Sharing a URL using the Tweet Button'
  }).then(function (el) {                                 // <--- I can't see this in your code
    console.log("Button created.")
  });

Since every create function return a promise, is like you’re missing the callback part if i’m not wrong ( which it could be at all :open_mouth: )

1 Like
3

Ah whoops, so that’s old code, just forgot to push my newer stuff. That code actually worked, but since it was under my “getQuote” function, it would create a new Twitter button every time you press “Get Quote” and just append it to the page.

4

Bump - here’s the full HTML and JS code:

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Quote Machine</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="./app.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css">
  <link rel="stylesheet" href="index.css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>

<body>
  <div id="quoteBox" class="col-md-6 col-md-offset-3 text-center">
    <h2>“What a curious power words have.”</h2>
    <p>- Tadeusz Borowski</p>
    <div class="panel panel-default">
      <div class="panel-body">
        <p id="quote"></p>
        <h4 id="author"></h4>

      </div>
      <div id="twitter">
        <a class="twitter-share-button button" id="tweet-quote" data-show-count="false">Tweet</a>
      </div>​
      <!-- <a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank">
        <i class="fa fa-twitter"></i>
      </a> -->
    </div>
    <button id="getQuote" class="btn btn-primary btn-lg round btn-block">New Quote</button>
  </div>
</body>

</html>

JS:

$(document).ready(function() {
  // Loads quote on page load
  getQuote();


  $("#getQuote").click(getQuote);
});

function getQuote() {
  $(document.body).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
  $.ajax({
    type: "POST",
    url: "https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous",
    responseType: "json",
    success: function(response) {
      showQuote(response);
      $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?text=' + encodeURIComponent('"' + response.quote + '" - ' + response.author));
    },
    error: function() {
      alert('Error retreiving quote');
    },
    beforeSend: setHeader
  });

  function setHeader(xhr) {
    xhr.setRequestHeader("X-Mashape-Key", "pmTSpn6I45mshpuPkHokTQ01lAo1p1ugEH1jsnoOS19Gk3KQvB");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Accept", "application/json");
  }
}

function showQuote(response) {
  console.log(response);

  $('#quote').text(response.quote);
  $('#author').text(response.author);
}

var colors = [
  '#4286f4',
  '#f4417a',
  '#58f441',
  '#41f4f4',
  '#f1f441'
]
5

Ok, so…i downloaded the code and tried to get it to work…unfortunately, i wasn’t able to get rid of the “twttr.widgets is not defined”: looking here and there i found this ( maybe) clarification statement:

To use Twitter counter widget and other Twitter related widgets, you need OAuth access keys.

from themeFactory: how to generate twitter stuff.
It’s a company that builds wordpress sites, i don’t know why it doesn’t appear the link of the official twitter documentation while googling…anyway, as far as i can see the functionality you’re triyng to use is restricted to the api registered user ^^ Obviously you can go further and explore the twitter API’s world, but for this challenge is not required at all.

In your code i saw a shareTweet function: that’s a more usual way to achieve the result (you can collect more information here: twitter documentation - tweet button).
This is the string to use, i just added what was missing
var twtLink = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(response.quote + " " + response.author);
Bind this function to an event listener and you’re done ^^

P.S:
I like your random quote app! Minimal style, minimal code and every functionality it needs, in my opinion gj!

6

I had the same problem of the new Tweet containing the page title instead of quote. I found it far easier to remove all the stuff that was provided by the Twitter Dev site. Just create your own button, style as you please and populate the url attribute from your JS (Just as the above reply finishes with).

7

Thanks guys - ended up just styling my own button and was able to plop a Twitter icon in with it.