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!
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.
- Sign up for AddThis – create an account using your email or one of the other methods suggested
- Click on Select a Tool and choose the “Share Buttons” type.
- 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.
- 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.
- 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).
- 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:
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!
_incude\footer.html which is the fragment that is included in the layouts for the footer.
You’ll see it does two main things:
- Checks if
site.addthisis 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.
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)
2. Next, change the code that you put into the footer to this