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
This commit is contained in:
parent
9a1c5ff3e6
commit
87b8d0b129
6 changed files with 89 additions and 1 deletions
14
_includes/_social-share.html
Normal file
14
_includes/_social-share.html
Normal file
|
@ -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 -->
|
|
@ -36,6 +36,10 @@
|
||||||
<h1>{{ page.title }}</h1>
|
<h1>{{ page.title }}</h1>
|
||||||
<div class="article-wrap">
|
<div class="article-wrap">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
{% if page.share != false %}
|
||||||
|
<hr />
|
||||||
|
{% include _social-share.html %}
|
||||||
|
{% endif %}
|
||||||
</div><!-- /.article-wrap -->
|
</div><!-- /.article-wrap -->
|
||||||
{% if site.owner.disqus-shortname and page.comments == true %}
|
{% if site.owner.disqus-shortname and page.comments == true %}
|
||||||
<section id="disqus_thread"></section><!-- /#disqus_thread -->
|
<section id="disqus_thread"></section><!-- /#disqus_thread -->
|
||||||
|
|
|
@ -44,6 +44,7 @@
|
||||||
{{ content }}
|
{{ content }}
|
||||||
<hr />
|
<hr />
|
||||||
<footer role="contentinfo">
|
<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>
|
<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>
|
</footer>
|
||||||
</div><!-- /.article-wrap -->
|
</div><!-- /.article-wrap -->
|
||||||
|
|
|
@ -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 wrapper */
|
||||||
.footer-wrap {
|
.footer-wrap {
|
||||||
@include container;
|
@include container;
|
||||||
|
@ -611,7 +663,6 @@ $button-size: 1.5rem;
|
||||||
@include suffix(12,3.5);
|
@include suffix(12,3.5);
|
||||||
}
|
}
|
||||||
h4 {
|
h4 {
|
||||||
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,6 +37,20 @@ $warning : #dd8338;
|
||||||
$danger : #C64537;
|
$danger : #C64537;
|
||||||
$info : #308cbc;
|
$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 */
|
/* links */
|
||||||
$linkcolor : #343434;
|
$linkcolor : #343434;
|
||||||
$link-color : $linkcolor;
|
$link-color : $linkcolor;
|
||||||
|
|
|
@ -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>
|
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
|
||||||
{% endhighlight %}
|
{% 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
|
## Further Customization
|
||||||
|
|
Loading…
Reference in a new issue