Sticky Share Button On Scroll For Website
Updated on April 07, 2016
Some time ago I was sharing how to make sticky share on the scroll button for bloggers. Well this time I will share how to make sticky share this button to be used for Blogger and Wordpress as well as solutions to overcome this error HTML5 validation of links shared on Twitter that include the post title automatically tweet box.
Author: Adhy Suriady
The first step
Sticky share this button using icons Font Awesome , so make sure you always save font Awesome on your blog.Step two
Please use the code below.CSS code
.grayscale{-webkit-filter:grayscale(100%);opacity:.7;filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");transition:all 400ms ease-in-out}
.grayscale:hover{-webkit-filter:grayscale(0%);filter:grayscale(0%);filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");opacity:1}
.ani-dur{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s}
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}}
@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.9)}
100%{-moz-transform:scale(1)}}
@-ms-keyframes bounceIn{0%{opacity:0;-ms-transform:scale(.9)}
100%{-ms-transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.9)}
100%{transform:scale(1)}}
.ani-name{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-ms-animation-name:bounceIn;animation-name:bounceIn}
#shareOnscroll{position:fixed;height:auto;width:auto;left:50px;top:150px;font-size:18px}
a.gp{color:#ba3227}
a.fb{color:#324b81}
a.tw{color:#01a7de}
a.pr{color:#0a7111}
Code Javascript
<script type="text/javascript">
var siteurl = window.location.href;
var appended = false, bookmark = document.createElement("div");
bookmark.id = "shareOnscroll";
bookmark.innerHTML = '<div class="ani-dur ani-name"> \
<a class="grayscale gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse"></i></span></a><br/> \
<a class="grayscale fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a><br/> \
<a class="grayscale tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=KompiAjaib&related=kompiajaib" target="_blank" title="Share to Twitter">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a><br/> \
<a class="grayscale pr" href="javascript:print(document)" target="_blank" title="Print this Page">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-print fa-stack-1x fa-inverse"></i></span></a></div> \
';
onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;if(e>600){if(!appended){document.body.appendChild(bookmark);appended=true}}else{if(appended){document.body.removeChild(bookmark);appended=false}}};
</script>
Implementation in Blogger
Please copy and paste the CSS code above the code ]]></b:skin> or </style> then copy and paste the javascript code at the top of the code </body> . In order to share his button appear only on post pages only, please add a conditional tag just for posting on the page javascript code. And also add code //<![CDATA[ and //]]> in order for the quote at the javascript code does not change and become red. So the javascript code becomes like below.<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
//<![CDATA[
var siteurl = window.location.href;
var appended = false, bookmark = document.createElement("div");
bookmark.id = "shareOnscroll";
bookmark.innerHTML = '<div class="ani-dur ani-name"> \
<a class="grayscale gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse"></i></span></a><br/> \
<a class="grayscale fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a><br/> \
<a class="grayscale tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=KompiAjaib&related=kompiajaib" target="_blank" title="Share to Twitter">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a><br/> \
<a class="grayscale pr" href="javascript:print(document)" target="_blank" title="Print this Page">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-print fa-stack-1x fa-inverse"></i></span></a></div> \
';
onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;if(e>600){if(!appended){document.body.appendChild(bookmark);appended=true}}else{if(appended){document.body.removeChild(bookmark);appended=false}}};
//]]>
</script>
</b:if>
Implementation In Wordpress
Please copy the CSS code and certainly in the file style.php . Then please open the filefooter.php and paste the javascript code above the code </body> . In order for the share button does not appear on the front page or homepage, please go to index.php ( Main Index Template ) and then copy the code below and save it under the code <?php get_header(); ?><style scoped='scoped' type='text/css'>If anyone does not understand please ask in the comments.
#shareOnscroll{display:none}
</style>