KONSULTAN SEO INDONESIA
JASA LAYANAN INTERNET MARKETING INDONESIA
Phone: 0882-2522-6922 (hunting/wa)
Alamat: Konsultan SEO, KM.8, Jl. Magelang-purworejo, Banjarsari, Tempurejo, Tempuran,
Magelang, Jawa Tengah 56161, Indonesia

Frustasi dengan Ranking Situs/Website Anda? Terkena Finalti/Banned? atau, Dispamming Pesaing anda? Hubungi Kami Sekarang Juga: 0882-2522-6922 (Wa)

Kami mengatasi semua permasalahan seputar SEO, perbaikan kecepatan website, bug website, web security, Pembuatan plugin Wordpress, Pembuatan Theme Wordpress, Blogspot dan Templat Blogspot AMP-HTML, Instal dan Jual VPS, Domain dan cPanel, dan menerima Order Maintenan Website dengan Biaya Jasa Super Murah (per bulan)

Disqus Blog AMP

Cara Memasang Komentar Disqus ke Blog AMP dengan Mudah | Terima Pembuatan Website | Neth Herman.


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: http://nethherman.blogspot.co.id
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

No comments:

KONSULTAN SEO INDONESIA


Konsultan SEO Indonesia
Blog https://nethherman.blogspot.co.id menggunakan cookies untuk mendukung tampilan iklan, layanan google dan sebagainya.
Dengan mengunjungi blog Konsultan SEO Indonesia ini berarti anda telah menyetujui Kebijakan Privasi kami. Terimakasih