Twitter sidebar for Octopress

Since Twitter has decommissioned the old Twitter API, the Twitter sidebar in Octopress based blogs has stopped working. A few blogs have started to add the new Twitter widget to the sidebar but its quite garish.

My solution just copies the Google Plus sidebard and re-formats for Twitter - just refer the bottom right in the sidebar of this page to see it in action

New sidebar file

Create a new file source/_includes/custom/asides/twitter2.html

{% if site.twitter_user %}
  <section class="twitter2">
    <h1>
      <a href="https://twitter.com/{{ site.twitter_user }}">
        <img src="https://twitter.com/images/resources/twitter-bird-light-bgs.png" width="32" height="32">
          {{ site.twitter_user }}
      </a>
    </h1>
</section>
{% endif %}

CSS

Update the sass/partials/sidebar/_googleplus.scss and add in

.twitter2
{
  @extend .googleplus;
}

Note: I’m not using the googleplus class for the new twitter sidebar as it causes problem for my Octopress / Google Plus comments javascript

Config

In _config.yml add the new sidebar file to the default_asides

default_asides: [custom/asides/twitter2.html, ...

Remove the original asides/twitter.html from the default_asides: line

Justin Kelly

Justin Kelly

Web Developer, Business Analytics, Data Engineer specialising in PHP, ReactJS, Tableau, AWS RedShift and Matillion ETL

Based in Melbourne, Australia

Feel free to contact me justin@kelly.org.au or _justin_kelly

Leave a comment

Name Notify me of replies by email.