Menunda Pemuatan Komentar Facebook Dan Disqus Dengan Onclick Dan Show Hide
Kali ini postingan ini aku buat untuk memenuhi permintan sobat Kompi, mas +Rico Ds untuk menciptakan penundaan pemuatan komentar Facebook dan Disqus serta dilengkapi dengan tombol show hide komentar menyerupai yang aku gunakan di salah satu blog saya.Penundaan komentar Facebook dan Disqus ini memakai 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 cantik untuk memperingan loading blog, sehingga pengunjung tidak kesulitan untuk mengakses blog kita terutama yang memakai 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 menciptakan menyerupai itu silahkan ikuti langkah-langkahnya di bawah ini.
1. Silahkan simpan CSS di bawah ini di atas arahan
</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 arahan
</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 arahan
USERNAMEDISQUS dengan username Disqus blog Anda. Jika di blog sudah terdapat arahan js Facebook menyerupai 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 menyerupai tombol Like dan Like Box yang memakai arahan js di atas niscaya tidak akan jalan, jadi silahkan ganti dengan yang tampa mengunakan js Facebook.
Baca juga:
3. Cari arahan menyerupai di bawah ini lalu silahkan copy dan paste di notepad untuk jaga-jaga kalau suatu ketika ingin balik lagi ke komentar Blogger.
<b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>
4. Kemudian silahkan ganti arahan di atas dengan arahan 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 arahan CSS-nya.
Selamat mencoba dan biar bermanfaat......
Sumber https://www.kompiajaib.com/
0 Response to "Menunda Pemuatan Komentar Facebook Dan Disqus Dengan Onclick Dan Show Hide"
Posting Komentar