Cara Pasang Komentar Disqus di Blog AMP

Cara Memasang Komentar Disqus di Blog AMP

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

Widget Komentar Disqus AMP

Berikut ini adalah script widget komentar disqus untuk blog AMP, misalnya: blogspot.

<!--
-------------------------- Please do not remove this following CREDIT --------------------------
disqus comment for AMP Blogspot - blogger.com, revised and optimized by Neth Herman
homepage: https://nethherman.blogspot.com
Contact: 0882-2522-6922
Address: Banjarsari, Tempurejo, Magelang 56161 - Indonesia
KONSULTAN SEO MAGELANG
-------------------------- Please do not remove this following CREDIT --------------------------
-->
<!--
Part 1: Copy & Paste this following script to github pages, etc: 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:

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


Catatan:
Bila masih bingung cara memasang widget komentar disqus di blogspot AMP, silahkan kontak neth herman secara langsung via akun fb.
Related official resources: https://github.com/disqus/disqus-install-examples/tree/master/google-amp

---

By Konsultan SEO | SEO Services Indonesia (0882-2522-6922)