Update: This blog no longer uses Octopress, as it did when I wrote this post in 2013. (It now uses an Octopress-inspired engine of my own design). However, to the best of my knowledge, the information in this post remains true. If you came here via a link or search, I hope you find it useful.

The Octopress core team removed Twitter sidebar-widget support from the project earlier this month, citing imminent changes to Twitter’s API. It’s not yet clear to me whether they couldn’t have modified the widget’s source so that it worked with Twitter’s new API version, but this isn’t something I’ve deeply investigated.

The conversation around the change on GitHub appears to show a bit of disdain for Twitter among the Octopress devs in favor of the much smaller (and far more demographically “geekier”) app.net, which honestly I found a bit surprising and off-putting. It seemed strange to me to so quickly discard front-page support for one of the world’s most important and diversely populated social networks. But, the devs made their decision, and they at least left a (somewhat opinionated) do-it-yourself note in the project’s commit log for Octopress users who still wanted Twitter integration.

As such, I thought it apropos to inaugurate my own new Octopress-based blog with a description of how I added the Twitter timeline widget that does indeed appear on the right side of this page. I found it so easy to do, and with such immediately pleasing results, that it did much to balm any disappointment I felt about the dev team’s Twitter decision.

1. Create a new timeline widget at twitter.com.

   While logged into twitter.com as the appropriate Twitter identity, create a new timeline widget. It’s very easy to accomplish through the given form. Don’t let the width of the example timeline give you the wrong impression; it seems to act fairly intelligently about sizing itself to fit its container, once placed.

2. Recreate the twitter.html aside.

   In your blog’s source/_includes/asides directory, create the file twitter.html. Then, populate it with something like the following, pasting the timeline HTML/JS code from your new widget’s page into twitter.html where indicated:

   <section>
       <h1>Twitter</h1>
       <!-- PASTE THE WIDGET CODE HERE --> 
   </section>
   

   For a more complete example, this is what my own twitter.html looks like:

   <section>
       <h1>Twitter</h1>
       <a class="twitter-timeline" href="https://twitter.com/JmacDotOrg" data-widget-id="318132253194584064">Tweets by @JmacDotOrg</a>
       <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
   </section>
   

3. Refer to twitter.html in your config file.

   Modify the default_asides list in your blog’s _config.yml file to include asides/twitter.html.

   Here’s what the line looks like in my file (after I also removed some asides I don’t need right now, like Pinterest’s):

   default_asides: [asides/recent_posts.html, asides/github.html, asides/twitter.html]
   

And that should do it.