In order to create a timeline widget, you’ll first need to log into your Twitter account. Once logged in, the quickest way to create a widget is to visit the account page, on Twitter, in which you want to be the source of the widget. We’ll go to twitter.com/lynda, then click on the options (gear) icon and choose “Embed this Profile.” Once you click “create,” the widget is now part of your Twitter account, and you can begin to set more options for the widget.
- [Voiceover] Now to begin our project, let's start by going to the exercise files. Let's select the index.html, and let's open this up in your favorite text editor. Once you have this open you'll see all of the html in place for the basic page layout. Down here near the bottom you can see an HTML5 aside element with a line here that says timeline goes here. The aside element is sitting at the same level as the article element, so they're siblings. And they're both inside of a main section element. You can also open this page up in a browser to see what the design looks like so far.
My particular text editor has a built-in preview, so I'll use that. And here we can see a banner across the top. We can see our content in the article element here, and the aside element over here to the right. I did use percentage space measurements, so this will resize as we change the browser width. So now before we can add any html into the html page, we're going to need to go over to Twitter, log in, and create a widget. So at this point, switch over to your browser, log in to your Twitter account. One of the quickest ways to create a widget on Twitter is to visit the account page that's going to be the source of your Twitter feed.
So in this case we're going to got to the lynda.com handle for Twitter. Typically people use the term handle or account, and that is the at symbol here. So @lynda is the main lynda.com Twitter handle. And the URL for that account would be twitter.com/lynda. And then once you're on the page that you wanna use as the source for your widget, you can click on this gear icon, and then come down and choose Embed this Profile. And then we'll be able to set additional properties for the widget inside of our Twitter account.
So back in the browser I'm gonna come up here on the twitter.com page. After twitter.com in the URL, I'm gonna type in lynda, press return. So now this is the main lynda.com Twitter page. We'll come over here, click on the gear. Let's come down and choose Embed this Profile. Now on this page we can define further properties for the widget that we just created. So under timeline source, by default we have a User timeline. This links to a specific account.
We can also choose other sources, such as Like, List, Search, and Collection. Later on in the course we'll be using the Search option to combine two different accounts. So let's come back here and keep this as User timeline. We'll type lynda.com back in there again. You can also choose whether or not to exclude replies, and to auto-expand photos. For height, if you don't set a height property here, the default will be 600. I'll come in here and change this to 500.
And then for the theme we can pick between the dark and light theme as well. And as you make changes you'll see a live preview over on the right. And later on in the course we'll be overwriting some of these properties as well. So for now, let's come down here, and click Create widget. Now this will save this widget to my account. Over here under the preview I can see some html markup that we can use in our html file, which we'll do next. And up here at the top I can see a message that says, "Your widget has been created." I'll just dismiss this. And if we scroll up to the top, we can click on this button here that says Back to widget settings.
So if we go back to our widget settings, we can see all of the widgets that we've created that are related to our account. And then right here we can see the user account widget we just created for lynda.com. And so now that we've created the widget, next we'll edit this widget, go grab that html code, and put it into our page.
The practice files are free to all members. Download them and get started designing the web today.