Recently I updated the layout for my blog to include some buttons at the end of each post so readers can easily share it to some social platforms (Twitter, Facebook, Google+). The service I had selected for this was ShareThis.

Ghostery empowers consumers and businesses globally to create safer, faster, and more trusted digital experiences.

I also recently installed Ghostery within my web browser. And I noticed that all of a sudden Ghostery detected a lot of trackers that were not there before.

Without	With
Without	With

This is something I find unacceptable for a few simple buttons for sharing a post. What will be lost with the new approach is the counter of the number of times a platform was used to share a post. Not a big deal because that feature is not working correctly anyway. It was more a counter of how many times a button was clicked, regardless of something ended up being shared.

Time for a different approach…

Removing ShareThis (i.e. the bloat-ware)

First step is to remove these lines from head.html

<!-- Sharethis social share buttons -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "41a990db-7fea-4e7c-8b62-b8764bcdb3c1", doNotHash: true, doNotCopy: false, hashAddressBar: false});</script>

and the following lines from entry.html

<p>
    <span class='st_twitter_hcount' displayText='Tweet'></span>
    <span class='st_googleplus_hcount' displayText='Google +'></span>
    <span class='st_facebook_hcount' displayText='Facebook'></span>
</p>

Adding new lightweight sharing buttons

Each of the platforms I wanted to provide a sharing option for have a simple URL-scheme available for sharing something from the internet.

• Twitter https://twitter.com/intent/tweet?text=[Page Title]&url=[Page URL]
• Facebook https://www.facebook.com/sharer/sharer.php?u=[Page URL]
• Google+ https://plus.google.com/share?url=[Page URL]

For use on Blot.im we need to make sure we are using the proper variables known to Blot.im as listed below

Argument	Blot.im
[Page Title]	{{title}}
[Page URL]	{{blogURL}}{{url}}

Using a bit of magic provided by Font Awesome we can create the following nice looking share buttons. It does require a modification and addition (based on the styling of <kbd>) to the CSS.

The end-result looks as follows

HTML code

Twitter button

<a class="btn" href="https://twitter.com/intent/tweet?text={{title}}&url={{blogURL}}{{url}}" target="_blank">
    <i class="fab fa-twitter fa-lg fa-smd-twitter"></i> Share on Twitter
</a>

Facebook button

<a class="btn" href="https://www.facebook.com/sharer/sharer.php?u={{blogURL}}{{url}}" target="_blank">
    <i class="fab fa-facebook fa-lg fa-smd-facebook"></i> Share on Facebook
</a>

Google+ button

<a class="btn" href="https://plus.google.com/share?url={{blogURL}}{{url}}" target="_blank">
    <i class="fab fa-google-plus fa-lg fa-smd-googleplus"></i> Share on Google+
</a>

Updates to styles.css

Modification 1

/* Styling of external links */
a[target=_blank]:not(.btn) {
    margin-right: 1em;
}

a[target=_blank]:not(.btn):after {
    position: absolute;
    font-family: FontAwesome;
    font-size: 0.8em;
    color: rgb(128, 137, 146);
    text-shadow: 1px 1px 1px silver;
    margin-left: 0.2em;
    content:" \F0C1";
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
    background-image: none; 
}

Addition 1

/* Styling for ahref buttons */
.btn {
    -moz-border-radius:3px;
    -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    -webkit-border-radius:3px;
    -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    background-color:#f7f7f7;
    border:1px solid #ccc;
    border-radius:3px;
    box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    color:#333;
    display:inline-block;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    line-height:1.4;
    margin:0 .1em;
    padding:.1em .6em;
    text-shadow:0 1px 0 #fff;
    text-decoration: none;
}

/* Colors and alignment for sharing buttons */
.fa-smd-twitter {
    color: rgba(33, 162, 207, 1);
    line-height:1.4;
}
.fa-smd-facebook {
    color: rgba(78, 104, 163, 1);
    line-height:1.4;
}
.fa-smd-googleplus {
    color: rgba(215, 65, 59, 1);
    line-height:1.4;
}

---

Previous post

High CPU usage for mds process Lately the Mac Mini was getting somewhat slow again. Looking at the Activity Monitor showed the process mds to take up 90-100% CPU for one of its

Next post

Improving the Tag Cloud script The script used to update the Tag Cloud has a couple of issues. Tags are not counted correctly when the Markdown file has been saved using