web analytics

Adding Google+ to Ghost

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/

google_plus1

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:

google_plus2

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

google_plus3

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.

google_plus4

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:

google_plus5

The end result will be the Google+ badge appearing at the bottom of your page, in the footer, like this:

google_plus6


Thanks for reading! Please add your own thoughts below.



Don't forget to subscribe for new posts sent to you by email!

%d bloggers like this: