Having trouble with the tweet button for the random quote project [Solved]

1

I’m nearly finished with my random quote generator, however I’m having issues getting my tweet button to work properly. Nearly everything (hashtag, link back, via) works, except for the function I’ve written to dynamically set the “data-text” attribute.
My Javascript:

function tweetQuoteButton(){
    var test = "loremipsum"
    var tweetURL = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(document.getElementById("quote").textContent) + " -" + encodeURIComponent(document.getElementById("author").textContent);
 document.getElementById("tweetButton").setAttribute("data-text", "test");
};

My HTML:


Tweet

I’m not using codepen, but I am using github which you can view here.

I know I’ve got to be close, so any direction would be wonderful. Thank you!

Edit:
I’m wanting it to populate with the current displayed quote. I tested that particular snippet and I know it works, so for simplicity’s sake I’m trying to get the variable “Test” to display instead of the page title when you click the twitter button.
I’ll edit my original post to avoid confusion!

2

So what does it do and what do you expect it to do?

3

href attribute should be set to url that grab data, and onclick will execute function that wil l grab that url and you can grab that div to display it on a page. This way its really unusual code that puts custom element data-text to content retrieved from url. And anyway you need to grab data which is in JSON format to be parsed then displayed inside div. Use jQuery instead of vanilla javascript :slight_smile:

4 
<script>
   $(function(){
          $.ajax({
               method:'GET',
               url:'<quote url here>',
               success:function(data){
                         // grab div to display data
               }
          });
       });
</script>

You can certainly mix javascript and jQuery but for data retrieval libraries like jQuery is written for among easier DOM manipulation. Dig into jQuery, doing it in raw javascript can be difficult.

5

Ah, my bad! I’m wanting it to populate with the current displayed quote. I tested that particular snippet and I know it works, so for simplicity’s sake I’m trying to get the variable “Test” to display instead of the page title when you click the twitter button.
I’ll edit my original post to avoid confusion!

6

Thank you for the help! I’m not sure if I’m ready to abandon vanilla javascript quiet yet. I’m a little confused by what you mean by quote URL- I’m using math.random() to generate a random quote from my array. I’ve figured out how to grab the randomly generated quote, but I’m having trouble populating my tweet button with it. I’m not sure why setAttribute isn’t working. (I feel like I should clarify- I have var test inserted at the end of my setAttribute instead of tweetURL for testing’s sake.)

7

Thanks everyone for your suggestions! I actually ended up completely scrapping the twitter generated button and created one from scratch using twitter web intents! I think the twitter API was messing with my code because it works swimmingly now!

Check out the project on github if you want to see how I solved it! Link

1 Like
8

@annabanandit

I had similar issues when I was setting mine up. the problem is that if you are using the twitter script to create the webintent, it runs before the page has loaded, so therefore it changes your ```` tag into their iFrame with the link and everything before you can pull your quote and change the link to carry your quote through the the tweet.

I did manage to find a solution, which involved adding in functions to delete the iFrame after it was created, change the href for the tweet and then re-run the twitter script to recreate the iFrame with the updated quote.

If you are interested in taking a look, here my project with the code: https://codepen.io/Ngoldberg/pen/GmJZpX

Good Luck.

  • Nao
1 Like
9

Thank you so much for your comment! It’s so gratifying to hear my hunch was correct! I ended up ditching the default twitter button and designing something that ended up fitting in with the overall UI better anyway.

1 Like