Hi, is there a way to integrate cusdis (https://cusdis.com/) into a writefreely single instance blog?
1 Like
Hi! I’ve been trying to add cusdis comments to my writefreely blog, however, I haven’t had any success.
The code is as follows:
<div id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id="****"
data-page-id="{{ PAGE_ID }}"
data-page-url="{{ PAGE_URL }}"
data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
The main issue is that, after the comments box appears, it disappears almost instantly. From what I’ve read, this is because writefreely “sanitizes” the embedded JS code.
Another person was able to implement it using a trick posted on the forum.
This “trick” involves adding the JS code within the customization of the writefreely CSS code, which would look like this:
</style>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
<style>
Or something like that. In the tutorial mentioned above, the “addeventlistener” function is used to resolve the conflict. The issue is that I don’t know how to add it to the cusdis code. I would be very grateful if someone could help me with this.
Greetings!
Greetings!!
I’ve successfully added the cusdis comments using the following code. For a working example see: https://japanese.xdays.uk/
Add this in the “Custom CSS” box:
/* any custom css */
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const url = new URL(document.head.querySelector('link[rel="canonical"]').href);
// only add to full article pages
// replace the URL immediately below with your home / index page URL if you don't want the comments showing there
if (url.href != "https://writefreely.example.com/") {
const commentsDiv = document.getElementById("cusdis_thread");
commentsDiv.setAttribute("data-host", "https://cusdis.com");
commentsDiv.setAttribute("data-app-id", "[add-your-app-id-here]");
commentsDiv.setAttribute("data-page-id", url.pathname);
commentsDiv.setAttribute("data-page-url", url.href);
commentsDiv.setAttribute("data-page-title", document.title);
// this can be added as a separate script tag below this one
// but I didn't want it on the home / index page
// so adding it conditionally in this IF block instead
const script = document.createElement("script");
script.setAttribute("src", "https://cusdis.com/js/cusdis.es.js");
script.setAttribute("async", "");
script.setAttribute("defer", "");
document.body.appendChild(script);
}
});
</script>
<style type="text/css">
<!-- closed by the code which injects this CSS -->
Add this in the “Post Signature” box:
<div id="cusdis_thread"></div>
3 Likes
I just cannot get this to work. It looks like my signature is not showing up. Even viewing page source it doesn’t appear. Here is my entire customize block (with app id censored). Maybe something in there is preventing it from showing up, I don’t know. The cusdis web interface shows up fine though when I go to that domain.
body {
background-color: #15110b;
color: #FFB000;
}
pre {
background-color: #483E2A !important;
color: #FFB000;
border: 0 !important;
font-family: monospace;
overflow: auto;
word-wrap: break-word;
display: block;
}
.pinned {
color: #FFB000;
}
code {
background-color: #483E2A !important;
color: #FFB000;
border: 0 !important;
font-family: monospace;
}
/* Blog header on index and post pages */
#blog-title a {
color: #FFB000;
background-color: #15110b;
}
#blog-title a:hover {
color: #FFCC00;
background-color: #15110b;
}
/* Blog header on post pages ONLY */
#post #blog-title a {
padding: 4px 8px;
}
/* Blog description (underneath title) on index page */
header .description {
font-style: italic;
}
/* Post titles on blog index */
.post-title {
font-weight: bold;
}
.post-title a.u-url:link, .post-title a.u-url:visited {
color: #FFB000;
}
/* "Read more..." links */
#collection .read-more {
text-decoration: underline;
}
/* Links inside blog posts */
article p a {
color: #ffdc52;
text-decoration: none;
}
article p a:hover {
color: white;
text-decoration: none;
}
/* Center images */
img {
display: block;
margin: 0 auto;
}
/* any custom css */
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const url = new URL(document.head.querySelector('link[rel="canonical"]').href);
// only add to full article pages
// replace the URL immediately below with your home / index page URL if you don't want the comments showing there
if (url.href != "https://tech.minnix.dev/") {
const commentsDiv = document.getElementById("cusdis_thread");
commentsDiv.setAttribute("data-host", "https://cusdis.minnix.dev");
commentsDiv.setAttribute("data-app-id", "xxxx");
commentsDiv.setAttribute("data-page-id", url.pathname);
commentsDiv.setAttribute("data-page-url", url.href);
commentsDiv.setAttribute("data-page-title", document.title);
// this can be added as a separate script tag below this one
// but I didn't want it on the home / index page
// so adding it conditionally in this IF block instead
const script = document.createElement("script");
script.setAttribute("src", "https://cusdis.minnix.dev/js/cusdis.es.js");
script.setAttribute("async", "");
script.setAttribute("defer", "");
document.body.appendChild(script);
}
});
</script>
<style type="text/css">
<!-- closed by the code which injects this CSS -->
And my signature block:
<div id="cusdis_thread"></div>
I think I’m just gonna use wordpress with the federation plugin. If WriteFreely ever decides to implement js for single user instances, I may come back.
It looks like you haven’t included the embed snippet from your Cusdis account here. Replace this with that, and it should probably fix your issues. At least, I think that’s what’s happening.
My problem with this solution is that there doesn’t appear to be a way to theme it to look good on my blog. Unless I am mistaken and someone else has a way to easily theme Cusdis, then that would be much appreciated!