Add optional social sharing buttons

- Social share buttons appear at the end of every post and page unless you add share: false to their YAML Front Matter - Fixes #42
mmistakes · Jan 21, 2015 · 87b8d0b · 87b8d0b
1 parent 9a1c5ff
commit 87b8d0b
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 1 deletion.
diff --git a/_includes/_social-share.html b/_includes/_social-share.html
@@ -0,0 +1,14 @@
+<div class="social-share">
+  <h4>Share on</h4>
+  <ul>
+    <li>
+      <a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" class="twitter" title="Share on Twitter"><i class="fa fa-twitter"></i> Twitter</a>
+    </li>
+    <li>
+      <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" class="facebook" title="Share on Facebook"><i class="fa fa-facebook"></i> Facebook</a>
+    </li>
+    <li>
+      <a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" class="google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i> Google+</a>
+    </li>
+  </ul>
+</div><!-- /.social-share -->
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -36,6 +36,10 @@
     <h1>{{ page.title }}</h1>
     <div class="article-wrap">
       {{ content }}
+      {% if page.share != false %}
+        <hr />
+        {% include _social-share.html %}
+      {% endif %}
     </div><!-- /.article-wrap -->
     {% if site.owner.disqus-shortname and page.comments == true %}
       <section id="disqus_thread"></section><!-- /#disqus_thread -->

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -44,6 +44,7 @@ <h1><a href="{{ site.url }}{{ page.url }}" rel="bookmark" title="{{ page.title }
       {{ content }}
       <hr />
       <footer role="contentinfo">
+        {% if page.share != false %}{% include _social-share.html %}{% endif %}
         <p class="byline"><strong>{{ page.title }}</strong> was published on <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time>{% if page.modified %} and last modified on <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time>{% endif %}.</p>
       </footer>
     </div><!-- /.article-wrap -->

diff --git a/_sass/page.scss b/_sass/page.scss
@@ -561,6 +561,58 @@ $button-size: 1.5rem;
 	}
 }
 
+/* Social sharing links */
+/* Social media brand buttons */
+.social-share {
+  margin-bottom: 0px + $doc-line-height;
+  margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
+  ul, li {
+  	margin: 0;
+  	padding: 0;
+  	list-style: none;
+  }
+  li {
+  	display: inline-block;
+  }
+  $social: 
+  (facebook, $facebook-color),
+  (flickr, $flickr-color),
+  (foursquare, $foursquare-color),
+  (google-plus, $google-plus-color),
+  (instagram, $instagram-color),
+  (linkedin, $linkedin-color),
+  (pinterest, $pinterest-color),
+  (rss, $rss-color),
+  (tumblr, $tumblr-color),
+  (twitter, $twitter-color),
+  (vimeo, $vimeo-color),
+  (youtube, $youtube-color);
+  @each $socialnetwork, $color in $social {
+    .#{$socialnetwork} {
+      background: $color;
+    }    
+  }
+  a {
+	  padding: 8px 20px;
+	  text-decoration: none !important;
+	  text-transform: uppercase;
+	  @include font-rem(14);
+	  font-family: $heading-font;
+	  font-weight: 700;
+	  color: $white;
+	  opacity: 0.8;
+	  &:hover {
+	    opacity: 1;
+	  }
+	}
+	h4 {
+		@include font-rem(14);
+		margin-bottom: 10px;
+		text-transform: uppercase;
+	}
+}
+
+
 /* Footer wrapper */
 .footer-wrap {
 	@include container;
@@ -611,7 +663,6 @@ $button-size: 1.5rem;
 		@include suffix(12,3.5);
 	}
 	h4 {
-
 		text-transform: uppercase;
 		margin-bottom: 0;
 	}

diff --git a/_sass/variables.scss b/_sass/variables.scss
@@ -37,6 +37,20 @@ $warning			: #dd8338;
 $danger				: #C64537;
 $info				  : #308cbc;
 
+/* brands */
+$facebook-color     : #3b5998;
+$flickr-color       : #ff0084;
+$foursquare-color   : #0cbadf;
+$google-plus-color  : #dd4b39;
+$instagram-color    : #4e433c;
+$linkedin-color     : #4875b4;
+$pinterest-color    : #cb2027;
+$rss-color          : #fa9b39;
+$tumblr-color       : #2c4762;
+$twitter-color      : #55acee;
+$vimeo-color        : #1ab7ea;
+$youtube-color      : #ff3333;
+
 /* links */
 $linkcolor 		    : #343434;
 $link-color       : $linkcolor;

diff --git a/theme-setup/index.md b/theme-setup/index.md
@@ -298,6 +298,10 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene
 <iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
 {% endhighlight %}
 
+### Social Sharing Links
+
+Social sharing links for Twitter, Facebook, and Google+ are included on posts/pages by default. To hide them on specific posts or pages add `share: false` to the YAML Front Matter. If you'd like to use different social networks modify `_includes/_social-share.html` to your liking. Icons are set using [Font Awesome](http://fontawesome.io).
+
 ---
 
 ## Further Customization