How to Make Custom Share Buttons with Jekyll

That look good too...

This weekend I set out to add some share buttons to this site. Twitter, LinkedIn, and Google+ all have custom share button generators, but they didn't give me the look I wanted. Also, the site is built using Jekyll and I wanted each button to reference the specific page and title for easy sharing. To that end, here is the solution I came up with.

The YAML front matter fields were ones I was already using for showing title and date in the format I desired. I needed this same info to generate the buttons for two reasons: 1) Jekyll uses this to generate the page URL which will need to be passed to Twitter, LinkedIn, and Google+ and 2) I want the title of the article to be shared. The YAML for this post is shown below.

YAML Front Matter:
1
2
3
4
5
6
---
layout: articleDetail
title: How to Make Custom Share Buttons with Jekyll
date: June 30, 2014
dateShort: "2014-06-30"
---

Some html is included in a layout file named "articleDetail," which is used only for my blog posts. Thus, the buttons will only show on those pages.

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="custom-social-buttons">		
	<div class="share-buttons-label">
		<span>Tell your friends</span>
	</div>
	<div class="custom-social-button twitter">
		<a id="twitter-link" href="#"><i class="socicon-twitter-bird"></i></a>
	</div>
	<div class="custom-social-button linkedin">
		<a id="linkedin-link" href="#"><i class="socicon-linkedin"></i></a>
	</div>
	<div class="custom-social-button googleplus">
		<a id="googleplus-link" href="#"><i class="socicon-gplus"></i></a>
	</div>
</div>

A bit of CSS to make it look nice...

CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.share-buttons-label {
	color: #ccc;
	font-weight: bold;
}

.custom-social-buttons
{
	margin-bottom: 120px;
}

.custom-social-button
{
	height: 30px; 
	border-left: 1px solid #ccc;
	width: 32%; 
	text-align: center; 
	float: left;
}

.custom-social-button.googleplus
{
	border-right: 1px solid #ccc;
	float: right;
}

.custom-social-button a
{
	vertical-align: middle;
	color: #ccc;
	font-weight: bold;
}

.custom-social-button a i
{
	display: block;
	width: 100%;
	height: 100%;
	line-height: 30px;
}

.custom-social-button a:hover
{
	vertical-align: middle;
	color: #555;
	font-weight: bold;
}

The js is where the magic happens. By looking at the code which each of the button generators of the various sites created, I was able to see the endpoint they were hitting, then work backwards from there. Let's take a look at the code and then I'll explain what it's doing. Keep in mind, this js is included directly beneath the html in the actual layout file ("articleDetail" in my case) so that Jekyll has access to the appropriate variables at run time.

JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
	window.onload = function(){						
		var blogDomain = "http%3A%2F%2Fscottndecker.com%2Fblog%2F";
		var pageTitle = "{{ page.title }}";
		var pageTitleDashes = pageTitle.replace(/ /g, '-') + "%2F&amp;";
		var pageTitleSpaces = pageTitle.replace(/ /g, '%20') + "&amp;";
		var pageDateShort = "{{ page.dateShort }}";
		var pageDateShortSlashes = pageDateShort.replace(/-/g, '%2F') + "%2F";
		
		var twitterPartOne = "https://twitter.com/intent/tweet?original_referer=";
		var twitterPartTwo = "text=";
		var twitterPartThree = "tw_p=tweetbutton&amp;url=";
		var twitterPartFour = "via=scottndecker";
		var twitterUrl = twitterPartOne + blogDomain + pageDateShortSlashes + pageTitleDashes + twitterPartTwo + pageTitleSpaces + twitterPartThree + blogDomain + pageDateShortSlashes + pageTitleDashes + twitterPartFour;
		var twitterLink = document.getElementById("twitter-link");
		twitterLink.onclick = function() {popUp=window.open(twitterUrl, 'popupwindow', 'scrollbars=yes,width=600,height=400');popUp.focus();return false };
		
		var linkedinPartOne = "http://www.linkedin.com/shareArticle?mini=true&url=";
		var linkedinPartTwo = "&title=";
		var linkedinPartThree = "&summary=";
		var linkedinPartFour = "&source=";
		var linkedinUrl = linkedinPartOne + blogDomain + pageDateShortSlashes + pageTitleDashes + linkedinPartTwo + pageTitleSpaces + linkedinPartFour + "@scottndecker";
		var linkedInLink = document.getElementById("linkedin-link");
		linkedInLink.onclick = function() {popUp=window.open(linkedinUrl, 'popupwindow', 'scrollbars=yes,width=600,height=400');popUp.focus();return false };
		
		var googlePlusPartOne = "https://plus.google.com/share?url=";
		var googlePlusUrl = googlePlusPartOne + blogDomain + pageDateShortSlashes + pageTitleDashes;
		var googlePlusLink = document.getElementById("googleplus-link");
		googlePlusLink.onclick = function() {popUp=window.open(googlePlusUrl, 'popupwindow', 'scrollbars=yes,width=600,height=400');popUp.focus();return false };
	};
</script>

The first chunk of js defines some variables they all need. Jekyll will replace the liquid tags enclosed with curly braces with the appropriate values (title and dateShort as defined in the YAML front matter). The blog domain, title of the article formatted with dashes or spaces between words, and date of the article are all url encoded. The second chuck of js defines the variables needed for Twitter. It then uses those variables to build the endpoint and sets the onclick event to fire to that endpoint in a popup window. The third and fourth chunks of js do similarly for LinkedIn and Google+. Note: this is assuming you're using the vanilla folder structure of Jekyll resulting in urls similar to that which you see in your address bar right now. If your folder structure is different (i.e. your urls are different), then your endpoint equation will vary accordingly.

By capitalizing on the Liquid functionality of Jekyll, I'm able to have each page create its own share buttons, complete with article title and url. Give it a shot using the buttons below.

Hope this helps others. If you see any way it could be improved, I'd love to hear about it.

Note: This strategy does not seem to work on mobile where the link is redirected to an app. The method will need some refining for that to work. If anybody has ideas, please let me know.

portrait title

About Scott

I am a software engineer from Bozeman, MT enjoying the slightly warmer climate of Colorado. I think code can change lives. I think lives are worth changing. I write code.

You can find me on Twitter, LinkedIn, , and Github.