Jun
16
2016
0
Revising the sharing buttons
Previous year I added sharing buttons to the end of each post so one could easily share a post with others. These buttons were looking like this
Old Share Buttons
But I felt it was time for some changes. I wanted to have these share buttons take up less space and also wanted to add additional sharing options (Pocket, email and printing). After some tinkering with HTML, CSS and Font Awesome
Old Share Buttons
Changes to the design templates
With the old version the share buttons were directly coded into the entry.html template, but with the additional sharing options and the use of the stacking feature of Font Awesome the code required was getting too large so I moved it to its own template which I named sharebuttons.html.
You can find the full code for the template I am currently using on GitHub at https://github.com/fmeus/Blot-themes/tree/master/shared-memory-dump. The sections below display the (partial) code for the new share buttons.
Code for sharebuttons.html
<p class="shareButtons">
<a href="https://twitter.com/intent/tweet?text={{title}}&url={{blogURL}}{{url}}" target="xyz" title="Share on Twitter" alt="Share on Twitter">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x twitter-color"></i>
<i class="fa fa-twitter fa-stack-1x bg-color"></i>
</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{blogURL}}{{url}}" target="xyz" title="Share on Facebook" alt="Share on Facebook">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x facebook-color"></i>
<i class="fa fa-facebook fa-stack-1x bg-color"></i>
</span>
</a>
<a href="https://plus.google.com/share?url={{blogURL}}{{url}}" target="xyz" title="Share on Google+" alt="Share on Google+">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x googleplus-color"></i>
<i class="fa fa-google-plus fa-stack-1x bg-color"></i>
</span>
</a>
<a href="https://www.tumblr.com/widgets/share/tool?canonicalUrl={{blogURL}}{{url}}&title={{title}}" target="xyz" title="Share on Tumblr" alt="Share on Tumblr">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x tumblr-color"></i>
<i class="fa fa-tumblr fa-stack-1x bg-color"></i>
</span>
</a>
<a href="https://getpocket.com/save?url={{blogURL}}{{url}}&title={{title}}" target="xyz" title="Save to Pocket" alt="Save to Pocket">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x pocket-color"></i>
<i class="fa fa-get-pocket fa-stack-1x bg-color"></i>
</span>
</a>
<a href="mailto:?subject={{pageTitle}}&body=Here is something I think you might find interesting.%0A%0A{{blogURL}}{{url}}" title="Share via email" alt="Share via email">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x mail-color"></i>
<i class="fa fa-envelope fa-stack-1x bg-color"></i>
</span>
</a>
<a onclick="window.print()" title="Print it" alt="Print it">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x print-color"></i>
<i class="fa fa-print fa-stack-1x bg-color"></i>
</span>
</a>
</p>Code for entry.html
The magic happens at line 26 where the template for the share buttons gets included into the entry template
<!DOCTYPE html>
<html>
{{> head}}
<body>
{{> header}}
<div class="container">
<div class="main">
<div class="entry">
{{#entry}}
<div class="left margin" {{#menu}}style="display: none"{{/menu}}>
<div class="calendar">
<span class="month">{{#formatDate}}MMM{{/formatDate}}</span>
<span class="day">{{#formatDate}}DD{{/formatDate}}</span>
<span class="year">{{#formatDate}}YYYY{{/formatDate}}</span>
<br />
<span style="color: black">
<i class="fa fa-comments"></i> <span class="disqus-comment-count" data-disqus-identifier="{{id}}">0</span></span>
</div>
</div>
<h1>{{title}}</h1>
{{{body}}}
{{> sharebuttons}}
{{#tags.length}}
<p style="font-size: 10pt;">
<i class="fa fa-tags"></i> {{#tags}}<code><a class="title" href="/tagged/{{slug}}">{{name}}</a></code> {{/tags}}
</p>
{{/tags.length}}
{{#adjacent}}
<hr class="full" />
{{/adjacent}}
{{#previous}}
<a class="halfWidth left previousEntry" href="{{url}}">
<h5>Previous post</h5>
<span class="title">{{title}}</span>
<span class="summary">{{summary}}</span>
</a>
{{/previous}}
{{#next}}
<a class="left halfWidth nextEntry" href="{{url}}">
<h5>Next post</h5>
<span class="title">{{title}}</span>
<span class="summary">{{summary}}</span>
</a>
{{/next}}
{{/entry}}
</div>
<div class="clear"></div>
{{> pluginHTML}}
{{> footer}}
</div>
</div>
</body>
</html>Code added to styles.css
/* Share buttons */
.bg-color { color: white; }
.facebook-color { color: rgba(78, 104, 163, 1); }
.googleplus-color { color: rgba(215, 65, 59, 1); }
.mail-color { color: rgba(0, 102, 255, 1); }
.pocket-color { color: rgba(238, 64, 85, 1); }
.print-color { color: rgba(147, 149, 152, 1); }
.tumblr-color { color: rgba(53, 70, 92, 1); }
.twitter-color { color: rgba(33, 162, 207, 1); }
.shareButtons {
margin: 10px 0px 0px;
font-size: 0.8em;
}
.shareButtons a {
text-shadow: none;
text-decoration: none;
background-image: none;
padding: 0px;
border-spacing: 0px;
margin: 0px;
display: inline-block;
}