Hi all, I am working on the Random Quote Generator and have got most of it the way I want it – except I can’t make the Twitter API work. It successfully opens a post-to-Twitter window, but the tweet is not pre-populated with the current quote.
I followed the instructions here (https://dev.twitter.com/web/tweet-button) (under “How to add a Tweet button to your website”) and took the advice of another camper who suggested using encodeURIComponent to make the URL work. That’s where I’m currently stuck at.
Tangentially related issue: I don’t like the automatic styling of the Twitter button, and would prefer to make it match the “get new quote” button instead. Can anyone advise me on how to override default Twitter button styling?
I have a hard time following your code on codepen. I was reading the JS pane before I realized that you also have JS in your HTML pane. Looking in the browser console, I can see that you your css and js files you are trying to load in your HTML (jQuery, etc.) aren’t loading because you are trying to use the path you used when you built this locally. But codepen likes you to use their loading - or at least use a remote link.
Whenever something isn’t working, the browser console is the first place I check - in fact I usually have that open whenever I’m coding.
I’d fix those problems and then reorganize things in a more codepen-friendly manner. Then let us know if you are still having issues.
Hi Kevin, thanks for taking the time to respond to my issue. If you check out the link I included to the Twitter tweet button docs, you’ll see that Step 4 says “Asynchronously load Twitter’s widgets JavaScript using our loading snippet.”
If I’ve understood that (and the link it leads to) correctly, they’re prompting me to insert their predefined widgets.js script – which I copied right from their docs, where it appears within an HTML script tag.
So, that script that you see at the bottom of my HTML is their script tag, in line with their instructions. All my own JavaScript is located in my separate JS file. I would love to figure out a different way to get the Twitter functionality if possible, but right now this seems like the default way. Any suggestions to get around it?
Re: the CodePen issue, I’d like to get the stand-alone full functionality working first, because I find CodePen very restrictive. That’s a good tip to edit the reference to my JS file to remove the reference to my “scripts” folder for when I eventually want to make the reduced CodePen version work – but for now, focusing on my GitHub version, I think the file structure ought to be okay.
I should add how I found the bug – find the button to open the “Console” and you will see an error that “$” is undefined. That means the CodePen is unaware of jQuery.
So I’ve been working on this for the past 2-3 days trying to get my own to work. I am not using jQuery so just bear with me. This is what I have found to work for me.
1.) Getting rid of the default styling of the Tweet button - delete/change the class name. I did this and had no issues.
2.) Below is how I set up my tweet button: <a id="tweetQuote" class="btn btn-outline-primary" href="https://twitter.com/intent/tweet?text=" data-show-count="false">Tweet This<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script></a>
Pay attention to href in the anchor tag. I ended the text= part early so that I could insert what I wanted with JavaScript.
I don’t want to give too much away but basically this is what I did.
Create a function to push the tweet
Create a local variable (myTweet) to store my quote’s textContent
Using the DOM I grabbed the button and changed the href = https://twitter.com/intent/tweet?text=${myTweet}
Then I just added an event listener on my anchor/button so that every time it’s clicked my function runs.
Let me know how this works out for you and if needed I can show you my Codepen (once I upload it).
Re: the CodePen issue, I’d like to get the stand-alone full functionality working first, because I find CodePen very restrictive.
Hmmm. I actually find it easier to go the other way. Codepen is codepen and it has its own way of doing things. Yes, it’s restrictive and it holds your hands too much. But for a project this small, it is quick and dirty. Codepen is great for writing small pages like this. And when you want to export it, there is the export button on the bottom right that will give you a zip that sets up all the files for you. Going the other way is complicated because you have to set things up in a codepen friendly way. And maybe there is a way to set up multiple script files linked all together in codepen, but I don’t know what it is.
For a large program codpen might not be ideal, but for small little things like this, it works great. But you gotta play by its rules. Which aren’t too bad is the program is small.
Thanks so much to everyone for your replies! Reading them all helped me push through that final stretch and finish up the app. It turned out that my problem was a simple one: I’d been using setAttr() as a jQuery method, instead of the correct version, attr(). Whoops!
@asg5704, I actually found your explanation very clear and helpful. Thank you! Changing the class name for the tweet button did indeed fix my styling issue.
@merobu, thanks for the tip about how to add jQuery to the CodePen version of the project. That worked!
If anyone wants to help me out by test-driving the Quotifier again, I’m pretty sure it ought to be functional now (if a little slow) – but any bug reports would be much appreciated.
It looks good. The only thing I might suggest - if you want to get fancy - is to not have two of the same quotes in a row. In other words, check to see if the new quote is the same as the old quote and if it is, generate a new random number. I don’t know, I don’t think I did this, but since the pool of quotes is so small, I had a bunch of repeats. But it’s not a big deal.
