Add social sharing widgets

master
Michael Rose 2013-08-26 09:59:22 -04:00
parent 4107acfa16
commit 947a90df2e
19 changed files with 417 additions and 20 deletions

View File

@ -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)
---

View File

@ -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 %}

View File

@ -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 %}

View File

@ -9,6 +9,7 @@ image:
credit: dargadgetz
creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
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.

View File

@ -8,6 +8,7 @@ image:
credit: dargadgetz
creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
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.

View File

@ -4,6 +4,7 @@ title: "A Post with Images"
description: "Examples and code for displaying images in posts."
tags: [sample post, images, test]
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.

View File

@ -9,6 +9,7 @@ image:
credit: dargadgetz
creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
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.

View File

@ -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>

View File

@ -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.

View File

@ -9,6 +9,7 @@ image:
credit: dargadgetz
creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
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.

View File

@ -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>

View File

@ -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."

File diff suppressed because one or more lines are too long

View File

@ -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 ));

File diff suppressed because one or more lines are too long

View File

@ -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";

View File

@ -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

View File

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

View File

@ -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`.