With iOS 9 came content blockers and the hoopla surrounding them. It's easy to see both sides of the argument for and against blocking ads and trackers, but regardless of the debate, one positive outcome is the simple fact we are talking about it now.
During development of MyiList, I was using the easy-to-use Facebook and Twitter share buttons because it was a couple of lines of code and I got the stylised buttons with a fancy share sheet. It's impressive stuff, but the downside of this approach: it comes with a blackbox filled with a LOT of tracking javascript - seriously it's nuts. I knew this all along and it never sat well with me but the truth is - I don't know if I would've gotten around to changing it if it weren't for iOS 9 content blockers. They all seemed to block those share links and rightfully so.
With renewed focus on the embedded javascript/share links; the decision to ditch them was an easy one to make. Especially because there's an alternative method to share to Facebook or Twitter that doesn't embed javascript.
<a href="http://www.facebook.com/sharer/sharer.php?u=<URL>">Share</a> <a href="http://twitter.com/intent/tweet?url=<URL>">Share</a>
Add some meta tags in your <head> tag and that's it for a cut-down version of the share links.
The biggest loss for me was not having the standard link buttons and when I searched for images I could use the results were a mismatch of assorted Facebook and Twitter icons. I wanted at least two different sizes for both Facebook and Twitter that didn't look at odds with the other.
I gave up trying to find existing images and decided to build my own in code which is what I'm sharing today.
Given how easy it is to change over from the creepy tracking share buttons to the vanilla share links - it really is surprising more sites don't do this. Especially as it's becoming more popular to block tracking.
Here are the share buttons and the the code I wrote to make them. For anyone who is on the fence about switching, I hope this removes a barrier and makes the decision a bit easier.
JsFiddle: http://jsfiddle.net/Mthud/f74p18m8/
<div class='social'>
<div class="facebook-button social-share">
<span class="separator"></span>
<span class="text">Share on Facebook</span>
</div>
<div class="twitter-button social-share">
<span class="separator"></span>
<span class="text">Tweet to Twitter</span>
</div>
</div>
.social-share {
-webkit-font-smoothing: antialiased;
background-clip: padding-box;
transition-delay: 0s;
transition-duration: 0.15s;
transition-property: background-color;
transition-timing-function: linear;
background-repeat: no-repeat;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
font-family: 'Whitney 5r', Helvetica, Arial, sans-serif;
margin: 0px;
position: relative;
text-align: center;
text-rendering: optimizelegibility;
border-radius: 3px;
font-size: 13px;
height: 28px;
line-height: 28px;
width: 155px;
}
.social-share .separator {
box-sizing: border-box;
position: absolute;
width: 2px;
height: 28px;
}
.social-share.large .separator {
height: 45px;
}
.social-share.xlarge .separator {
height: 60px;
}
.social-share .text {
box-sizing: border-box;
display: inline-block;
width: 125px;
}
.social-share.small {
width: 83px;
}
.social-share.small .text {
width: 53px;
}
.social-share.large {
border-radius: 6px;
font-size: 18px;
height: 45px;
line-height: 45px;
width: 255px;
}
.social-share.xlarge {
border-radius: 7px;
font-size: 20px;
height: 60px;
line-height: 60px;
width: 310px;
}
.social-share.large .text,
.social-share.xlarge .text {
width: 210px;
}
.facebook-button {
background-color: rgb(59, 89, 152);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAAF1QTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////z8iKdgAAAB50Uk5TD6dhxfbf0+mcXeKLZPAQ9QoW3eOH17qZAZaqEeEArk8N+gAAAGhJREFUKM/d0EkKgDAMBdA6z/NUE5v7H9MoKC21ILjzr8J/i4QIZUTek9BKPwiJIgukR0cSC7Kzp82Cmds4XUYLeoZOPSzfGNR7aBEHBkSsTVjpSuWC3AWTCSVAwy0AFF/P/REI/rkGO8uPP64AUMwMAAAAAElFTkSuQmCC);
background-position: 6px 50%;
background-size: 20px 20px;
padding: 0px 0px 0px 28px;
}
.facebook-button:hover {
background-color: rgb(49, 77, 139);
}
.facebook-button .separator {
border-left: 1px solid rgb(47, 74, 132);
border-right: 1px solid rgb(65, 99, 170);
left: 28px;
}
.facebook-button.large {
background-position: 12px 50%;
background-size: 24px 24px;
padding: 0px 0px 0px 45px;
}
.facebook-button.large .separator {
left: 45px;
}
.facebook-button.xlarge {
background-position: 17px 50%;
background-size: 30px 30px;
padding: 0px 20px 0px 80px;
}
.facebook-button.xlarge .separator {
left: 60px;
}
.twitter-button {
background-color: rgb(85, 172, 238);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAABbElEQVR42uza2w7CMAwDUPv/fxoJHobGaJslXmByXyfio9GLaACbBwwwwAADDDDAAAMMMMAAAwy4EwBvowGA3fh4rAXgYOwehwGB93iYv2WOvpQhAMn8Z4HJrBgDkMxfmJWYVK3KPw2AOH8OQFn+cak5ACUT4GslLNTNv4BBHSwVLgEwAUABgCnA989fBoDmBaysgmGNbH4IcFQmGR8FfJbK5ocB+3JCAJcqNgG2qkpAZJe9KYAX5HO8Q7UCtmO8DwAY0AjgfQD8VwANuGIf/HEA2wHU58/uiNoBbAdkCRX3hK2AVxFhvnoS5q9q1fm/D6A4X7sMuwFV/QJp/lK/oB1AYT4LL+RP5S+3bFT5gZ6RJj/atCrPDwLq80MACPIVc0DTuoUov34jKm9eq9b/GKA9f3QAlgGku7/ohoSsBijXXvXvAlIGWDAwN5IbEdPj9FnAouE/MhlggAEGGGCAAQYYYIABBhjQDngIMACm6jDsdYuZKAAAAABJRU5ErkJggg==);
background-position: 128px 50%;
background-size: 24px 24px;
padding: 0px 28px 0px 0px;
}
.twitter-button:hover {
background-color: rgb(75, 160, 225);
}
.twitter-button .separator {
border-right: 1px solid rgb(73, 157, 218);
border-left: 1px solid rgb(91, 182, 255);
right: 28px;
}
.twitter-button.small {
background-position: 57px 50%;
}
.twitter-button.large {
background-position: 215px 50%;
background-size: 36px 36px;
}
.twitter-button.large .separator {
right: 45px;
}
.twitter-button.xlarge {
background-size: 48px 48px;
background-position: 258px 50%;
}
.twitter-button.xlarge .separator {
right: 60px;
}
