Jekyll Social Media Buttons Without JavaScript

July 13, 2017 - 5 minutes read - 882 words

Social media is all the rage these days but tools like ShareThis can add 100kB+ to your page just for their initial JS. Add to this the fact that many more users are running script blockers that will prevent that code from running at all and you start looking at more low tech options to get your social likes. A few months back on Hacker News someone posted a link to Sharingbuttons with the promise of simple HTML only social media sharing. What the author, Maximilian Stoiber, had created was a generator for share buttons, complete with icons and all the link settings pre-configured. What is even better, you can use his hosted version at sharingbuttons.io or you can self host the application from his GitHub project repository. The only catch for me was the generator would only create buttons for a single page at a time…not exactly what you want to do if you’re going to be writing blog posts. So, after selecting the platforms I wanted to target, I generated a dummy template and set to figuring out how to implement it as a Jekyll include.

Parameterizing the Include

First step was to create a new file in the Jekyll _includes directory called social_buttons.html and copy what sharingbuttons.io generated into the template. Then the trick was to work through the template adding Liquid variable subsitutions everywere they made sense. Most of the platforms I chose only allowed a URL and perhaps a title to be sent over, relying instead on Open Graph tags or the Twitter card definition to pull additional information. One thing to note in the subsitutions is the final escape filter in the chain which makes the substituted string URL safe so you don’t need to worry about slashes or other special characters in your post titles. For example here’s the code for the Twitter button in template form.

{% raw %}<!-- Sharingbutton Twitter -->
<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text={{ page.title | escape }}&amp;url={{ page.url | absolute_url | escape }}" target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>
  </div></div>
</a>{% endraw %}

LinkedIn was actually unique in my chosen platforms for allowing you to pass in summary text as well as the link. In this case I decided to use the post’s excerpt as the summary and, failing that, fall back to the site description that is set in _config.yml. However, the HTML that sometimes ends up in page.excerpt counts against our character limit so it is key to filter out any you find with strip_html | normalize_whitespace before escaping the text for the URL. You can see below that this makes the template a little verbose, but it saves us a ton of time later by generating all of our buttons for free.

{% raw %}<!-- Sharingbutton LinkedIn -->
<a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ page.url | absolute_url | escape }}&amp;title={{ page.title | escape }}&amp;summary={{ page.excerpt | default: site.description | strip_html | normalize_whitespace | escape }}&amp;source={{ page.url | absolute_url | escape }}" target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/></svg>
  </div></div>
</a>{% endraw %}

Making Things Stylish

Last thing before we can actually start using our new buttons is to pull in the styling so helpfully provided for us. Create a new SCSS file in the _sass folder called _social_buttons.scss and copy over the CSS that the generator created. This gives us a nice baseline to work from and follows the established style patterns for most of the sites available. To add it to your final compiled CSS be sure to add @import 'social_buttons'; to your main.scss in the Jekyll assets folder.

Usage & Testing

Using the template is just as simple as any other Jekyll include, pop it in the layout you want to use it in and you’re good to go. In my case I really only was worried about people sharing my posts so I opened up _layouts/post.html and added a line to the post header.

{% raw %}<header class="post-header">
  {% include social_buttons.html %}
  <h1 class="post-title">{{ page.title }}</h1>
  <p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
</header>{% endraw %}

Simple as that! Now wait for Jekyll to rebuild your site and deploy it out to your host before you start testing. One thing I noticed is that tests against the local development server would regularly fail, even for posts that already existed on the site. Looking into the URLs I saw that it was trying to share the localhost:4000 host instead of the URL configured in _config.yml. So be sure to have your content on your final host before you start testing, and perhaps check out my social media tagging post for more information on how to jazz up your social shares!