So I’ve just recently started using Twitter. I figured that I better hop on the train before it completely pulls away! Also, I figured that in the future that I would have clients that would want to integrate Twitter into their sites. So if you take a look at toward the bottom right of our site you’ll see our little Twitter feed. Well you should see our Twitter feed. I’ve been noticing on our site as well as other sites that Twitter doesn’t always show up due to their server. So many people are using Twitter now so sometimes it gets slow.
After that has been selected you have a few options before you grab the code. You get to select how many updates you want to show, if you want to show a title, and then the code. A cool part about this page is that you can adjust the first 2 options and the box with the code will update automatically for you as well as the preview. So for our example on this site we only want to show the latest Twitter update so we’ll set that option to 1. And we don’t want a title so we’ll check the ‘No Title’ option. After that we’re ready to grab the code. But we can’t just drop in the code as is. We want to take the 2 <script> tags and put them right above the closing <body> tag. Then next is working with the HTML to put the feed on your site.
As you can see on our site we didn’t just want to throw up the code. It’s really easy to add just a little bit of dynamic to the look quickly so let’s take a look at what we’re trying to make. After working with the CSS and pasting in the code from Twitter we get our final result. But then after heading over to the W3C to check validation we get a big old Invalid page. What the heck? We took the code right from Twitter…
And thats it! All we needed was an <li></li> in between the <ul></ul> to make it work!