Cari File Download Firmware Gratis

Cara Hosting Sendiri Komentar Disqus Plugin AMP for WP

Bagi yang menggunakan plugin AMP for WP ada sesuatu yang berbeda pada settingan komentar Disqus, yang biasanya kita cukup mengaktifkannya saja maka semuanya sudah bisa muncul dengan normal di tampilan AMP.

Tetapi di update versi baru ini AMP for WP tepatnya 0.9.97.24 update, ada dua pilihan untuk wordpress yang menggunakan komentar disqus, yaitu untuk yang menggunakan HTTP saja dan blog yang menggunakan HTTPS semuanya support untuk menggunakan komentar jenis disqus pada plugin ini.

  • Aktifkan Host on AMPforWP API untuk blog yang Non HTPS
  • Dan Disqus Host file untuk yang menggunakan HTTPS
Disqus Host FIle

Bagaimana Untuk BLog Non HTTPS

Bagi yang menggunakan wordpress non https maka anda cukup mengaktifkan pilihan Host on AMPforWP API, sehingga tidak akan ada error AMP jika diaktifkan pilihan ini khusus yang non HTTPS.

Bagaimana Untuk Blog HTTPS

Untuk blog wordpress yang mengaktiifkan https dan menggunakan plugin AMP for WP, maka agar tetap valid AMP maka harus memilih Disqus Host File.

Tetapi urusan belum selesai, karena kita harus menyimpan (host) sendiri komentar disqus ini dengan menambahkan subdomain di blog wordpress kita.

Tahapan Host On File Komentar Disqus

Jadi kita harus menyimpan file bernama disqus.php yang diupload pada subdomain bernama comments pada blog anda. Nanti urlnya menjadi

https://comments.DOMAINANDA.com/disqus.php

1. Membuat Subdomain Comments pada Blog Anda

Jadi kita akan membuat subdomain https://comments.DOMAINANDA.com

Silahkan masuk ke CPanel, pada bagian Domains klik Subdomain

Tambah Subdomain

Beri nama subdomain : comments lalu pilih domain anda,

Cara Hosting Sendiri Komentar Disqus Plugin AMP for WP 1

2. Membuat file Disqus.php

Kemudian kembali ke CPanel dan pilih File Manager

File Manager

Di bilah kiri pilih folder comments.abihp.com lalu di atas pilih +File kmudian ketik nama file tersebut disqus.php lalu pilih create new file

Disqus.php

Setelah itu klik nama file disqus.php tadi lalu pilih Edit

Disqus

Kemudian pada halaman editor silahkan paste kode html berikut ini:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="utf-8">
        <title>Disqus for AMP</title>
        <meta name="viewport" content="width=device-width,minimum-scale=1">
        <style>
html, body {
    margin: 0;
    padding: 0;
}
        </style>
    </head>
    <body>
        <div id="disqus_thread"></div>
        <script>
        var QueryString = function () {
            var query_string = {};
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if (typeof query_string[pair[0]] === "undefined") {
                    query_string[pair[0]] = decodeURIComponent(pair[1]);
                } else if (typeof query_string[pair[0]] === "string") {
                    var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
                    query_string[pair[0]] = arr;
                } else {
                    query_string[pair[0]].push(decodeURIComponent(pair[1]));
                }
            }
            return query_string;
        }();
        var url = QueryString.url;
        var identifier = QueryString.identifier;
        var disqus_name = QueryString.disqus_name;
        var disqus_title = QueryString.disqus_title;
        var disqus_config = function () {
            this.page.url = url;
            this.page.title = disqus_title;
            this.page.identifier = identifier || url;
        };
        (function () {
            var d = document, s = d.createElement('script');
            s.src = disqus_name;
            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 foundframe = false,
                    frame, framename,
                    frames = document.getElementsByTagName('iframe');
                for (var i=0; i < frames.length; ++i) {
                    frame = frames[i];
                    framename = frame.getAttribute("name");
                    if ( framename && /dsq/.test(framename) ) {
                        // check the size now since the frame is now available
                        checkSizeChange();
                        var resizeObserver = new MutationObserver(checkSizeChange);
                        resizeObserver.observe(frame, {
                            attributes: true,
                            attributeFilter: ['style']
                        });
                        foundframe = true;
                        break;
                    }
                }
                // if the frame is not available yet try again later
                if (foundframe === false) {
                    setTimeout(bindObserver, 200);
                    return;
                }
            }
            // use mutation observers to quickly change the size of the iframe
            if (mutationObserverAvailable) {
                bindObserver();
            }
            // also check periodically for the size of the frame
            setInterval(checkSizeChange, mutationObserverAvailable ? 5000 : 500);
        })();
        </script>
    </body>
</html>

Setelah itu klik tombol Save Change

Simpan Kode

3. Tahap Tes URL

Sekarang silahkan buka url

https://comments.DOMAINANDA.com/disqus.php

di browser anda, dan seharusnya akan menampilkan layar blank kosong saja.

Komentar Disqus AMP

4. Tahap Memasukkan url ke Settingan Disqus

Silahkan ke Dashboard wordpress, pilih AMP di sebelah kiri, kemudian pilih Settings, lalu pilih Comments, kemudian masukkan url anda di kolom Host On File, lalu klik Save Change.

Cara Hosting Sendiri Komentar Disqus Plugin AMP for WP 2

Sekarang buka halaman artikel anda, dan seharusnya kolom komentar Disqus sudah muncul dan valid AMP.

Komentar Disqus

Selesai

Share Yuk

Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *