Having a bit of trouble with tweet javascript

Hey everyone,

I’ve been playing around with this project for what seems far too long (a couple of days). I think that this is because I’m still piecing together my Javascript.

I have a couple of things I need to solve before moving on:

  1. Getting my Twitter call javascript to work. Does anyone have pointers to reference samples? I wasn’t finding useful examples for my current skill level.
  2. Want to ensure a consistent height so that the buttons at the bottom don’t jump around so much when I return the quote and author. Any tips on doing this within a row-fluid div?
  3. Stil need to add relevant images - was going to do that within the lower right background of the jumbotron box, but not sure how that will display within smaller devices within the responsive framework

Click through to the project.

Adding a Twitter button is quite easy as you can simply create a link with your URL-encoded quote added to your link’s href attribute. Obviously, you need to update this every time you generate a new quote.

The link looks like this:

https://twitter.com/intent/tweet?text=YOUR+QUOTE+HERE

It seems you use Bootstrap so a simple button looks like this:

<a href="https://twitter.com/intent/tweet?text=YOUR+QUOTE+HERE"
   class="btn btn-info btn-lg"
   target="_blank">Tweet It!</a>

You can find more info about it at Guides | Docs | Twitter Developer Platform

Consistent height of what? You can use the height property…

A bit more frustration here - I see that the version of my page displaying is the earlier version from this morning, not the version I thought I had finished with this afternoon (changes in layout - and a twitter button that wasn’t working correctly)

did you get this resolved? :slight_smile:

Redid the work. Still annoyed by the reversion - it was a good thing I was actually doing the work in Sublime and then pasting it back into CodePen.

I got the element height working correctly, but still not getting the Twitter function to run properly. Much reading and looking at other’s code still required.

Glad you figured out how to set the height. I’ve just checked your code and it seems that you’re still using a button, instead of a simple link. Button tags don’t have any href attributes.

So, instead of <button class="btn btn-info btn-lg" ... it should be:

<a class="btn btn-info btn-lg" href="https://twitter.com/intent/tweet?text=female-tech-quote+ – +female-tech-name" target="_blank"><i class="fa fa-twitter fa-lg"></i> Share on Twitter!</a>

Now all you need to do is change the href attribute every time you generate a new code. It’s pretty easy too :wink:

Hrm. I’ve been wrestling with how to get the variable href value to work most of today. Have been reviewing the DOM structure, how to vary stuff… not working. Will trace through the console in the morning.

Am going to share a bit more of the related javascript:

I’m creating the array within my Javascript (start simple).

Then:
//assign quoteNum varable. Kept it global to access elsewhere in the script

var quoteNum = 0;
function randomNum(quoteNum) {
//run function to assign the quote number
quoteNum = Math.floor(Math.random() * 10);
//print num to check result
console.log(quoteNum);
return quoteNum;
}
//call the functions
function whenClicked(quoteNum) {
randomNum();
//call the values from the array and assign to the elements
document.getElementById(“female-tech-quote”).innerHTML = quoteArray[quoteNum][0];
document.getElementById(“female-tech-name”).innerHTML = quoteArray[quoteNum][1];
document.getElementById(“female-tech-note”).innerHTML = quoteArray[quoteNum][2];
}

function dynamicURL(quoteNum) {
//also assign the values to a string for twitter
var twitterURL = “https://twitter.com/intent/tweet?text=”+ quoteArray[quoteNum][0] + " – " = quoteArray[quoteNum][1];
var result = str.link(twitterURL);
document.getElementById(“tweettext”) = result;

}

The different parts of the quote, the womens’ name and the associated notes are called by element ID.

That doesn’t transpate when I use the element ID in the twitter button call. I’ve tried creating a string within my Javascript that adds the variable values to the http string, but that isn’t working.

I get “female-tech-quote” - “female-tech-name” as strings within the Twitter tweet message box, but they aren’t showing the array values as they change with each call from the array.

The last equals sign should be a plus sign here.

What you’re trying to do with that str.link() is not the best option and I don’t think str is declared anywhere.

str.link() works like this… If you have a string like 'Tweet It' and another string 'http://twitter.com', it creates a new string which can be added with innerHTML to your page, making it a clickable link.

let twitter = 'Tweet It'
let href = 'http://twitter.com'

let link = twitter.link(href)
/* link is now <a href="http://twitter.com">Tweet It</a> */

On the other hand, updating the href attribute is as simple as this:

document.getElementById('tweettext').href = 'http://example.com'

Now, if you click on #tweettext, it goes to example.com. So, it should be easier to simply update the href in your whenClicked() function :slight_smile:

Make sure to use the address https://www.twitter.com - that www is important. Also, use the function encodeURIComponent() on each of the array items you are appending to the URL.

var twitterURL = "https://twitter.com/intent/tweet?text="+ encodeURIComponent(quoteArray[quoteNum][0]) + " – " + encodeURIComponent (quoteArray[quoteNum][1]);

I had wondered about that. Came across the function in my reading - and tried it out, but couldn’t get it to work while messing around with it yesterday.

That’s probably because you were missing the www from the Twitter link. Without it, Twitter’s server will redirect your request, which re-encodes the URL and will screw up your text parameter†. Of course, this doesn’t stop Twitter from giving developers the exact address you’ve been using in their official documentation, making this a frustrating experience for campers in particular.

† I’m pretty sure this is what happens, as others have said as much on StackOverflow et al., but it could just as easily be unicorn magic.

Justed tested the change - the twitter link works with and without the www. The issue I’m having appears to be linked to how the text is being added to the string.

Am debugging right now. Am using Sublime, not CodePen as the view screens are larger and easier to read on my little laptop. To do that, I’m calling all the scripts from within the header (properly formatted).

Am getting an error when attempting to call https://platform.twitter.com/widgets.js. Is it possible that that is an incorrect source address as well?

It’s going through to a minified js source.

That depends - what is the error?

Two distinct errors, it turns out.

The browser console shows:
GET file://platform.twitter.com/widgets.js net::ERR_FILE_NOT_FOUND
The page is looking for the file locally - when the addressing is to the source site.
This is using Sublime 3.

The second (which was the one I was attempting to trace) is:
pickQuote.js:72
Uncaught ReferenceError: documentgetElementById is not defined(…)
whenClicked @ pickQuote.js:72
onclick @ quote_page.html:37

Let me know if I should post all the code.

Are you sure you included the https part?[quote=“Velochic, post:16, topic:50806”]
Uncaught ReferenceError: documentgetElementById is not defined(…)
[/quote]

There is a dot missing from document.getElementById().

The missing period was the issue. Sharp eye! I had missed that. :slight_smile:

Values transferring properly now.

Now have to figure out how to strip out the HTML I so carefully added to some of the women’s names. Next challenge!

Back again with this project. Took me a while, but I wrote a bit of javascript to evaluate the length of the tweet string, and to trim it by one sentance if it was going to be too long combined with the author’s name.

I built it in JSFiddle, and got it working using console.log() to check results. Twitter link errored out there. https://jsfiddle.net/Velochicdunord/bm9pney0/
Brought it back to my local Sublime setup, and failed to get the twitter window opening properly.

This remains an issue when I brought the code snippet back to my codepen, switching to instruction to open aa new window instead of calling the document DOM. http://codepen.io/Velochicdunord/pen/NbPrea?editors=1010

What am I missing? "Cuz I’m not seeing it.