Grow your CSS skills. Land your dream job.

#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.

Comments

  1. 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?

    Help.

  3. 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. Damn, too late to the party I suppose. Real shame, I would have loved to implement this on my brother’s site.

    Cheers,
    Chris

  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. 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. 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.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".