From 87b8d0b12944c72040a36609845cd71cdd5b9019 Mon Sep 17 00:00:00 2001
From: Michael Rose <est.michael@gmail.com>
Date: Wed, 21 Jan 2015 11:21:50 -0500
Subject: [PATCH] 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
---
_includes/_social-share.html | 14 ++++++++++
_layouts/page.html | 4 +++
_layouts/post.html | 1 +
_sass/page.scss | 53 +++++++++++++++++++++++++++++++++++-
_sass/variables.scss | 14 ++++++++++
theme-setup/index.md | 4 +++
6 files changed, 89 insertions(+), 1 deletion(-)
create mode 100644 _includes/_social-share.html
diff --git a/_includes/_social-share.html b/_includes/_social-share.html
new file mode 100644
index 00000000..d192e5cd
--- /dev/null
+++ 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 -->
\ No newline at end of file
diff --git a/_layouts/page.html b/_layouts/page.html
index 0a41223f..919947aa 100644
--- 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
index 84427b39..c789a9ba 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -44,6 +44,7 @@
{{ 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
index cdcb36ab..528cd714 100644
--- 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
index a0d832c9..1e9c496d 100644
--- 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
index 11e8f04b..dceb5b45 100644
--- 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