Random Quote Generator Project - Twitter API share button issues [SOLVED]

1

So I have been struggling working with the api’s for this project for a bit now. I got some help and was able to get the quote api working. However, I am struggling with the twitter api.

I have read the twitter api documentation as well as done some searches both on here and on the web. But I just cant seem to get my twitter button to share the quote. the button works, I mean you can click it and a little window opens and has a link to my codepen page, but no prepopulated quote text.

If you look at my code I have tried several different things, changing the attr (href, data-url, data-text) but none of it is working.
(On a side note, please dont judge my complete lack of design. I knew I woudl struggle with the api’s so I wanted to focus on getting the functionality setup before I messed with the aesthetics of the page

my project link: http://codepen.io/Ngoldberg/pen/LWKOVx/

Anyways! Thanks for your help in advance! <3

  • Nao
2 
    You are doing POST instead of GET in your ajax call. Replace it and you will get quote.

    I really mashed it up but here :slight_smile:

    $(document).ready(function() {
      var quote, twitterURL;
      var getQuote = function() {
         $.ajax({
          url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies',
          headers: {
            'X-Mashape-Key': 'O7iTZLDUmYmshesEET9FNisKTATLp1o1RWdjsnVv0D9SKqXw9w'
          },
          method: 'GET',
          dataType: 'json',
          contentType: 'application/x-www-form-urlencoded',
          success : function(data){
            quote = data;
             $('.q').html(quote.quote);
             $('.author').html(quote.author);
             var encodedTweet = encodeURIComponent(quote.quote);
             twitterURL = "https://twitter.com/intent/tweet?text='" + encodedTweet + "'";
             $('#twitter').attr("href", twitterURL);
          }
        });
      };
         function setQuote(url) {
            window.open(url);
      }
      $('button').on('click', function() {
          getQuote();
      });
      $("#twitter").click(function(){
        setQuote(twitterURL);
      });
    });


    And in html ::

   <div class="q" id='q'>
  Quote Goes Here
</div>
<div class='author'>
  Author Goes Here
</div>
<button id="button">Get Quote</button>
<a id="twitter" href="" target="_blank">
Tweet</a>
3

You can also do the tweet with a url, as I did:

function tweetQuote() { 
  var url = "https://twitter.com/intent/tweet";
  var text= "\"" + document.getElementById("quoteDisplay").textContent + "\" " + document.getElementById("authorDisplay").textContent;

  var hashtags = "fCC,quote";

  window.open(url + "?text=" + text + ";hashtags=" + hashtags, "width=500,heigth=300");

}
4 Likes
4

I was really hoping that I wouldn’t have to do the tweet with a url, I was hoping to be able to do it the way the api documentation seems to say how to do it.

I get quotes, I can see on my console that I am passing the quote into an encoded state and properly attaching it to the href for the twitter button, but when you click on the button… it doesn’t process that new href to populate the text of the tweet.

  • Nao
5

In any case you are constructing url to tweet…
Since you are returning asynchronous function - getquotes is returning ajax call, my tip is to dig little deeper in async with Ajax, because it is doing retrieving data separate from main code. Then you see if the order of function is executed in the order that you wish. If I have time later I will debug it, but my point is that you have to understand at least a bit code that you write or you can just copy/paste from net which won’t get you far. Good luck !

6

@ksjazzguitar
thanks for the tip. i tried it but I always get a full size window when I make the tweet. Do you think you could help me?

7

Yeah, i hear you. I was following the information in the documentation from the twitter api. But, upon further disection and searching I’ve found that the issue is that the twitter api’s script runs first before anything in the document so thats whats tripping up my ability to modify the a tag.

  • Nao
8

Sorry, that’s a little outside my ken. The original opens up a new page so I just went with that. An ajax put would be more elegant, but I’ll have to wait until I know more to try it.

9

You need to include the Twitter JS library in your scripts. That’ll get you where you need to be.

10

OK. All after scouring the internet for solutions. I have found a way to use the twitter API and be able to dynamically change the pre-populated text YAY!

check it out if your interested: http://codepen.io/Ngoldberg/full/PpMvgm/

1 Like
11

Cool, good job.

Assuming this is your pen (the one you provided isn’t working), just as a matter of style, you shouldn’t have that script tag in your HTML. The codepen way is that there are not script or style sections in your HTML - those get put in the JS and CSS panes respectively. It won’t change how it works, but it is how codepen likes to do things. The same goes for the lines you added to settings/HTML/stuff-for-<head>.

And you load JQuery twice.

But still good job figuring out the twitter thing.

12

AFAIK for tweeter intents the optimal window size is 550x420. It might just look better :slight_smile: