I wanted to integrate a Google+ button into the sidebar of this blog, and I thought it would be a nice idea for those who are interested to describe the process of integrating it (eg. other Ghost platform bloggers that might stumble upon this blog).
Now, I use the Ghostium theme for my blog and I love it and think it’s worth promoting, so I’ll be focusing this post on how to integrate Google+ into that theme (but don’t worry, I address the base Casper theme near the bottom of this post). Ghostium is a theme based on Medium.com – you can find out more and get it from here: Ghostium Theme.
Note: right-click on any image and open in new tab if you want to see a larger version of it.
Setting up the Google+ badge
To start with, I went to Google’s web page that allows you to play around with badges: https://developers.google.com/+/web/badge/
I did a bit of playing around with the options there, as well as coding it into my site, and then playing around some more until I got it right.
But once you’ve got your Google+ badge set up the way you want it (you’ll probably change it yourself, as you go through this proces), copy the code from the bottom right box below your badge. In my case I chose to go with the non-Asynchronous code because I liked keeping the code base simple. I tested both Asynchronous and non-Asynchronous and there was no difference in the display.
There’s two sections to the code.
Section 1
<!-- Place this tag in your head or just before your close body tag. --><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
Section 2
<!-- Place this tag where you want the widget to render. --><div class="g-page" data-width="200" data-href="//plus.google.com/109031301407549473271" data-theme="dark" data-showtagline="false" data-showcoverphoto="false" data-rel="publisher"></div>
So now that you’ve got the code for your badge, you need to log into your unix/linux server via Terminal and navigate to where you’ve placed your theme.
cd /var/www/ghost/content/themes/ghostium/
Once you’re there, you’ll have a number of items within that directory. You’ll want to do this:
nano default.hbs
This will open up the ‘default.hbs’ page in an editor. Scroll down to the bottom of the page and you’ll see you need to insert the ‘Section 1’ code from above in this way:
Save and exit from that, and then go to the following location:
/var/www/ghost/content/themes/ghostium/partials/custom
From this directory you want to edit the page that controls the pop-out sidebar:
nano navigation.hbs
You’ll have to make sure you play nicely with integrating it into the vertical location that’s best for you, to fit in nicely with whatever other menu options you might have.
Exit and save, and that’s it. The last thing you need to do is this:
sudo service ghost restart
The end result is a working Google+ badge on your Ghost blog, which you’ll see when you refresh your blog after the Ghost service has been restarted.
The Casper theme
As promised, I’ll now address integrating it into the Casper theme as well.
First, you should change the appearance of your badge on the Google+ badge page so that it looks better with the Casper theme, which is very basic.
For the ‘section 1’ of the code, place it in the default.hbs file, just before your /head tag:
/var/www/ghost/content/themes/casper/default.hbs
For the ‘section 2’ of the code, place it in the same default.hbs file, but within the footer area:
The end result will be the Google+ badge appearing at the bottom of your page, in the footer, like this:
Thanks for reading! Please add your own thoughts below.
Don't forget to subscribe for new posts sent to you by email!