Commento embed

I am trying to embed Commento into my blog using the html embed. I copied and pasted the embed code at the end of a post to try it out, and nothing loads. I’m not sure what I’m doing wrong.

1 Like

Hi @yungleary! So you’ll have to change some of the code around that they give you since you cannot embed scripts into posts.

So if they give you something like this:

<div id="commento"></div>
<script defer
  src="https://cdn.commento.io/js/commento.js">
</script>

Go into the Custom JS of your blog and add the src url like this:

// src: https://cdn.commento.io/js/commento.js

And then add the HTML to your posts manually or programmatically. That should do the trick. Let me know if it doesn’t and we’ll work it out! People have used Commento with Write.as before so it’s definitely possible.

Thanks! How does my blog recognize which script src to draw upon? Just curious the coding behind how this works, in case I want to include other custom JS.

Adding the src url creates a script element into your blog similar to the HTML embed above, so if you add any additional JavaScript that uses the imported library, it will look for the library’s source url. In this way you can add more custom JS by adding the src url in a similar manner as Commento and whatever additional code is needed to make it work.

Hope that makes sense!

I’d also recommend checking out the “Share what you are working on and using” thread to discover more ways to use Custom JS:

Makes enough sense! As a total coding noob, my favorite part about css/html coding has been it works, or it clearly doesn’t. Visual learner here, no need to fully understand!

Is there anyway I can auto populate my posts with the read more followed by the commento embed?

While you can’t automate adding the Read More… into your blogs, you can automate the Commento comments with some custom JS. This is what the code will look like:

// src: https://cdn.commento.io/js/commento.js

var topP = document.createElement("p");
topP.innerHTML = '<div id="commento"></div>';
var cont = document.getElementById("wrapper");
cont = document.getElementById("post-body");
cont.appendChild(topP);

Then all you have to do is add <!--more--> at the end of your posts and that should do the trick. Let me know if that works for you!

2 Likes

this worked great! thank you!!! any way that I can push it down a few lines? it kind of crowds the text

also commento’s instructions for adding custom css won’t work since write.as doesn’t have a custom css url i can link to. any ideas for a workaround for this?

nvm, figured both out!

1 Like

The embed doesn’t load the first time I open a post page when using this automated script. If I open up a post, there’s no comments. If I refresh the page then the comments load and all subsequent posts load comments on their first load. any idea why this is?

It looks like the comments are loading on the first time for me. Are you still running into issues?

Yup. The first post I load doesn’t load the comments. Every other post after that works.

Okay, this little tweak to the code could help. All I am doing is making a change to say that if the post contains a post body element (which every post does) then add the Commento embed to the post. That way no post should get left out.

// src: https://cdn.commento.io/js/commento.js

var topP = document.createElement("p");
topP.innerHTML = '<div id="commento"></div>';
var cont = document.getElementById("wrapper");
cont = document.getElementById("post-body");

if (cont !== null) {
cont.appendChild(topP);
}

Let me know if that helps! If not I’d be curious to see a screenshot of the post and/or the errors that appear when you pull up the developer tools’ console on the post that doesn’t load the comments.

Worked! Thanks so much. Do y’all have a tip jar? I appreciate all of the tech support.

A post was split to a new topic: Embedding Form in Post Troubleshooting