#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. User Avatar
    azmodan
    Permalink to comment#

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

  2. User Avatar
    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. User Avatar
    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? .

    • User Avatar
      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. User Avatar
    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.

    Cheers,
    Chris

  5. User Avatar
    spicko

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

  6. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Paul
    Permalink to comment#

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

  10. User Avatar
    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. User Avatar
    Jessica Lacy
    Permalink to comment#

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

    Regards
    Jessica

  12. User Avatar
    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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag