Adding a social button to your Ghost blog

Since the demise of Google Reader earlier in the year I have tried out a number of RSS clients to find a suitable replacement. In the end my favorite by some distance and the reader I now use every day is Feedly. I find it lightening fast, well designed and very simple to use. So today I'm going to add a feedly button to allow feedly users to subscribe easily to the blog.

Creating your Feedly button HTML

Firstly you'll need to head over to the Feedly button factory (http://www.feedly.com/factory.html) and follow the simple steps to select or create the button you want to display on your blog. With Ghost the RSS feed for your blog can be found at /rss i.e. http://blog.apericore.com/rss.

After following the feedly instructions you should have a html snippet like shown below:

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fblog.apericore.com%2Frss%2F'  target='blank'><img id='feedlyFollow'     src='http://s3.feedly.com/img/follows/feedly-follow-circle-flat-green_2x.png' alt='follow us in feedly' width='28' height='28'>
</a>

Adding the button to your blog template

Now we'll need to update the Ghost theme files to include the button in a suitable place in all out pages. In an earlier post I detailed how I created my own theme by copying the default Casper theme and making modifications. When you plan to deviate from the default theme it is best to follow this method and create your own - even if you are only planning slight changes.

We want to have the button displayed on every page of the blog so the template file we'll want to modify is default.hbs (replace aperi with your own theme name):

> su ghost
> ********
> cd /var/www/ghost/blog.apericore/htdocs/content/themes/aperi
> vi default.hbs

Within the default.hbs file I have choosen to add the feedly button alongside the default rss feed link added by the casper theme in the footer section.

        <a class="subscribe-feedly" href='http://cloud.feedly.com/#subscription%2Ffeed%2F{{@blog.url}}%2Frss%2F'  target='blank'>
      <span class="tooltip-feedly">Subscribe with Feedly!</span>
      <img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-square-flat-white_2x.png' alt='follow us in feedly' width='28' height='28'>
    </a>

In order to help the feedly icon blend in I updated some styles in

assets/css/screen.css

and the results can be seen at the bottom of the page.

As you can see it is a pretty simple process and the same can be done for any other social button. In future posts I will be looking at how to take the blogs theme (which is currently just a copy of the default Casper theme with some small enhancements) and updating it much more to give the blog its own unique feel.

At all times the current version of the theme can be found on github at http://github.com/stephenhardy/aperi.