Ditulis oleh: Ditulis pada: 10/12/2015
Kali ini postingan ini saya buat untuk memenuhi permintan sahabat Kompi, mas +Rico Ds untuk membuat penundaan pemuatan komentar Facebook dan Disqus serta dilengkapi dengan tombol show hide komentar seperti yang saya gunakan di salah satu blog saya.Penundaan komentar Facebook dan Disqus ini menggunakan javascript onclick yang artinya js dari kedua widget komentar tersebut tidak akan di-load ketika halaman diakses, namun akan di-load ketika tombolnya diklik.
Hal ini tentunya bagus untuk memperingan loading blog, sehingga pengunjung tidak kesulitan untuk mengakses blog kita terutama yang menggunakan perangkat mobile. Dan ketika akan berkomentar tinggal klik tombol load komentar.
Komentar Facebook dan Disqus ini akan dipasangkan bersamaan, komentar Facebook ditempatkan di atas komentar Disqus. Sebagai DEMO silahkan coba lihat di sini.
Untuk membuat seperti itu silahkan ikuti langkah-langkahnya di bawah ini.
1. Silahkan simpan CSS di bawah ini di atas kode
</head>
<b:if cond='data:blog.pageType == "item"'>
<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>
2. Silahkan simpan javascript di bawah ini di atas kode
</body>
<b:if cond='data:blog.pageType == "item"'>
<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 = "USERNAMEDISQUS";
function loadDisqus(){var e=document.getElementById("disqus-loader");e.style.display="none";var e=document.getElementById("disqus-showhide");e.style.display="block";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_item.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();}
</script>
<div id='fb-root'/>
</b:if>
Silahkan ganti kode
USERNAMEDISQUS dengan username Disqus blog Anda. Jika di blog sudah terdapat kode js Facebook seperti di bawah ini silahkan 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>
Untuk widget Facebook lainnya seperti tombol Like dan Like Box yang menggunakan kode js di atas pasti tidak akan jalan, jadi silahkan ganti dengan yang tampa mengunakan js Facebook.
Baca juga:
3. Cari kode seperti di bawah ini kemudian silahkan copy dan paste di notepad untuk jaga-jaga jika suatu saat ingin balik lagi ke komentar Blogger.
<b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>
4. Kemudian silahkan ganti kode di atas dengan kode di bawah ini:
<b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-title'>Facebook Comments<span class='fb-loader' id='fb-loader' onclick='loadFacebook()'>Show</span><span id='fb-showhide' onclick='toggleNavPanel('fb-comment')'>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('disqus-comments')'>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 = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
</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>
5. Kemudian silahkan SAVE edit HTML blog Anda.
Untuk mengatur tampilan tombol dan lainnya silahkan atur-atur di kode CSS-nya.
Selamat mencoba dan semoga bermanfaat......