#Note/HowTo #Note/Permanent #Obsidian/Publish/Comment
When implementing the [[Integrating Disqus Comments into Static Websites]] guide, you'll find that Disqus doesn't natively support Obsidian Publish. This means you'll need to manually integrate the comment plugin using Obsidian Publish's [publish.js](https://help.obsidian.md/Obsidian+Publish/Customize+your+site) file.
In step 4 of the guide, opt for `Install manually with universal code`. This will present you with a JavaScript snippet, designed to be embedded into websites to activate the Disqus commenting feature:
```javascript
<div id="disqus_thread"></div>
<script>
/* RECOMMENDED CONFIGURATION VARIABLES */
// var disqus_config = function () {
// this.page.url = PAGE_URL;
// this.page.identifier = PAGE_IDENTIFIER;
// };
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://<your-site-name>.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
```
Given that Obsidian Publish doesn't permit direct HTML editing of notes, we'll use JavaScript to dynamically insert the comment section.
Append the Disqus Comment Module JavaScript code into your `publish.js` file. If this file doesn't exist, create it in the root directory of your note vault. Modify the code on line 28 from:
```javascript
s.src = 'https://garden-sparrow-zone.disqus.com/embed.js';
```
to the URL provided by Disqus:
```javascript
s.src = 'https://<your-site-name>.disqus.com/embed.js';
```
Disqus Comment Module:
```Javascript
console.log('publish.js loaded');
/**
* Disqus Comment Module
*/
/**
* Resets Disqus with the current page's URL.
*/
function resetDisqus() {
DISQUS.reset({
reload: true,
config: function() {
this.page.identifier = document.title;
this.page.url = window.location.origin + window.location.pathname;
}
});
}
/**
* Loads Disqus. If Disqus is already loaded, it resets it.
*/
function loadDisqus() {
if (typeof DISQUS === 'undefined') {
const disqus_config = function() {
this.page.identifier = document.title;
this.page.url = window.location.origin + window.location.pathname;
};
const d = document;
const s = d.createElement('script');
s.src = 'https://garden-sparrow-zone.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
} else {
resetDisqus();
}
}
/**
* Inserts the Disqus comment component into the last mod-footer div.
*/
function insertCommentComponent() {
const d = document.createElement('div');
d.id = 'disqus_thread';
const allModFooterDivs = document.querySelectorAll('.mod-footer');
const lastModFooterDiv = allModFooterDivs[allModFooterDivs.length - 1];
if (lastModFooterDiv) {
console.log("Found the last mod-footer div!");
lastModFooterDiv.appendChild(d);
loadDisqus();
} else {
console.log("mod-footer div not found!");
}
}
/**
* Delays the execution of the insertCommentComponent function.
*/
function delayInsertCommentComponent() {
setTimeout(insertCommentComponent, 1000);
}
// Execute the function once the DOM is loaded
if (document.readyState === "complete" || document.readyState === "interactive") {
delayInsertCommentComponent();
} else {
document.addEventListener("DOMContentLoaded", delayInsertCommentComponent);
}
// Observe DOM changes and re-insert the Disqus component if it's removed
const observer = new MutationObserver(mutations => {
for (const mutation of mutations) {
for (const node of mutation.removedNodes) {
if (node.nodeType === 1 && node.id === 'disqus_thread') {
delayInsertCommentComponent();
break;
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
/**
* Disqus Comment Module End
*/
```
After publishing the `publish.js` file, access your published note webpage. Use the browser's dev-tools (typically accessed with F12) to check for the log `publish.js loaded` in the console. If the comment section isn't visible, drop a comment to inform me.
**Limitations**:
1. the comment widget doesn't support Obsidian Publish Stack View feature.
2. comment threads bind to the note's title. If you change a note's title, that changes the note's URL as well. You will need to migrate the comments of the original page to the new page via Disqus.