Membuat Popup Pada Link Share Media Sosial

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/09/2015

Jika Anda menggunakan custom social media sharing tool di blog Anda, biasanya tidak akan muncul popup ketika berbagi ke media sosial dengan klik link-nya, namun akan menuju ke halaman penuh.

Nah kebetulan saya menemukan sebuah javascript yang dapat dengan mudah untuk membuat popup pada custom social media sharing tool. Namun saya modifikasi sedikit sehingga popup-nya muncul di tengah-tengah layar.

Sebagai contoh, di bawah ini adalah contoh link untuk sharing ke Linkedin.

<a href="//www.linkedin.com/shareArticle?mini=true&amp;url=http://www.kompiajaib.com/" target="_blank" title="Share This On Linkedin">Share This On Linkedin</a>

Nah untuk membuat popup pada link di atas tadi silahkan tambahkan javascript di bawah ini di atas kode </body>

<script>

//<![CDATA[

var postEl=document.getElementsByClassName("social-popup"),postCount=postEl.length;for(i=0;i<postCount;i++)postEl[i].addEventListener("click",function(e){var t=this.getAttribute("href"),o=screen.width/2-250,s=screen.height/2-250;window.open(t,"popUpWindow","width=500,height=500,left="+o+",top="+s+",resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes")});

//]]>

</script>

Kemudian tambahkan kode class="social-popup" pada link-nya sehingga menjadi seperti berikut ini, tambahkan juga pada link lainnya jika ada.

<a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=http://www.kompiajaib.com/" target="_blank" title="Share This On Linkedin">Share This On Linkedin</a>

Bagaimana, mudah bukan? Selamat mencoba.