Add social sharing buttons to your Jekyll blog

Share your blog post on Facebook, Twitter and Google+

Posted by Vincent Daubry on October 20, 2014

This post is part of a series of articles on how to setup a Jekyll blog :

Part 2: Add links to share on twitter, facebook and google +

Adding sharing buttons to your posts is extremely simple for twitter and google+, just paste the provided code on your page :

Facebook is a bigger hassle: First you need to create an application on this page facebook developer. Then get the sample code on the sharing button page

Contrary to Twitter and and Google+, the injected code doesn’t auto-discover your current page url. It’s a static link, and the sample code include a link to the developper page itself

You need to use a Jekyll variable to get the URL of the current page:

Facebook also injects style via javascript, this can cause a vertical alignment offset with other buttons :

If it does happen, just fix it with some CSS.

Add meta for google, facebook and twitter :

Search engines and social networks crawl your page and index its metadatas. Google uses it to calculate your pagerank, Facebook and Twitter use them to enrich the way your page is displayed in shares and tweets.

Web page metadatas is a vast subject, I recommend you to read this excellent article on the state of the art of meta in 2013: 18 Meta Tags Every Webpage Should Have in 2013

Metadatas for Facebook OpenGraph :

Shares on Facebook are objects of the open graph. By default, the Facebook crawler will gather informations about your page such as the title, a preview of your page, etc.

You can improve the way your page is displayed by providing metadatas about your page :

  • Your website name
  • Post title
  • Clean url (used as a unique identifier for your object)
  • Description
  • Image (preview for the page)
  • Facebook app id
  • Type
  • Language
  • Author

You must add these tags in the <head> of each page. On a Jekyll blog there will be 2 kind of pages :

  • Posts with metadatas about the article
  • Other pages with metadatas about the blog itself (homepage, about, etc)

Here is a sample code :

You can check the result using the open graph facebook debugger

The open graph attributes are described in this doc

Metadatas for Twitter cards :

Twitter cards are similar to Facebook meta-og. When a tweet contains a link to your page, the Twitter crawler will gather informations about your page to enrich the tweet (display a preview, etc) Here are some informations you can provide :

  • Card : Texte, image, ou player (ex: video)
  • Url
  • Title
  • Description
  • Image

Here is a sample code to generate Twitter cards metadatas :

Twitter also provides a tool to validate your metadatas : Card validator

Twitter will only display images from your domain if it has been previously validated. To get your blog validated, go on the Card validator tool and click on “request approval”.

Validation for this blog took only a few minutes.

Thats it ! People can now share a link to your post on social networks.

Do you see room for improvement, have you done something differently? if so leave a comment.

Code for this blog can be found here : vdaubry.github.io