#19: Designing a Unique Page for Twitter Updates

This week I take you through the creation of simple webpage to display your recent 'Tweets' from Twitter from start to finish. This covers the design in Photoshop, to including the javascript stuff provided by Twitter to the markup, to the CSS to style the page.

Links from video:

Update (October 2012)

The JavaScript provided by Twitter that we used in this video no longer works. However, I quickly updated the demo to use their new provided widget. While my integration in the new demo might not be as nice as it was, the JavaScript is actually much nicer, easier, and comes with modern Twitter features, like favoriting and retweeting.

You can also play with the new JavaScript widget on this CodePen.


  1. azmodan
    Permalink to comment#

    Is there a way to prevent the scrollbar from apearing on the custom layout?

  2. Joe
    Permalink to comment#

    Hi, Chris

    i cant seem to see “Put you update on your site” button anywhere once I’d log onto my twitter account?


  3. Seth
    Permalink to comment#

    Oh no! It appears that this broke this morning.

    It’s a shame, I really liked this little widget. Does anyone have any suggestions? .

    • Graham
      Permalink to comment#

      Still broken…
      It appears to be happening with every piece of twitter code I try, which makes me think the problem is on Twitter’s end.
      Give it up for reliability! (That goes for Facebook too)

  4. Chris
    Permalink to comment#

    Damn, too late to the party I suppose. Real shame, I would have loved to implement this on my brother’s site.


  5. spicko

    Put you update on your site button is gone..do we have to use the widgets now?

  6. Paul
    Permalink to comment#

    This just stopped working for me today. From the previous comments it looks like this may have happened to others before. Does anyone have any thoughts?

  7. Martin
    Permalink to comment#

    This just suddenly stopped working yesterday. Has anyone got it to work again? or did twitter change the API or something? thanks

  8. Brian
    Permalink to comment#

    I had just implemented this last month, and it seems to have stopped working. Did twitter phase out yet another API?

  9. Paul
    Permalink to comment#

    I found a similar solution, still working, easy to implement and customize here.

  10. Clinton Thorncraft
    Permalink to comment#

    Hi Chris,

    It looks as though the link to the demo you’ve provided in the October update is linking to your local dev environment (http://css-tricks.whatup/examples/TwitterPage/).

    As hard as I try, I can’t get to css-tricks.whatup :P

    The Codepen one works fine though.

    Thanks again for all the awesome work you do.

  11. Jessica Lacy
    Permalink to comment#

    Is there any way to use this to create a tweet carousel with owl carousel?


  12. Priya @ Travel Bharat
    Permalink to comment#

    It appears to be happening with every piece of twitter code I try, which makes me think the problem is on Twitter’s end.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.