Add social sharing widgets

README.md

@@ -1,8 +1,8 @@
-# HPSTR RDX Jekyll Theme
+# HPSTR Jekyll Theme
 
 They say three times the charm, so here is another free responsive Jekyll theme for you. I've learned a ton since open sourcing my first two themes [on Github](http://github.com/mmistakes), and wanted to try a few new things this time around. If you've used my previous themes most of this should be familiar territory...
 
-## What HPSTR RDX brings to the table:
+## What HPSTR brings to the table:
 
 * Responsive templates for post, page, and post index `_layouts`. Looks great on mobile, tablet, and desktop devices.
 * Gracefully degrads in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.  
@@ -11,15 +11,16 @@ They say three times the charm, so here is another free responsive Jekyll theme
 * Readable typography to make your words shine.
 * Support for large images to call out your favorite posts.
 * Comments powered by [Disqus](http://disqus.com) if you choose to enable.
+* Social Sharing links for Facebook, Twitter, and Google+ if you choose to enable.
 * Simple and clear permalink structure.
 * [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) support for a better social sharing experience.
 * Simple [custom 404 page](http://mmistakes.github.io/hpstr-jekyll-theme/404.html) to get you started.
 * Stylesheets for Pygments and Coderay [syntax highlighting](http://mmistakes.github.io/hpstr-jekyll-theme/code-highlighting-post/) to make your code examples look snazzy
-* Grunt build script for easy theme development
+* [Grunt](http://gruntjs.com) build script for easy theme development
 
 [Theme Preview](http://mmistakes.github.io/hpstr-jekyll-theme)
 
-![HPSTR RDX Theme Preview screenshot](http://mmistakes.github.io/hpstr-jekyll-theme/images/hpstr-jekyll-theme-preview.jpg)
+![HPSTR Theme Preview screenshot](http://mmistakes.github.io/hpstr-jekyll-theme/images/hpstr-jekyll-theme-preview.jpg)
 
 ---
 

_layouts/page.html

@@ -32,6 +32,13 @@
       <footer class="entry-meta">
         {% if page.modified %}{{ page.title }} was last modified on <span class="entry-date date modified"><time datetime="{{ page.modified }}" itemprop="dateModified">{{ page.modified }}</time></span>
         <span class="author vcard fn" itemprop="author" itemtype="http://schema.org/Person">{{ site.owner.name }}</span>{% endif %}
+        {% if page.share %}<div class="social-share">
+          <ul class="socialcount socialcount-small inline-list" data-url="{{ site.url }}{{ page.url }}" data-share-text="{{ page.title }}">
+            <li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" title="Share on Facebook"><span class="count"><i class="icon-facebook-sign"></i> Like</span></a></li>
+            <li class="twitter"><a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" title="Share on Twitter"><span class="count"><i class="icon-twitter-sign"></i> Tweet</span></a></li>
+            <li class="googleplus"><a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" title="Share on Google Plus"><span class="count"><i class="icon-google-plus-sign"></i> +1</span></a></li>
+          </ul>
+        </div><!-- /.social-share -->{% endif %}
       </footer>
     </div><!-- /.entry-content -->
     {% if site.disqus_shortname and page.comments %}<section id="disqus_thread"></section><!-- /#disqus_thread -->{% endif %}

_layouts/post.html

@@ -40,6 +40,13 @@
         was published on <span class="entry-date date published updated"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</span></time>
         {% if page.modified %}(revised: <span class="entry-date date modified"><time datetime="{{ page.modified }}" itemprop="dateModified">{{ page.modified | date: "%m/%d/%Y" }}</time></span>){% endif %}
         <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name" class="fn"><a href="{{ site.url }}/about" title="About {{ site.owner.name }}" itemprop="url">{{ site.owner.name }}</a></span></span>
+        {% if page.share %}<div class="social-share">
+          <ul class="socialcount socialcount-small inline-list" data-url="{{ site.url }}{{ page.url }}" data-share-text="{{ page.title }}">
+            <li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" title="Share on Facebook"><span class="count"><i class="icon-facebook-sign"></i> Like</span></a></li>
+            <li class="twitter"><a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" title="Share on Twitter"><span class="count"><i class="icon-twitter-sign"></i> Tweet</span></a></li>
+            <li class="googleplus"><a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" title="Share on Google Plus"><span class="count"><i class="icon-google-plus-sign"></i> +1</span></a></li>
+          </ul>
+        </div><!-- /.social-share -->{% endif %}
       </footer>
     </div><!-- /.entry-content -->
     {% if site.disqus_shortname and page.comments %}<section id="disqus_thread"></section><!-- /#disqus_thread -->{% endif %}

_posts/2011-03-10-sample-post.md

@@ -8,7 +8,8 @@ image:
   feature: abstract-3.jpg
   credit: dargadgetz
   creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
-comments: true  
+comments: true
+share: true
 ---
 
 Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.

_posts/2012-05-22-readability-post.md

@@ -7,7 +7,8 @@ image:
   feature: abstract-6.jpg
   credit: dargadgetz
   creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
-comments: true  
+comments: true
+share: true
 ---
 
 Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.

_posts/2013-05-22-sample-post-images.md

@@ -3,7 +3,8 @@ layout: post
 title: "A Post with Images"
 description: "Examples and code for displaying images in posts."
 tags: [sample post, images, test]
-comments: true  
+comments: true
+share: true
 ---
 
 Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use `figure` with the appropriate `class`. Each instance of `figure` is auto-numbered and displayed in the caption.

_posts/2013-05-23-readability-feature-post.md

@@ -8,7 +8,8 @@ image:
   feature: abstract-7.jpg
   credit: dargadgetz
   creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
-comments: true  
+comments: true
+share: true
 ---
 
 This is a sample post with a large feature image up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.

_posts/2013-06-25-video-post.md

@@ -4,6 +4,7 @@ title: "A Post with a Video"
 description: "Custom written post descriptions are the way to go... if you're not lazy."
 tags: [sample post, video]
 comments: true
+share: true
 ---
 
 <iframe width="560" height="315" src="http://www.youtube.com/embed/SqYiglufb8Y" frameborder="0"> </iframe>

_posts/2013-08-12-sample-link-post.md

@@ -5,6 +5,7 @@ description: "Example and code for using link posts."
 tags: [sample post, link post]
 comments: true
 link: http://mademistakes.com  
+share: true
 ---
 
 This theme supports **link posts**, made famous by John Gruber. To use, just add `link: http://url-you-want-linked` to the post's YAML front matter and you're done.

_posts/2013-08-16-code-highlighting-post.md

@@ -8,7 +8,8 @@ image:
   feature: abstract-10.jpg
   credit: dargadgetz
   creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
-comments: true  
+comments: true
+share: true  
 ---
 
 [Syntax highlighting](http://en.wikipedia.org/wiki/Syntax_highlighting) is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.

about.md

@@ -1,17 +1,18 @@
 ---
 layout: page
-permalink: /about/index.html
+permalink: /about/
 title: About the Theme
 tags: [Jekyll, theme, modern, minimal, responsive]
 image:
   feature: abstract-5.jpg
   credit: dargadgetz
   creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
+share: true
 ---
 
 They say three times the charm, so here is another free responsive Jekyll theme for you. I've learned a ton since open sourcing my first two themes [on Github](http://github.com/mmistakes), and wanted to try a few new things this time around. If you've used my previous themes most of this should be familiar territory...
 
-## What HPSTR RDX brings to the table:
+## What HPSTR brings to the table:
 
 * Responsive templates for post, page, and post index `_layouts`. Looks great on mobile, tablet, and desktop devices.
 * Gracefully degrads in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.  
@@ -24,7 +25,7 @@ They say three times the charm, so here is another free responsive Jekyll theme
 * [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) support for a better social sharing experience.
 * Simple [custom 404 page]({{ site.url }}/404.html) to get you started.
 * Stylesheets for Pygments and Coderay [syntax highlighting]({{ site.url }}/code-highlighting-post/) to make your code examples look snazzy
-* Grunt build script for easy theme development
+* [Grunt](http://gruntjs.com) build script for easy theme development
 
 <div markdown="0"><a href="{{ site.url }}/theme-setup" class="btn btn-info">Install the Theme</a></div>
 

archive.html

@@ -1,6 +1,6 @@
 ---
 layout: post-index
-permalink: /articles/index.html
+permalink: /articles/
 title: All Posts
 permalink: /archive/index.html
 description: "An archive of posts."

assets/js/plugins/socialcount.js

@@ -0,0 +1,352 @@
+/*! SocialCount - v0.1.6 - 2013-08-08
+* https://github.com/filamentgroup/SocialCount
+* Copyright (c) 2013 zachleat; Licensed MIT */
+
+;(function( win, doc, $ ) {
+
+	var $loadingIndicator,
+		$count;
+
+	function featureTest( prop, unprefixedProp ) {
+		var style = doc.createElement('social').style,
+			prefixes = 'webkit Moz o ms'.split(' ');
+
+		if( unprefixedProp in style ) {
+			return true;
+		}
+		for( var j = 0, k = prefixes.length; j < k; j++ ) {
+			if( ( prefixes[ j ] + prop ) in style ) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	function removeFileName( src ) {
+		var split = src.split( '/' );
+		split.pop();
+		return split.join( '/' ) + '/';
+	}
+
+	function resolveServiceDir() {
+		var baseUrl;
+
+		$( 'script' ).each(function() {
+			var src = this.src || '',
+				dir;
+			if( src.match( SocialCount.scriptSrcRegex ) ) {
+				baseUrl = removeFileName( src );
+				return false;
+			}
+		});
+
+		return baseUrl;
+	}
+
+	var SocialCount = {
+		// For A-grade experience, require querySelector (IE8+) and not BlackBerry or touchscreen
+		isGradeA: 'querySelectorAll' in doc && !win.blackberry && !('ontouchstart' in window) &&
+			// Note that this feature test does not account for the Windows Phone version that includes IE9
+			// IE 10 desktop (non-touch) returns 0 for msMaxTouchPoints
+			( typeof window.navigator.msMaxTouchPoints === 'undefined' || window.navigator.msMaxTouchPoints === 0 ),
+		minCount: 1,
+		serviceUrl: 'service/index.php',
+		initSelector: '.socialcount',
+		classes: {
+			js: 'js',
+			gradeA: 'grade-a',
+			active: 'active',
+			touch: 'touch',
+			hover: 'hover',
+			noTransforms: 'no-transforms',
+			showCounts: 'counts',
+			countContent: 'count',
+			minCount: 'minimum',
+			activateOnHover: 'activate-on-hover',
+			activateOnClick: 'activate-on-click'
+		},
+		thousandCharacter: 'K',
+		millionCharacter: 'M',
+		missingResultText: '-',
+		activateOnClick: false, // default is hover
+		selectors: {
+			facebook: '.facebook',
+			twitter: '.twitter',
+			googleplus: '.googleplus'
+		},
+		locale: (function() {
+			var locale = doc.documentElement ? ( doc.documentElement.lang || '' ) : '';
+			locale = locale.replace(/\-/, '_');
+			return locale.match(/\w{2}_\w{2}/) ? locale : '';
+		})(),
+		googleplusTooltip: 'table.gc-bubbleDefault',
+		scriptSrcRegex: /socialcount[\w.]*.js/i,
+		plugins: {
+			init: [],
+			bind: []
+		},
+
+		// private, but for testing
+		cache: {},
+
+		removeFileName: removeFileName,
+		resolveServiceDir: resolveServiceDir,
+
+		isCssAnimations: function() {
+			return featureTest( 'AnimationName', 'animationName' );
+		},
+		isCssTransforms: function() {
+			return featureTest( 'Transform', 'transform' );
+		},
+		getUrl: function( $el ) {
+			return $el.attr('data-url') || location.href;
+		},
+		// Currently only available on Twitter
+		getShareText: function( $el ) {
+			return $el.attr('data-share-text' ) || '';
+		},
+		getFacebookAction: function( $el ) {
+			return ( $el.attr('data-facebook-action' ) || 'like' ).toLowerCase();
+		},
+		isCountsEnabled: function( $el ) {
+			return $el.attr('data-counts') === 'true';
+		},
+		isSmallSize: function( $el ) {
+			return $el.is( '.socialcount-small' );
+		},
+		getCounts: function( $el, url ) {
+			var map = SocialCount.selectors,
+				cache = SocialCount.cache,
+				counts = {},
+				$networkNode,
+				$countNode,
+				j;
+
+			for( j in map ) {
+				$networkNode = $el.find( map[ j ] );
+				$countNode = $networkNode.find( '.' + SocialCount.classes.countContent );
+
+				if( $countNode.length ) {
+					counts[ j ] = $countNode;
+				} else {
+					counts[ j ] = $count.clone();
+					$networkNode.append( counts[ j ] );
+				}
+			}
+
+			if( !cache[ url ] ) {
+				cache[ url ] = $.ajax({
+					url: resolveServiceDir() + SocialCount.serviceUrl,
+					data: {
+						url: url
+					},
+					dataType: 'json'
+				});
+			}
+
+			cache[ url ].done( function complete( data ) {
+				for( var j in data ) {
+					if( data.hasOwnProperty( j ) ) {
+						if( counts[ j ] && data[ j ] > SocialCount.minCount ) {
+							counts[ j ].addClass( SocialCount.classes.minCount )
+								.html( SocialCount.normalizeCount( data[ j ] ) );
+						}
+					}
+				}
+			});
+
+			return cache[ url ];
+		},
+		init: function( $el ) {
+			var facebookAction = SocialCount.getFacebookAction( $el ),
+				classes = [ facebookAction ],
+				isSmall = SocialCount.isSmallSize( $el ),
+				url = SocialCount.getUrl( $el ),
+				initPlugins = SocialCount.plugins.init,
+				countsEnabled = SocialCount.isCountsEnabled( $el );
+
+			classes.push( SocialCount.classes.js );
+
+			if( SocialCount.isGradeA ) {
+				classes.push( SocialCount.classes.gradeA );
+			}
+			if( !SocialCount.isCssTransforms() ) {
+				classes.push( SocialCount.classes.noTransforms );
+			}
+			if( countsEnabled ) {
+				classes.push( SocialCount.classes.showCounts );
+			}
+			if( SocialCount.activateOnClick ) {
+				classes.push( SocialCount.classes.activateOnClick );
+			} else {
+				classes.push( SocialCount.classes.activateOnHover );
+			}
+			if( SocialCount.locale ) {
+				classes.push( SocialCount.locale );
+			}
+			$el.addClass( classes.join(' ') );
+
+			for( var j = 0, k = initPlugins.length; j < k; j++ ) {
+				initPlugins[ j ].call( $el );
+			}
+
+			if( SocialCount.isGradeA ) {
+				SocialCount.bindEvents( $el, url, facebookAction, isSmall );
+			}
+
+			if( countsEnabled && !isSmall ) {
+				SocialCount.getCounts( $el, url );
+			}
+		},
+		normalizeCount: function( count ) {
+			if( !count && count !== 0 ) {
+				return SocialCount.missingResultText;
+			}
+			// > 1M
+			if( count >= 1000000 ) {
+				return Math.floor( count / 1000000 ) + SocialCount.millionCharacter;
+			}
+			// > 100K
+			if( count >= 100000 ) {
+				return Math.floor( count / 1000 ) + SocialCount.thousandCharacter;
+			}
+			if( count > 1000 ) {
+				return ( count / 1000 ).toFixed( 1 ).replace( /\.0/, '' ) + SocialCount.thousandCharacter;
+			}
+			return count;
+		},
+		bindEvents: function( $el, url, facebookAction, isSmall ) {
+			function bind( $a, html, jsUrl ) {
+				// IE bug (tested up to version 9) with :hover rules and iframes.
+				var isTooltipActive = false,
+					isHoverActive = false;
+
+				$a.closest( 'li' ).bind( 'mouseenter', function( event ) {
+					var $li = $( this ).closest( 'li' );
+
+					$li.addClass( SocialCount.classes.hover );
+
+					isHoverActive = true;
+
+					$( document ).on( 'mouseenter.socialcount mouseleave.socialcount', SocialCount.googleplusTooltip, function( event ) {
+						isTooltipActive = event.type === 'mouseenter';
+
+						if( !isTooltipActive && !isHoverActive ) {
+							$li.removeClass( SocialCount.classes.hover );
+						}
+					});
+				}).bind( 'mouseleave', function( event ) {
+					var self = this;
+					window.setTimeout(function() {
+						isHoverActive = false;
+
+						if( !isTooltipActive && !isHoverActive ) {
+							$( document ).off( '.socialcount' );
+							$( self ).closest( 'li' ).removeClass( SocialCount.classes.hover );
+						}
+					}, 0);
+				});
+
+				$a.one( SocialCount.activateOnClick ? 'click' : 'mouseover', function( event ) {
+					if( SocialCount.activateOnClick ) {
+						event.preventDefault();
+						event.stopPropagation();
+					}
+
+					var $self = $( this ),
+						$parent = $self.closest( 'li' ),
+						$loading = $loadingIndicator.clone(),
+						$content = $( html ),
+						$button = $( '<div class="button"/>' ).append( $content ),
+						js,
+						$iframe,
+						deferred = $.Deferred();
+
+					deferred.promise().always(function() {
+						// Remove Loader
+						var $iframe = $parent.find('iframe');
+
+						if( $iframe.length ) {
+							$iframe.bind( 'load', function() {
+								$loading.remove();
+							});
+						} else {
+							$loading.remove();
+						}
+					});
+
+					$parent
+						.addClass( SocialCount.classes.active )
+						.append( $loading )
+						.append( $button );
+
+					if( jsUrl ) {
+						js = doc.createElement( 'script' );
+						js.src = jsUrl;
+
+						// IE8 doesn't do script onload.
+						if( js.attachEvent ) {
+							js.attachEvent( 'onreadystatechange', function() {
+								if( js.readyState === 'loaded' || js.readyState === 'complete' ) {
+									deferred.resolve();
+								}
+							});
+						} else {
+							$( js ).bind( 'load', deferred.resolve );
+						}
+
+						doc.body.appendChild( js );
+					} else if( $content.is( 'iframe' ) ) {
+						deferred.resolve();
+					}
+				});
+			} // end bind()
+
+			if( !isSmall ) {
+				var shareText = SocialCount.getShareText( $el );
+
+				bind( $el.find( SocialCount.selectors.facebook + ' a' ),
+					'<iframe src="//www.facebook.com/plugins/like.php?href=' + encodeURIComponent( url ) +
+						( SocialCount.locale ? '&locale=' + SocialCount.locale : '' ) +
+						'&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;action=' + facebookAction +
+						'&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowTransparency="true"></iframe>' );
+
+				bind( $el.find( SocialCount.selectors.twitter + ' a' ),
+					'<a href="https://twitter.com/share" class="twitter-share-button"' +
+						' data-url="' + encodeURIComponent( url ) + '"' +
+						( shareText ? ' data-text="' + shareText + '"': '' ) +
+						' data-count="none" data-dnt="true">Tweet</a>',
+					'//platform.twitter.com/widgets.js' );
+
+				bind( $el.find( SocialCount.selectors.googleplus + ' a' ),
+					'<div class="g-plusone" data-size="medium" data-annotation="none"></div>',
+					'//apis.google.com/js/plusone.js' );
+			}
+
+			// Bind events on other non-stock widgets, like sharethis
+			var bindPlugins = SocialCount.plugins.bind;
+			for( var j = 0, k = bindPlugins.length; j < k; j++ ) {
+				bindPlugins[ j ].call( $el, bind, url, isSmall );
+			}
+		} // end bindEvents()
+	};
+
+	$(function() {
+		// Thanks to http://codepen.io/ericmatthys/pen/FfcEL
+		$loadingIndicator = $('<div>')
+			.addClass('loading')
+			.html( SocialCount.isCssAnimations() ? new Array(4).join('<div class="dot"></div>') : 'Loading' );
+
+		$count = $('<span>')
+			.addClass( SocialCount.classes.countContent )
+			.html('&#160;');
+
+		$( SocialCount.initSelector ).each(function() {
+			var $el = $(this);
+			SocialCount.init($el);
+		});
+	});
+
+	window.SocialCount = SocialCount;
+
+}( window, window.document, jQuery ));

assets/less/main.less

@@ -24,6 +24,7 @@
 // ELEMENTS ===================================================
 // Figures, images, social media, other elements ==============
 @import "elements.less";
+// Drop down menu
 @import "dl-menu.less";
 // Font Awesome webfont icons =================================
 @import "font-awesome.less";

assets/less/page.less

@@ -352,8 +352,20 @@ body {
 	}
 }
 
-// Social Icons
+// Social Share
 // --------------------------------------------------
+.socialcount {
+	.font-rem(16);
+	font-weight: 700;
+	li { 
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+	p > a,
+	li > a {
+		border-bottom-width: 0;
+	}
+}
 
 
 // Browser Upgrade

tags.html

@@ -1,6 +1,6 @@
 ---
 layout: post-index
-permalink: /tags/index.html
+permalink: /tags/
 title: Tag Archive
 description: "An archive of posts sorted by tag."
 ---

theme-setup.md

@@ -1,16 +1,17 @@
 ---
 layout: page
-permalink: /theme-setup/index.html
+permalink: /theme-setup/
 title: Theme Setup
-description: "Instructions on how to install and customize the Jekyll theme HPSTR RDX."
+description: "Instructions on how to install and customize the modern Jekyll theme HPSTR."
 tags: [Jekyll, theme, install, setup]
 image:
   feature: abstract-11.jpg
   credit: dargadgetz
   creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
+share: true
 ---
 
-General notes and suggestions for customizing **HPSTR RDX**.
+General notes and suggestions for customizing **HPSTR**.
 
 ## Basic Setup for a new Jekyll site
 
@@ -132,6 +133,14 @@ Create a [Disqus](http://disqus.com) account and change `disqus_shortname` in `_
 comments: true
 {% endhighlight %}
 
+#### Social Share Links
+
+To enable Facebook, Twitter, and Google+ share links on a post or page, add the following to its front matter:
+
+{% highlight yaml %}
+share: true
+{% endhighlight %}
+
 #### Owner/Author Information
 
 Change your name, and avatar photo (200x200 pixels or larger), email, and social networking URLs. If you want to link to an external image on Gravatar or something similar you'll need to edit the path in `head.html` since it assumes it is located in `/images`.