Update Pinterest Button To Share Button JavaScript

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/07/2015

Postingan kali ini saya buat untuk meng-update postingan sebelumnya tentang social share button dengan javascript. Pada postingan sebelumnya, saya belum bisa menambahkan button atau link untuk share ke Pinterest karena selalu gagal untuk mendapatkan url image postingannya.

Saya pikir mau tidak mau untuk membuat share button Pinterest memang harus menggunakan js dari Pinterest. Namun saya tidak putus asa untuk mencari cara untuk menambahkan link share Pinterest ke social media share button dengan javascript tersebut tanpa membuat error share button-nya dan tetap memiliki loading yang ringan.

Akhirnya saya menemukan cara yang lebih efisien untuk menambahkan link share Pinterest ini seperti pada demo JSFidle berikut (link share Pinterest klik tanda Plus):


Kode yang saya tambahkan seperti berikut:

<li><a href="javascript:pinIt();">Pinterest</a></li>\

dan sebuah javascript untuk memanggil pinmarklet.js Pinterest secara dinamis ketika ada perintah klik pada link Pinterest-nya.

function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("async","async"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};

Sehingga secara keseluruhan kode JavaScript-nya menjadi seperti berikut (untuk kode CSS-nya silahkan ambil dari postingan sebelumnya):

<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="javascript:pinIt();">Pinterest</a></li>\

    <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"});

function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};

//]]>

</script>

</b:if>

Selamat mencoba...