Cara Pasang Komentar Disqus di Blog AMP

AMP Disqus

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

1. Widget Komentar Disqus AMP
2. Host Script Disqus AMP
3. 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.

<!--
-------------------------- Please do not remove this following CREDIT --------------------------
disqus comment for AMP Blogspot - blogger.com, revised and optimized by Klikdesainweb
homepage: https://www.klikdesainweb.com
hubungi Jasa Website:+62 895-2637-5787.
Address: Bukit kemuning, Lampung Utara, Lampung 34556 - Indonesia
Jasa Pembuatan Website
-------------------------- Please do not remove this following CREDIT --------------------------
-->

<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:

<div class='disqus-comments' id='disqus-comments'>
<amp-iframe expr:src='&quot;https://URL_HALAMAN_GITHUB_ANDA?disqus_title=&quot; + data:blog.title + &quot;&amp;url=&quot; + data:blog.url + &quot;&amp;disqus_name=https://SITE_SHORTNAME_ANDA.disqus.com/embed.js&quot;' frameborder='0' height='240' layout='responsive' resizable='' sandbox='allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts' width='600'> <div aria-label='Read more' overflow='' role='button' tabindex='0'></div></amp-iframe>
</div>

Script Widget Disqus AMP setelah diparse:

&lt;div class='disqus-comments' id='disqus-comments'&gt;
&lt;amp-iframe expr:src='&amp;quot;https://URL_HALAMAN_GITHUB_ANDA?disqus_title=&amp;quot; + data:blog.title + &amp;quot;&amp;amp;url=&amp;quot; + data:blog.url + &amp;quot;&amp;amp;disqus_name=https://SITE_SHORTNAME_ANDA.disqus.com/embed.js&amp;quot;' frameborder='0' height='240' layout='responsive' resizable='' sandbox='allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts' width='600'&gt; &lt;div aria-label='Read more' overflow='' role='button' tabindex='0'&gt;&lt;/div&gt;&lt;/amp-iframe&gt;
&lt;/div&gt;

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:

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

Letak link amp-iframe di dalam tag head:

<head>
<script async='' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
</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.