Ditulis oleh: Ditulis pada: 10/03/2016
Berawal dari Google yang membuat sebuah situs yang merangkum ke-19 blog Google lainnya, ternyata The Keyword memiliki fitur tersembunyi yang cukup keren yaitu select text and share it. Ketika kita mem-block kalimat maka akan muncul popup untuk share kalimat tersebut di Twitter, Facebook, dan Google+. Sebenarnya fitur ini mulai muncul dari situs Medium.com, kemudian beberapa situs lainnya mulai mengikutinya termasuk The Keyword situs baru milik Google.Berawal dari situ, saya kemudian mencoba mencari cara untuk mengimplementasikan select text and share it tersebut khususnya di Blogger. Akhirnya saya menemukannya di Github.
Kemudian saya memodifikasinya agar tombol yang tampil adalah Twitter, Facebook, dan Google+ seperti di The Keyword dan tanpa harus mencantumkan app_id untuk share Facebook untuk memudahkan menggunakannya. Hasilnya bisa Anda coba pada demo, silahkan coba block text-nya di halaman demo tersebut.
Jika Anda ingin mencobanya di blog Anda, silahkan copy kode-kode di bawah ini.
1. Silahkan copy CSS style di bawah ini dan simpan di atas kode
</head>
<style type='text/css'>
/*<![CDATA[*/
@keyframes selectionSharerPopover-animation{0%{transform:matrix(.97,0,0,1,0,12);filter:alpha(opacity=0);opacity:0}
20%{transform:matrix(.99,0,0,1,0,2);filter:alpha(opacity=70);opacity:.7}
40%{transform:matrix(1,0,0,1,0,-1);filter:alpha(opacity=100);opacity:1}
100%,70%{transform:matrix(1,0,0,1,0,0);filter:alpha(opacity=100);opacity:1}
}
#selectionSharerPopover{display:none;position:absolute;top:-100px;left:-100px;z-index:1010}
#selectionSharerPopover:after{content:'';display:block;position:absolute;bottom:-3px;left:50%;margin-left:-4px;width:8px;height:8px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:#262625;box-shadow:0 0 2px #262625}
#selectionSharerPopover.anim{transition:top 75ms ease-out;animation:selectionSharerPopover-animation 180ms forwards linear;-webkit-animation:selectionSharerPopover-animation 180ms forwards linear}
#selectionSharerPopover-inner{position:relative;overflow:hidden;-webkit-border-radius:5px;border-radius:5px;border:1px solid;border-color:#262625 #1c1c1b #121211;box-shadow:0 1px 3px -1px rgba(0,0,0,.7),inset 0 0 1px rgba(255,255,255,.07),inset 0 0 2px rgba(255,255,255,.15);background-image:linear-gradient(to bottom,rgba(49,49,47,.97),#262625);background-repeat:repeat-x}
#selectionSharerPopover .selectionSharerPopover-clip{position:absolute;bottom:-11px;display:block;left:50%;clip:rect(12px 24px 24px 0);margin-left:-12px;width:24px;height:24px;line-height:24px}
#selectionSharerPopover .selectionSharerPopover-arrow{display:block;width:20px;height:20px;-webkit-transform:rotate(45deg) scale(.5);transform:rotate(45deg) scale(.5);background-color:#454543;border:2px solid #121211;box-sizing:content-box}
.selectionSharer ul{padding:0;display:inline}
.selectionSharer ul li{float:left;list-style:none;background:0 0;margin:0}
.selectionSharer a.action,.selectionSharer a.action.googleplus{display:block;text-indent:-200px;margin:5px 7px;height:20px;border:none}
.selectionSharer a.action{width:20px}
.selectionSharer a.action.googleplus{width:32px}
.selectionSharer a:hover{color:#ccc}
.selectionSharer a.tweet{background:url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='171' height='139'%3e%3cg transform='translate(-282.32053,-396.30734)'%3e%3cpath style='fill:white' d='m 453.82593,412.80619 c -6.3097,2.79897 -13.09189,4.68982 -20.20852,5.54049 7.26413,-4.35454 12.84406,-11.24992 15.47067,-19.46675 -6.79934,4.03295 -14.3293,6.96055 -22.34461,8.53841 -6.41775,-6.83879 -15.56243,-11.111 -25.68298,-11.111 -19.43159,0 -35.18696,15.75365 -35.18696,35.18525 0,2.75781 0.31128,5.44359 0.91155,8.01875 -29.24344,-1.46723 -55.16995,-15.47582 -72.52461,-36.76396 -3.02879,5.19662 -4.76443,11.24048 -4.76443,17.6891 0,12.20777 6.21194,22.97747 15.65332,29.28716 -5.76773,-0.18265 -11.19331,-1.76565 -15.93716,-4.40083 -0.004,0.14663 -0.004,0.29412 -0.004,0.44248 0,17.04767 12.12889,31.26806 28.22555,34.50266 -2.95247,0.80436 -6.06101,1.23398 -9.26989,1.23398 -2.2673,0 -4.47114,-0.22124 -6.62011,-0.63114 4.47801,13.97857 17.47214,24.15143 32.86992,24.43441 -12.04227,9.43796 -27.21366,15.06335 -43.69965,15.06335 -2.84014,0 -5.64082,-0.16722 -8.39349,-0.49223 15.57186,9.98421 34.06703,15.8094 53.93768,15.8094 64.72024,0 100.11301,-53.61524 100.11301,-100.11387 0,-1.52554 -0.0343,-3.04251 -0.10204,-4.55261 6.87394,-4.95995 12.83891,-11.15646 17.55618,-18.21305 z' /%3e%3c/g%3e%3c/svg%3e") 2px 4px no-repeat;background-size:18px}
.selectionSharer a.facebook{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 33 33' width='25' height='25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:white' d='M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") 0 2px no-repeat;background-size:18px;display:none}
.selectionSharer a.googleplus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM4kvIgWIwD5oTzTlQHPK1wQi_VhPW7ufF0UvyuE196vXBkF35dW7T0CKr7M0TEAVpHWylIPcLG2e6i4fQZ0OEQxASX3TXAOUeI4PxrJPkFHhm4hOz4PgkgKk-eAMh-08WWC3QYqfhtIcj/s1600/1475490209_40-google-plus.png) 0 -5px no-repeat;background-size:32px;color:#fff}
#selectionSharerPopunder.fixed{transition:bottom .5s ease-in-out;width:100%;position:fixed;left:0;bottom:-50px}
.selectionSharer{transition:-webkit-transform .6s ease-in-out}
.selectionSharer.moveDown{-webkit-transform:translate3d(0,60px,0)}
#selectionSharerPopunder{position:absolute;left:0;width:100%;height:0;transition:height .5s ease-in-out;background:#ccc;border:none;box-shadow:inset 0 10px 5px -10px rgba(0,0,0,.5),inset 0 -10px 5px -10px rgba(0,0,0,.5);border-radius:0;overflow:hidden}
#selectionSharerPopunder.show{height:50px}
.selectionSharerPlaceholder{height:1em;margin-bottom:-2em;transition:height .5s ease-in-out}
.selectionSharerPlaceholder.show{height:50px!important}
#selectionSharerPopunder-inner ul{overflow:hidden;float:right;margin:0}
#selectionSharerPopunder-inner ul li{padding:5px;overflow:hidden}
#selectionSharerPopunder-inner label{color:#fff;font-weight:300;line-height:50px;margin:0 20px 0 10px}
#selectionSharerPopunder-inner a{width:30px;height:30px;background-size:30px}
#selectionSharerPopunder-inner a.tweet{background-position:0 2px}
/*]]>*/
</style>
2. Silahkan simpan kode di bawah ini di atas kode
</body>. Dan pastikan bahwa Anda sudah menyimpan jquery library di blog Anda berapa pun versinya.
<script>
//<![CDATA[
!function(e){var t=function(t){var o=this;t=t||{},"string"==typeof t&&(t={elements:t}),this.sel=null,this.textSelection="",this.htmlSelection="",this.url2share=e('meta[property="og:url"]').attr("content")||e('meta[property="og:url"]').attr("value")||window.location.href,this.getSelectionText=function(e){var t="",n="";if(e=e||window.getSelection(),e.rangeCount){for(var i=document.createElement("div"),r=0,a=e.rangeCount;a>r;++r)i.appendChild(e.getRangeAt(r).cloneContents());n=i.textContent,t=i.innerHTML}return o.textSelection=n,o.htmlSelection=t||n,n},this.selectionDirection=function(e){var t=e||window.getSelection(),o=document.createRange();if(!t.anchorNode)return 0;o.setStart(t.anchorNode,t.anchorOffset),o.setEnd(t.focusNode,t.focusOffset);var n=o.collapsed?"backward":"forward";return o.detach(),n},this.showPopunder=function(){o.popunder=o.popunder||document.getElementById("selectionSharerPopunder");var e=window.getSelection(),t=o.getSelectionText(e);if(e.isCollapsed||t.length<10||!t.match(/ /))return o.hidePopunder();if(o.popunder.classList.contains("fixed"))return o.popunder.style.bottom=0,o.popunder.style.bottom;var n=e.getRangeAt(0),i=n.endContainer.parentNode;if(o.popunder.classList.contains("show")){if(Math.ceil(o.popunder.getBoundingClientRect().top)==Math.ceil(i.getBoundingClientRect().bottom))return;return o.hidePopunder(o.showPopunder)}if(i.nextElementSibling)o.pushSiblings(i);else{o.placeholder||(o.placeholder=document.createElement("div"),o.placeholder.className="selectionSharerPlaceholder");var r=window.getComputedStyle(i).marginBottom;o.placeholder.style.height=r,o.placeholder.style.marginBottom=-2*parseInt(r,10)+"px",i.parentNode.insertBefore(o.placeholder)}var a=window.pageYOffset+i.getBoundingClientRect().bottom;o.popunder.style.top=Math.ceil(a)+"px",setTimeout(function(){o.placeholder&&o.placeholder.classList.add("show"),o.popunder.classList.add("show")},0)},this.pushSiblings=function(e){for(;e=e.nextElementSibling;)e.classList.add("selectionSharer"),e.classList.add("moveDown")},this.hidePopunder=function(e){if(e=e||function(){},"fixed"==o.popunder)return o.popunder.style.bottom="-50px",e();o.popunder.classList.remove("show"),o.placeholder&&o.placeholder.classList.remove("show");for(var t=document.getElementsByClassName("moveDown");el=t[0];)el.classList.remove("moveDown");setTimeout(function(){o.placeholder&&document.body.insertBefore(o.placeholder),e()},600)},this.show=function(e){setTimeout(function(){var t=window.getSelection(),n=o.getSelectionText(t);if(!t.isCollapsed&&n&&n.length>10&&n.match(/ /)){var i=t.getRangeAt(0),r=i.getBoundingClientRect().top-5,a=r+o.getPosition().y-o.$popover.height(),s=0;if(e)s=e.pageX;else{var l=t.anchorNode.parentNode;s+=l.offsetWidth/2;do s+=l.offsetLeft;while(l=l.offsetParent)}switch(o.selectionDirection(t)){case"forward":s-=o.$popover.width();break;case"backward":s+=o.$popover.width();break;default:return}o.$popover.removeClass("anim").css("top",a+10).css("left",s).show(),setTimeout(function(){o.$popover.addClass("anim").css("top",a)},0)}},10)},this.hide=function(){o.$popover.hide()},this.smart_truncate=function(e,t){if(!e||!e.length)return e;var o=e.length>t,n=o?e.substr(0,t-1):e;return n=o?n.substr(0,n.lastIndexOf(" ")):n,o?n+"...":n},this.getRelatedTwitterAccounts=function(){var t=[],o=e('meta[name="twitter:creator"]').attr("content")||e('meta[name="twitter:creator"]').attr("value");o&&t.push(o);for(var n=document.getElementsByTagName("a"),i=0,r=n.length;r>i;i++)if(n[i].attributes.href&&"string"==typeof n[i].attributes.href.value){var a=n[i].attributes.href.value.match(/^https?:\/\/twitter\.com\/([a-z0-9_]{1,20})/i);a&&a.length>1&&-1==["widgets","intent"].indexOf(a[1])&&t.push(a[1])}return t.length>0?t.join(","):""},this.shareTwitter=function(e){e.preventDefault();var t="“"+o.smart_truncate(o.textSelection.trim(),114)+"”",n="http://twitter.com/intent/tweet?text="+encodeURIComponent(t)+"&related="+o.relatedTwitterAccounts+"&url="+encodeURIComponent(window.location.href);o.viaTwitterAccount&&t.length<114-o.viaTwitterAccount.length&&(n+="&via="+o.viaTwitterAccount);var i=640,r=440,a=screen.width/2-i/2,s=screen.height/2-r/2-100;return window.open(n,"share_twitter","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+i+", height="+r+", top="+s+", left="+a),o.hide(),!1},this.shareFacebook=function(e){e.preventDefault();var t=o.htmlSelection.replace(/<p[^>]*>/gi,"\n").replace(/<\/p>| /gi,"").trim(),n="https://www.facebook.com/sharer.php?u="+encodeURIComponent(o.url2share)+""e="+encodeURIComponent(t),i=640,r=440,a=screen.width/2-i/2,s=screen.height/2-r/2-100;window.open(n,"share_facebook","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+i+", height="+r+", top="+s+", left="+a)},this.shareGoogleplus=function(e){e.preventDefault();var t=(o.htmlSelection.replace(/<p[^>]*>/gi,"\n").replace(/<\/p>| /gi,"").trim(),"https://plus.google.com/share?url="+encodeURIComponent(o.url2share)),n=640,i=440,r=screen.width/2-n/2,a=screen.height/2-i/2-100;window.open(t,"share_googleplus","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+n+", height="+i+", top="+a+", left="+r)},this.render=function(){var t='<div class="selectionSharer" id="selectionSharerPopover" style="position:absolute;"> <div id="selectionSharerPopover-inner"> <ul> <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li> <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li> <li><a class="action googleplus" href="" title="Share this selection by email" target="_blank">Google+</a></li> </ul> </div> <div class="selectionSharerPopover-clip"><span class="selectionSharerPopover-arrow"></span></div></div>',n='<div id="selectionSharerPopunder" class="selectionSharer"> <div id="selectionSharerPopunder-inner"> <label>Share this selection</label> <ul> <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li> <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li> <li><a class="action googleplus" href="" title="Share this selection by email" target="_blank">Google+</a></li> </ul> </div></div>';o.$popover=e(t),o.$popover.find("a.tweet").click(o.shareTwitter),o.$popover.find("a.facebook").click(o.shareFacebook),o.$popover.find("a.googleplus").click(o.shareGoogleplus),e("body").append(o.$popover),o.$popunder=e(n),o.$popunder.find("a.tweet").click(o.shareTwitter),o.$popunder.find("a.facebook").click(o.shareFacebook),o.$popunder.find("a.googleplus").click(o.shareGoogleplus),e("body").append(o.$popunder),o.url2share&&e(".selectionSharer a.facebook").css("display","inline-block")},this.setElements=function(t){"string"==typeof t&&(t=e(t)),o.$elements=t instanceof e?t:e(t),o.$elements.mouseup(o.show).mousedown(o.hide).addClass("selectionShareable"),o.$elements.bind("touchstart",function(){o.isMobile=!0}),document.onselectionchange=o.selectionChanged},this.selectionChanged=function(e){o.isMobile&&(o.lastSelectionChanged&&clearTimeout(o.lastSelectionChanged),o.lastSelectionChanged=setTimeout(function(){o.showPopunder(e)},300))},this.getPosition=function(){var e=void 0!==window.pageXOffset,t="CSS1Compat"===(document.compatMode||""),o=e?window.pageXOffset:t?document.documentElement.scrollLeft:document.body.scrollLeft,n=e?window.pageYOffset:t?document.documentElement.scrollTop:document.body.scrollTop;return{x:o,y:n}},this.render(),t.elements&&this.setElements(t.elements)};e.fn.selectionSharer=function(){var e=new t;return e.setElements(this),this},"function"==typeof define?define(function(){return t.load=function(e,o,n){var i=new t;i.setElements("p"),n()},t}):window.SelectionSharer=t}(jQuery);
$('.post-body').selectionSharer();
//]]>
</script>
Selesai... sekarang silahkan tes dengan mem-block kalimat di postingan blog Anda.