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

1

<p class="shareButtons">
  <a href="https://twitter.com/intent/tweet?text={{title}}&amp;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}}&amp;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}}&amp;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}}&amp;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

1

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

1

/* 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;
}

Previous post
Embedding Instagram Posts Not so long ago I read a short conversation on twitter about embedding Instagram posts into posts on the Blot.im platform. @lllIIlIlIl have you
Next post
Maintainable Swift Mocks
This blog is powered by Blot