Hi there,
I want to write how to make unique comment box, for each URL (for example, for each blog page, for each item page, etc)
As you know currently it is not possible do it in Wix, because wix uses specific URL for each page & for dynamic pages it is not work.
I want provide some code for Blog pages. It can be customize for specific dynamic pages also.
First, it is required replace standard DISQUS app with IFRAME. You need put code in IFRAME:
<html>
<head>
</head>
<body>
<div id="disqus_thread"></div>
var disqus_config = function () {
this.page.url = document.referrer;
this.page.identifier = document.referrer;
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://<yourdisqusaddress>.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
// Author: Toghrul Aliyev
var reset = function (newIdentifier, newUrl, newTitle, newLanguage) {
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = newIdentifier;
this.page.url = newUrl;
this.page.title = newTitle;
this.language = newLanguage;
}
});
};
window.onmessage = (event) => {
if (event.data) {
if (event.data.action === "reload") {
let x = "" + event.data.url;
console.log("Reloading data... Document referrer: " + x);
if( typeof DISQUS != 'undefined' ) {
reset(x, x, 'Page Title', 'en');
} else {
console.log("DISQUS Not defined ... ");
}
}
}
}
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</body>
</html>
For information you need change this URL with URL which DISQUS provides for your:
https://.disqus.com/embed.js
For information this code is standard DISQUS code, except one method. As you know Wix Blog uses MDN for post change. So page not reloads, but content dynamically changes. For preventing such cases, from wix page I send command to iframe for resetting comments. For this action you need add belows code to Wix:
// Author: Toghrul Aliyev
import wixLocation from 'wix-location';
$w.onReady(function () {
// Handle page change.
wixLocation.onChange( (location) => {
console.log("Path Changed: " + wixLocation.baseUrl + "/" + location.path);
let urlv2 = wixLocation.baseUrl + "/" + location.path;
try {
let p = urlv2.replace(/,/g, "/");
console.log("URL Changed: " + p);
$w("#disqusHtml").postMessage({"action": "reload", "url": p});
} catch (err) {
console.log("Error: " + err);
}
});
});
I hope this post will be useful.
