Adding a Twitter Button to a Jekyll Blog
Jekyll Bootstrap is great, it got me up and running with this blog in next to no time. However, it is no longer maintained and doesn’t currently come with a a social sharing widget. Here’s how I added one to this site.
Implementing in Jekyll Bootsrap
I looked around to see if there was an easy way to implement this in Jekyll Bootstrap. There is an incomplete implementation and a few pull requests relating to this on the GitHub site. There are also some blogs about how to do it.
However, I decided not to use the Jekyll Bootstrap approach since the addiiton of social sharing widgets is really easy - most sites give you an online tool to create the button you want. E.g. Twitter
Adding the Social Share Button
Having generated the HTML code using the Twitter buttton generator I simply pasted it in to ‘index.md’ so that it would appear in the list of posts there. I modified the HTML generated as follows:
- Added a <span class=”socialshare”> element and some matching CSS
- Made ‘data-text’ the value of ‘post.title’
- Made the value of data-hashtags the value of ‘post.tags’
Now there is a working widget it’s time to put it onto the post page as well as the index page. This is simply a matter of cuttting and pasting the html into ‘_includes/themese/twitter/post.html’ and adding some appropriate CSS. I needed to tweak the HTML as follows:
- Made ‘data-text’ the value of ‘page.title’
- Made the value of data-hashtags the value of ‘page.tags’
I chose to add the twitter widget in two locations, one at the top and one at the bottom, by the tags list.
See the Changes on GitHub
You can view the code changes on GitHub.
Other Twitter Stuff I (or maybe you) Could Do
- Adding Related Posts to Jekyll Blogs
- Adding an Edit Link to Github Pages in Jekyll
- Adding a Bing Search Box to a Website
- Schedule Jekyll Posts for Publication
- Adding a CSS GitHub Ribbon to a Jekyll Site
- Dockerizing a Jekyll Site
- Adding Twitter Cards to a Jekyll Site
- Creating a Jekyll Blog