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
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.php1. Membuat Subdomain Comments pada Blog Anda
Jadi kita akan membuat subdomain https://comments.DOMAINANDA.com
Silahkan masuk ke CPanel, pada bagian Domains klik Subdomain
Beri nama subdomain : comments lalu pilih domain anda,
2. Membuat file Disqus.php
Kemudian kembali ke CPanel dan pilih 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
Setelah itu klik nama file disqus.php tadi lalu pilih Edit
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
3. Tahap Tes URL
Sekarang silahkan buka url
https://comments.DOMAINANDA.com/disqus.phpdi browser anda, dan seharusnya akan menampilkan layar blank kosong saja.
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.
Sekarang buka halaman artikel anda, dan seharusnya kolom komentar Disqus sudah muncul dan valid AMP.
Selesai
About The Author
Roby Roy Putra
Selamat datang di Abihp.com semoga artikel ini bermanfaat bagi Anda, dan terima kasih untuk share artikel ini ke teman Anda.