Membuat Penundaan Komentar Facebook Dan Disqus Dengan Onclick Show Hide

Halo sobat jumpa lagi di Postingan lanjutan dibalikseo, kali ini saya 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 saat di klik tombol komentarnya saja, tentu hal ini akan menambah kecepatan loading juga pada postingan blog kita nantinya, karena 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 saya gunakan pada salah satu Blog saya. Metode ini menggunakan kode Javascript onclick yang fungsinya js dari komentar Facebook dan Disqus saat halaman diakses pengunjung tidak akan men-load tapi akan men-load atau Respon saat tombolnya di klik saja.

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

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

Langkah Pertama

Silahkan sobat salin kode CSS dibawah ini lalu letakkan tepat diatas kode </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 kode Javascript berikut ini lalu letakkan diatas kode </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 kode yang ditandai USERDISQUS silahkan sobat ganti dengan User Disqus Sobat. Dan perhatikan jika di blog sobat sudah pernah terpasang kode js facebook seperti dibawah ini silahkan sobat 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 jika masih menggunakan kode js facebook seperti diatas tombol like dan like box tidak akan bisa jalan, jadi saya sarankan silahkan sobat ganti dengan yang tidak menggunakan JS Facebook.


Langkah Ke Tiga
Silahkan sobat cari kode seperti dibawah ini lalu silahkan simpan di notepad tujuannya kalau nanti sobat mau balik lagi hanya menggunakan komentar Blogger.

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

Langkah Ke Empat
Setelah kode diatas sudah diselamatkan dan disimpan sekarang silahkan sobat ganti kode diatas menggunakan kode 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 jika terjadi error bisa sobat kembalikan lagi, Jika dirasa sudah sesuai Silahkan di SAVE dan Selesai, Selamat Mencoba.