Membuat Penundaan Komentar Facebook Dan Disqus Dengan Onclick Show Hide

Halo teman jumpa lagi di Postingan lanjutan dibalikseo, kali ini aku akan membahas mengenai Pemuatan Komentar pada blog yang menggunakan Komentar Facebook dan Disqus, namun ada cara yang sedikit berbeda yaitu kita akan menampilkan Komentar Facebbok dan Disqus tersebut pada Blog dengan menunda pemuatannya, jadi komentar akan muncul hanya pada dikala di klik tombol komentarnya saja, tentu hal ini akan menambah kecepatan loading juga pada postingan blog kita nantinya, alasannya yaitu loading tidak membaca komentar yang berasal dari komentar facebook dan Disqus yang sudah kita pasang pada komentar blog kita.

Untuk pemasangan ini dilengkapi juga dengan tombol show hide yang juga aku gunakan pada salah satu Blog saya. Metode ini menggunakan arahan Javascript onclick yang fungsinya js dari komentar Facebook dan Disqus dikala halaman diakses pengunjung tidak akan men-load tapi akan men-load atau Respon dikala tombolnya di klik saja.

Cara ini juga tentu akan mempermudah dikala pengunjung mengakses blog kita menggunakan perangkat mobile menjadi lebih ringan dan tidak memakan banyak ruang jadi dikala pengunjung ingin berkomentar cukup klik saja secara otomatis kolom komentar gres akan muncul.

Bagaimana tertarik, bagi teman yang mau mencobanya Membuat Penundaan Komentar Facebook Dan Disqus Dengan Onclick Show Hide mari kita bahas bersama.

Langkah Pertama

Silahkan teman salin arahan CSS dibawah ini lalu letakkan sempurna diatas arahan </head>  

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .comments,.comments-fb{background:#262626;clear:both;margin:0 20px;line-height:1em;padding:0 12px;} #comments{padding:10px 20px;margin-top:0;display:none} .fb-comments,.fb_iframe_widget span,.fb_iframe_widget iframe{width:100%!important} .fb-comments{padding:0!important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} .fb-title,.disqus-title{margin:0 20px;text-align:left;background:#111;padding:6px 10px;color:#f7f7f7!important;font-size:120%;font-weight:700} #disqus-title{margin:20px 20px 0!important;} .fb-loader,#fb-showhide,.disqus-loader,#disqus-showhide{float:right;cursor:pointer} #fb-comment,#disqus-showhide,#fb-showhide{display:none} </style> </b:if>

Langkah Ke Dua
Silahkan salin kembali arahan Javascript berikut ini lalu letakkan diatas arahan </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ function loadFacebook(){var e=document.getElementById("fb-loader");e.style.display="none";var e=document.getElementById("fb-comment");e.style.display="block";var e=document.getElementById("fb-showhide");e.style.display="block";!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");} function toggleNavPanel(e){var n=document.getElementById(e),l=document.getElementById("fb-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")}; function toggleNavPanel2(e){var n=document.getElementById(e),l=document.getElementById("disqus-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")}; //]]> var disqus_shortname = &quot;USERDISQUS&quot;; function loadDisqus(){var e=document.getElementById(&quot;disqus-loader&quot;);e.style.display=&quot;none&quot;;var e=document.getElementById(&quot;disqus-showhide&quot;);e.style.display=&quot;block&quot;;!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();} </script> <div id='fb-root'/> </b:if>

Perhatikan arahan yang ditandai USERDISQUS silahkan teman ganti dengan User Disqus Sobat. Dan perhatikan kalau di blog teman sudah pernah terpasang arahan js facebook menyerupai dibawah ini silahkan teman hapus.

<div id='fb-root'/> <script type='text/javascript'> !function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk"); </script>

Karena kalau masih menggunakan arahan js facebook menyerupai diatas tombol like dan like box tidak akan mampu jalan, jadi aku sarankan silahkan teman ganti dengan yang tidak menggunakan JS Facebook.


Langkah Ke Tiga
Silahkan teman cari arahan menyerupai dibawah ini lalu silahkan simpan di notepad tujuannya kalau nanti teman mau balik lagi hanya menggunakan komentar Blogger.

            <b:includable id='comments' var='post'> ........... ........... ........... </b:includable>

Langkah Ke Empat
Setelah arahan diatas sudah diselamatkan dan disimpan sekarang silahkan teman ganti arahan diatas menggunakan arahan dibawah ini.

            <b:includable id='comments' var='post'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='fb-title'>Facebook Comments<span class='fb-loader' id='fb-loader' onclick='loadFacebook()'>Show</span><span id='fb-showhide' onclick='toggleNavPanel(&apos;fb-comment&apos;)'>Hide</span></div> <div class='comments-fb'> <b:include data='post' name='fb-comments'/>               </div> <div class='disqus-title' id='disqus-title'>Disqus Comments<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load</span><span id='disqus-showhide' onclick='toggleNavPanel2(&apos;disqus-comments&apos;)'>Hide</span></div> <div id='disqus-comments'> <div class='comments' id='comments'> <b:include data='post' name='disqus-comment'/> </div>                 </div> </b:if> </b:includable>             <b:includable id='disqus-comment' var='post'>             <script type='text/javascript'>                 var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;                 if (!disqus_blogger_current_url.length) {                     disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;                 }                 var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;                 var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;             </script>             </b:includable>             <b:includable id='fb-comments' var='post'>             <div class='fb-comments' data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' id='fb-comment'/>             </b:includable>

Langkah Ke Lima
Perhatikan baik-baik penerapan kode-kode diatas ada baiknya di backup terlebih dahulu templated blognya jaga-jaga kalau terjadi error mampu teman kembalikan lagi, Jika dirasa sudah sesuai Silahkan di SAVE dan Selesai, Selamat Mencoba.