In a previous post, we covered how to get your Jekyll blog working with Bluemix and also how to get Google Analytics working on your new site. The next thing is to set up some way to allow people to share the content you have.

This is also quite easy to do but I’ll post the instructions here simply to show you how easy it is!

Step-by-step

Since your Jekyll site is a static site and has no server side components running an application or CMS for you, it’s easiest to use a third party service for setting up sharing for your pages. This is similar to using Disqus for comments and Google Analytics for measuring usage.

There are a number of services that can do this for you and a search on Google for share buttons will bring up a number of services. I’ve previously used AddThis before and decided to use it again on this blog.

The steps here describe what needs to be done.

1. Sign up for AddThis – create an account using your email or one of the other methods suggested
2. Click on Select a Tool and choose the “Share Buttons” type.
   
3. Next, select the position that you want to use – this site uses inline as you see after the article. As you change the option, the sample page will show you how it changes.
   
4. Click on continue and select the options – AddThis has a lot of options, and lets you change a number of things. Select the networks you want or leave it on Automatic. I set mine to what I felt might be more relevant for visitors to the site.
   
5. You can change design settings to select the type of icons (and whether they are rounded) and also if you want to show the network names (as you see below, I chose not to show the names since that makes the icons much longer).
6. Finally, when you save and continue, it gets you to the code that you need to embed into your site. There are two parts to it:
   • The code that loads the scripts for the AddThis panel – this should go to hte end of the BODY of the HTML page
   • The code that shows the actual tools – this goes to the place where you want the tool to show.

Integrating the Code

Integrating this into your site might need a little more work. If you’re lucky, the theme that you’re using might already support AddThis and may only need a little bit to bring it in. In my case, the theme did not support it; so, I did a couple of things to bring the above mentioned pieces of code into the site.

First, to allow insertion of the code only when you want your site to use it (e.g., if you use the same theme for multiple sites), we add a new variable to _config.yml and call it addthis – this is extracted from mine:

title: Notepad.ONGHU
description: 'Knowledge, without memory, is useless'
url: 'http://notepad.onghu.com'
addthis: true

Comment or remove the addthis line if you don’t want to include AddThis in your site – otherwise, set it to some value, any value!

Second, we need to include the code for the Javascript – since this is to go in just before the end of the BODY tag of your HTML page, the easiest is to put it into _incude\footer.html which is the fragment that is included in the layouts for the footer.

{% if site.addthis %}
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<<THIS-WILL-BE-FROM-YOUR-SAMPLE>>"></script>
{% endif %}

You’ll see it does two main things:

• Checks if site.addthis is defined – if it is, the above code is included into your footer and therefore the page
• After that, you should put in the code that you will get from the AddThis site

Finally, we need to make the panel show some place in the code. In my case, the template has a page type for posts – so, I added this close to the end (before the code for Disqus comments) – you may need try a bit before you are happy with where it shows.

{% if site.addthis %}
  <!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_inline_share_toolbox" style="float:right"></div>
{% endif %}

That’s all there is to it – simple! The cool thing with AddThis is that you can actually edit the configuration on their server after logging in – after that, it’s automatically updated on your site when the pages are loaded next.

Doing it Cleaner

Updated on 14 Jun 2020

The method above works fine, obviously, and there is a way to clean it up a bit. We can add another variable to the _config.yml for the AddThis key so that you don’t embed it into the template in the footer. You can just put it into the configuration along with everything else.

To do that, you need 2 changes:

1. First, add a new configuration variable to the _config.yml and call it addthis_key, so it looks something like this (the quotes are important)

title: Notepad.ONGHU
description: 'Knowledge, without memory, is useless'
url: 'http://notepad.onghu.com'
addthis: true
addthis_key: '<<THIS-WILL-BE-FROM-YOUR-SAMPLE>>'

2. Next, change the code that you put into the footer to this

{% if site.addthis %}
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ site.addthis_key }}"></script>
{% endif %}