March 18, 2019

Add Share Buttons in Jekyll Site

You build a static blog using Jekyll. You added comment system. Done all on-page SEO best practices. But confused about how to add share buttons on your website? If so, you're on the right place.

It's pretty much easy and straight-forward to add share buttons in a Jekyll site. All we need is some fancy icons, and share APIs.

Social Share

Share Icons

I got those above social media icons from FontAwesome and than gave them the appropriate brand color using CSS.

Steps

Create share.html file

Inside _include/ directory, create a new file and name it share.html. This is the file where we will be keeping all codes related to social share. And then we could simply include them wherever we want using Liquid's include tag.

Add Share API links and Icons inside share.html

Have a look at the following code:

<a
  href="https://www.facebook.com/sharer/sharer.php?u="URL"
  target="_blank"
  ><i style="color: #44609c" class="fab fa-facebook-f"></i
></a>

In above code, replace URL with {{ page.url | absolute_url }}. page.url will output the current page URL and absolute_url filter converts that URL to abosulte.

That's it. You're done. Checkout the following gist where I've added the social share code and platform API endpoints. Have fun!