3.4 Add a Carousel of Tweets

Hey, welcome to the last lesson of Up and Running With AMP. In this lesson we're gonna take two of AMPs custom elements and we're gonna combine them to create a carousel of tweets. So, you already know the reasons for using all of these elements at this point times, so we're just gonna jump straight into coding them out. Down at the bottom of the code that we have so far, just above the AMP font element that we've added in earlier, we'll need a new div with the class twitter_carousel_wrap. Inside that we need a div for the class standard_width and standard_padding, and then we'll just add an h2 heading, create a carousel of embedded tweets. The first thing that we're gonna do is pick out three tweets and embed them into the page using the AMP Twitter element, but this one works very similar to the AMP YouTube element. And, once again, it gives you all of those background optimizations. So, head to the docs page for amp-twitter, we'll copy our code snippet, that into our head with all of our other JavaScripts that we're loading in, and now we can start embedding our tweets. And this is all gonna look pretty familiar at this point in time, so we're gonna add in amp-twitter, the opening tag, and then we're gonna close that tag off, and then this is where it's similar to the YouTube element. We're gonna add data-tweetid =. To get a tweet ID, you'll need to go to the prn link of an individual tweet and that's gonna look something like this, and then at the end of the URL, you see a long string of numbers. And that's the ID that you're looking for. So, I copy that and then paste it into the data-tweetid attribute. Now as with everything in AMP, we're gonna need to provide a width and height, so that it knows how to lay the page out while the tweet is still loading in. We'll give this a width of 390 and a height of 500, and that is all you have to do to embed a tweet into an AMP webpage. So let's go to our preview and see how this looks, and there's that tweet loaded into the page. So now, we're gonna add another two of these so just copy and paste the code that you already have another two times. And I have a couple of ids here that I grabbed earlier. You can either find tweets of your own that you'd like to embed here or you can just grab these ids from your source code. Now, if we go back to our front end, we can see all three of our tweets are in our page. So, that's it for embedding the tweets. Now, we're just gonna go through and use an example of how you can combine different elements. When you start to bring all of these together, you can do some really interesting things. So, we're just gonna make some space above and below and indent the tweets that we have embedded because we're gonna wrap this with an AMP carousel element. And, as usual, before we can make that one work, we need to head to the documentation page for amp-carousel, grab the appropriate code snippet, and drop that into our head with all the others. Now, before all of that tweets, we're gonna open up our amp-carousel element, and then we'll close it after those tweets. So, that's gonna make a carousel out of any items that are placed inside the opening and closing tag. We still need to add a couple of attributes to our carousel though. First, we're gonna specify that we want this carousel to be a slideshow. And we're doing that by setting type = slides. And I'll link you to the docs for this element, so you can see what the other options are there. Now, we're gonna set our width, and even though the actual tweets are only 390 wide, we're gonna set the width to 600. And that's because with this carousel, there's gonna be some little handles to the left and right to allow people to page through the carousel. So, we need to allow space enough for those to fit in. But, the height we'll set to match all of the tweets. We'll set that to 500. Next we're gonna add the attribute delay and that tells AMP how long you want the first slide to appear before it starts cycling through to the next slide. In our case we're gonna set that to 4000 milliseconds. And then, finally, we're just gonna add the attribute, autoplay, at the end here. This doesn't need a new value. This is just a true or false so if it's in there, this carousel is gonna autoplay. All right, let's check out what we've got. And then, there's our first tweet loaded in. We can page right to go through this carousel and look at each one of the slides. We can page left and go back through it. And, I'll just refresh so you can see that timeout before it goes into autoplay. So, it loads up and then the autoplay kicks in. And that's it, that's last thing that we're gonna be adding into our page. And that wraps up the final lesson in the course. I hope you'll join me in the final video. I'm gonna quickly summarize everything that you've learned through these ten lessons, and I'm also gonna point you to a couple of other tutorials and resources that should help you as you continue on with developing AMP webpages. So, I'll see you in the final video.