Update Pinterest Button To Share Button Javascript

Postingan kali ini aku buat untuk meng-update postingan sebelumnya wacana social share button dengan javascript. Pada postingan sebelumnya, aku belum dapat menambahkan button atau link untuk share ke Pinterest alasannya selalu gagal untuk mendapat url image postingannya.

Saya pikir mau tidak mau untuk menciptakan share button Pinterest memang harus memakai js dari Pinterest. Namun aku tidak frustasi untuk mencari cara untuk menambahkan link share Pinterest ke social media share button dengan javascript tersebut tanpa menciptakan error share button-nya dan tetap mempunyai loading yang ringan.

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

DEMO

Kode yang aku tambahkan ibarat berikut:

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

dan sebuah javascript untuk memanggil pinmarklet.js Pinterest secara dinamis dikala 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 isyarat JavaScript-nya menjadi ibarat berikut (untuk isyarat 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="Update Pinterest Button To Share Button JavaScript">\
     <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="Update Pinterest Button To Share Button JavaScript">\
     <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="Update Pinterest Button To Share Button JavaScript">\
     <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="Update Pinterest Button To Share Button JavaScript">Digg</a></li> \
     <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Update Pinterest Button To Share Button JavaScript">Linkedin</a></li> \
     <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Update Pinterest Button To Share Button JavaScript">Stumbleupon</a></li> \
     <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Update Pinterest Button To Share Button JavaScript">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="Update Pinterest Button To Share Button JavaScript">Tumblr</a></li> \
     <li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Update Pinterest Button To Share Button JavaScript">BufferApp</a></li> \
     <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Update Pinterest Button To Share Button JavaScript">Pocket</a></li> \
     <li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Update Pinterest Button To Share Button JavaScript">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...
Sumber https://www.kompiajaib.com/

Share this post