AMP Disqus

Ada 3 hal yang harus diperhatikan cara memasang/menginstal widget komentar disqus di blog AMP - blogspot AMP:

Widget Komentar Disqus AMP
Host Script Disqus AMP
Script widget pada Blog AMP

Cara Membuat Komentar Disqus AMP

Berikut ini adalah script widget komentar disqus untuk blog AMP, misalnya: blogspot - copy dan paste script/kode berikut di github pages, seperti contoh: nethherman.github.io/index.html.

<div id="disqus_thread"></div>
<script>
var parentUrl = document.referrer;
var disqus_config = function () {
this.page.url = parentUrl;
this.page.identifier = parentUrl;
};
//Github Default
(function () {
var d = document, s = d.createElement('script');
s.src = '//SITE_SHORTNAME_ANDA_DISINI.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
(function () {
function checkSizeChange() {
var viewportHeight = window.innerHeight;
var contentHeight = document.getElementById('disqus_thread').clientHeight;
if (viewportHeight !== contentHeight && contentHeight > 100) {
window.parent.postMessage({
sentinel: 'amp',
type: 'embed-size',
height: contentHeight
}, '*')
}
}
var mutationObserverAvailable = typeof window.MutationObserver === 'function';
function bindObserver() {
var frame = document.getElementsByTagName('iframe')[0];
if (frame === null || frame === undefined) {
setTimeout(bindObserver, 200);
return;
}
checkSizeChange();
var resizeObserver = new MutationObserver(checkSizeChange);
resizeObserver.observe(frame, {
attributes: true,
attributeFilter: ['style']
});
}
if (mutationObserverAvailable) {
bindObserver();
}
setInterval(checkSizeChange, mutationObserverAvailable ? 5000 : 500);
})();
</script>

Host Script Disqus AMP

Selanjutnya, menghostkan (baca:menyimpan) script tersebut diatas di sebuah halaman github (github pages). Baca lebih lanjut mengenai: tutorial cara membuat halaman github.
Bila halaman github telah dibuat, buatlah halaman index.html dengan mengklik (create newfile) dan beri nama: index.html lalu copy dan paste script widget komentar disqus AMP diatas ke file index.html tersebut lalu simpan dan selesai.

Script Widget pada Blog AMP

Berikutnya adalah menempel (paste) script widget komentar disqus di Blog AMP anda. DIbawah ini script widget disqus AMP yang harus dipasang di halaman HTML blog anda.

Script Widget Disqus AMP sebelum diparse:

Script Widget Disqus AMP setelah diparse:

Penting! Sebelum Memasang Widget Disqus AMP di Blog:

Sebelum memasang widget disqus AMP di blogspot, taruhlah link "amp-iframe" didalam tag head,sbb:

Link amp-iframe:

Letak link amp-iframe di dalam tag head:

Bila ada pertanyaan mengenai cara membuat kolom komentar disqus di blog Amp ini silahkan konsultasikan dan tanya via WhatsApp. Semoga bermanfaat.

Citation:
Klikdesainweb, “Cara Pasang Komentar Disqus di Blog AMP,” Klikdesainweb (Klikdesainweb, September 05, 2017), https://www.klikdesainweb.com/2017/09/memasang-disqus-pada-blogger-amp.html.