Ditulis oleh: Ditulis pada: 4/10/2021
Memasang Disqus Recommendations di Luar Komentar - Sebelumnya kita ketahui kalau di komentar Disqus bisa memunculkan widget recommendation yang dapat ditampilkan di atas atau di bawah komentar. Widget rekomendasi dari Disqus ini menampilkan 8 buah random post dengan carousel dengan tampilan yang bisa diatur.
Baru-baru ini Disqus mengumumkan bahwa widget Disqus Recommendations dapat dipasang di luar komentar, bahkan tanpa komentar Disqus sekalipun.
Disqus Recommendations
Jadi, widget ini bisa dipasang di header, di atas atau di bawah postingan, atau di atas footer dengan posisi horizontal secara mandiri, baik blog tersebut menggunakan komentar Disqus atau tanpa komentar Disqus.
Untuk tampilannya di desktop dan di mobile seperti gambar berikut:
Ada 4 style layout untuk tampilan Disqus Recommendations ini yang bisa di atur dari dashboard Disqus untuk blognya di bagian Recommendations.
Jika Anda ingin mencoba memasangnya, silahkan gunakan kode-kode berikut ini, silahkan pilih yang sesuai.
Kode Asli dari Disqus
Simpan kode berikut di atas kode </body>
<script>
//<![CDATA[
(function() { // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
var d = document, s = d.createElement('script'); // IMPORTANT: Replace EXAMPLE with your forum shortname!
s.src = 'https://kompiajaib.disqus.com/recommendations.js'; s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
//]]>
</script>Sesuaikan kode kompiajaib yang ditandai dengan shortname Disqus blog Anda. Kemudian silahkan simpan kode berikut di mana Anda ingin menampilkan widgetnya.
<div id="disqus_recommendations"></div>Asynchronous
Simpan kode berikut di atas kode </body>
<script>
//<![CDATA[
(function() { // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
var d = document, s = d.createElement('script'); // IMPORTANT: Replace EXAMPLE with your forum shortname!
s.src = 'https://kompiajaib.disqus.com/recommendations.js'; s.async = true; s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
//]]>
</script>Sesuaikan kode kompiajaib yang ditandai dengan shortname Disqus blog Anda. Kemudian silahkan simpan kode berikut di mana Anda ingin menampilkan widgetnya.
<div id="disqus_recommendations"></div>Defer
Simpan kode berikut di atas kode </body>
<script>
//<![CDATA[
function downloadJSAtOnload(){
var d = document, s = d.createElement('script'); // IMPORTANT: Replace EXAMPLE with your forum shortname!
s.src = 'https://kompiajaib.disqus.com/recommendations.js'; s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>Sesuaikan kode kompiajaib yang ditandai dengan shortname Disqus blog Anda. Kemudian silahkan simpan kode berikut di mana Anda ingin menampilkan widgetnya.
<div id="disqus_recommendations"></div>Lazyload
Simpan kode berikut di atas kode </body>
<script>
//<![CDATA[
var lazyDisqusRecommendations=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&lazyDisqusRecommendations===!1||0!=document.body.scrollTop&&lazyDisqusRecommendations===!1)&&(!function(){
var d = document, s = d.createElement('script'); // IMPORTANT: Replace EXAMPLE with your forum shortname!
s.src = 'https://kompiajaib.disqus.com/recommendations.js'; s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
}(),lazyDisqusRecommendations=!0)},!0),window.onscroll=function(){scrollFunction()};
//]]>
</script>Kemudian silahkan simpan kode berikut di mana Anda ingin menampilkan widgetnya.
<div id="disqus_recommendations"></div>Untuk blog AMP, saya buatkan di postingan selanjutnya ya.
UPDATE
Saya sudah buatkan widget Disqus Recommendations ini untuk blog AMP HTML, silahkan simak di postingan berikut: Disqus Recommendations AMP HTML.