Add a Twitter feed - CSS Tutorial

- [Instructor] Hi, this is Chris Converse, and in this episode, we'll spend just a few minutes loading media from Twitter directly into your webpage, using the Twitter API. Now, you can follow along with me using any webpage you might be working on, or you can download the exercise files, and in either case, open your HTML file up in a text editor to get started. Now, if you're working from the exercise files, you see that I have a very basic web layout started here, and we're going to be adding the Twitter timeline down to the aside element, here, where we can see this HTML comment. And if you'd like to preview the file we're going to be working in, you can open the index.html file up in a web browser. And now the first thing we'll need to do is open a new browser window, and let's go to publish.twitter.com. And now from this website, we can start adding some of the parameters for the Twitter timeline. So down here, under enter a Twitter URL, let's come in here and add the Twitter handle for the LinkedIn Learning site, so type https, colon, forward slash, forward slash, twitter.com, slash, capital L, capital I, underscore, capital L-e-a-r-n-i-n-g, then we'll come over here and click the right arrow. And now, based on the types of content being published by this particular author, the next step will show some of the options that we have available to us. So I'll come over here and click Embedded Timeline. We also have a few other customization options we can set here as well, so let's come over here and click on set customization options. Let's come in here, and let's set the color, so we can choose one of these, or we can type in our own. So let's set 00 for red, 84 for green, and fe for blue. Let's come down and choose Update, and now, in this field here, we'll get all of the code that we need to activate the Twitter timeline within our webpage. So let's come over here and choose Copy Code, close the confirmation window, let's go back to our HTML file. Let's come down here and inside of the aside, let's delete that HTML comment, and let's simply paste in the code we got from Twitter. And then one of the things I like to do when I'm working with the Twitter API is I like to put the attributes on a separate line inside of the anchor tag. This way, I can visually see all the different parameters that are being set. So the first one here is class, which is set to twitter-timeline. A data-link-color, and we got this by changing the color in the customization settings on the Twitter website, and then finally, the href, which points to the account that we're loading. And then the text inside of the anchor tag, which says Tweets by LI_Learning, is what we'll show, if for some reason the Twitter feed does not load properly. And then finally, we got the JavaScript tag, which points to the platform.twitter.com/widgets.js file on the Twitter server. It's this particular file that will look for the anchor tag, and activate the feed. And now, if you're loading this HTML file from a local folder on your computer, you may need to add the protocol to the source attribute in the JavaScript tag. So inside the source, right after the first set of quotes, let's type https:, keep the two forward slashes. And then once you have that in place, in the browser, you should now see the timeline loading into your webpage. If I come over here and scroll down, we'll see that a whole bunch of tweets are now being loaded from that account. And so now that that's working, let's go back to the HTML and take a look at a few other options that we can manually add in. So first, let's get rid of the header and the footer, and the borders between the tweets. So let's come in here, and after data-link-color, let's add a return, and the next attribute will be data-chrome. We're going to set that equal to, two quotes. Inside, we'll type noheader, all one word. And with that in place, you'll notice that the header is now gone from the top of the tweets. Now, back in the HTML file, let's hit a comma, space. Let's type in nofooter. Now, if we go over to our feed and scroll all the way down to the bottom, we'll see that the footer's now gone. Let's scroll back to the top, let's go back to our HTML, let's add a comma and a space. And we'll type in noborders. And now we won't have any borders in between the individual tweets. So now let's add another attribute. Let's limit the number of items loading in the page. So we can do that by typing data-tweet-limit, set that equal to, two quotes, and I'll put in the number three. So now, in our webpage, if we scroll down, we can see that we only get the latest three tweets from that particular account. And you'll also notice at the bottom of the feed, there's no longer a link that says load more tweets. And now, in a very short amount of time, we've implemented a live Twitter feed into your webpage. Now, there are quite a few more options that you can customize using the Twitter API. To dive a little deeper into some of those options, I'd recommend taking a look at our Design The Web course on adding a Twitter timeline. And so with that, I'll conclude this episode, and as always, thanks for watching.