Social Share Button No JS With Javascript

Ditulis oleh: Adhy Suryadi
Ditulis pada: 5/20/2015

Beberapa waktu yang lalu telah membagikan share button yang melayang di pinggir blog dengan javascript. Nah kali ini saya modifikasi share button tersebut dan menjadikannya statis dan berjejer ke samping agar bisa disimpan di bawah artikel postingan.

Kemudian saya juga menambahkan link share ke lebih banyak sosial media lainnya seperti Digg, Linkedin, Stumbleupon, Delicious, Tumblr, BufferApp, Pocket, dan Evernote. Link-link sharing sosmed tersebut saya buat show hide dengan klik pada tombol Plus seperti tampak pada gambar aniasi gif di atas tadi.

Social Share Button ini tidak menyertakan js dari masing-masing share button, hanya menggunakan link share saja sehingga tidak akan membebani loading blog. Dan untuk show hide link tambahannya saya membuatnya menjadi 2 versi yang menggunakan javascript dan jquery sehingga jika versi javascriptnya tidak jalan bisa mencoba menggunakan versi jquery.

Jika ingin mencobanya, silahkan copy kode-kode di bawah ini.

Kode CSS
Simpan kode css ini di atas kode ]]></b:skin> atau </style>


.share,h2.sharetitle{display:inline-block;float:left;margin-right:10px}

h2.sharetitle{font-size:24px;margin-top:6px;font-weight:600}

.sharethis{position:relative;margin-bottom:20px}

.share{position:relative;}

a.gp{color:#ba3227}

a.fb{color:#324b81}

a.tw{color:#01a7de}

a.pr{color:#0a7111}

span.pl{color:green;cursor:pointer}

a.fb .fa-stack-1x,a.gp .fa-stack-1x,a.pr .fa-stack-1x,a.tw .fa-stack-1x,span.pl .fa-stack-1x{position:absolute;left:0px;top:2px}

#share-menu{display:none}

.dropdown-menu{position: absolute;top: 100%;right:2px;z-index: 1000;float: left;min-width: 100px;padding: 5px 10px;margin: 2px 0 0;font-size: 14px;text-align: left;list-style: none;background-color: #fff;-webkit-background-clip: padding-box;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0,0,0,.15);border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);box-shadow: 0 6px 12px rgba(0,0,0,.175);}

.dropdown-menu li{list-style: none!important;margin: 0!important;padding-left:0!important;line-height: 1.8em!important;}

.dropdown-menu li a{color:#333!important;font-weight:400;display:block}

.dropdown-menu li a:hover{color:#e8554e!important;}

Kemudian simpan kode-kode javascript di bawah kode ini atau yang seperti ini


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

  <data:post.body/>

</b:if>

      <div class='clear'/> <!-- clear for photos floats -->

    </div>

Kode Javascript

1. Show Hide Dengan Javascript


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h2 class='sharetitle'>Share this:</h2>

<script type='text/javascript'>

//<![CDATA[

var siteurl = window.location.href;

  document.write('<div class="sharethis"><div class="share"> \

<a class="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> \

<a class="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> \

<a class="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> \

    <span class="fa-stack fa-lg pl" data-target="#share-menu"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-plus fa-stack-1x fa-inverse"></i></span> \

<ul class="dropdown-menu" id="share-menu"> \

    <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \

    <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \

    <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \

    <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \

    <li><a href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \

    <li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \

    <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \

    <li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \

    </ul> \

</div><div class="clear"></div></div> \

');

var button=document.querySelector(".pl");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="block"==t.style.display?"none":"block"});

//]]>

</script>

</b:if>

Ganti kode KompiAjaib yang saya marking dengan username Twitter Anda.

DEMO

2. Show Hide Dengan Jquery
Pastikan Anda sudah menyimpan Jquery Library berapa pun versinya di blog Anda.


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h2 class='sharetitle'>Share this:</h2>

<script type='text/javascript'>

//<![CDATA[

var siteurl = window.location.href;

  document.write('<div class="sharethis"><div class="share"> \

<a class="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> \

<a class="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> \

<a class="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> \

    <span class="fa-stack fa-lg pl"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-plus fa-stack-1x fa-inverse"></i></span> \

<ul class="dropdown-menu" id="share-menu"> \

    <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \

    <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \

    <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \

    <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \

    <li><a href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \

    <li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \

    <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \

    <li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \

    </ul> \

</div><div class="clear"></div></div> \

');

$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});

//]]>

</script>

</b:if>

Ganti kode KompiAjaib yang saya marking dengan username Twitter Anda.

DEMO

Karena share button ini menggunakan ikon Font Awesome, jadi pastikan Anda sudah memasang Font Awesome di blog Anda. Social Share Button ini bisa dipasang di Blogger maupun Wordpress.

Karena kode CSS tiap blog berbeda-beda, maka kadang-kadang bisa mempengaruhi kode css widget yang baru di pasang seperti widget ini khususnya untuk posisi ikon font awesome. Jika posisi ikonnya tidak berada di tengah, maka silahkan sesuaikan posisi left pada css di bawah ini.


a.fb .fa-stack-1x,a.gp .fa-stack-1x,a.pr .fa-stack-1x,a.tw .fa-stack-1x,span.pl .fa-stack-1x{position:absolute;left:0px;top:2px}

Social Share Button No JS With Javascript

Ditulis oleh: Adhy Suryadi Ditulis pada: 5/20/2015

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 5/20/2015