Add Live Commenting to Typeflo.io Blogs

What This Guide Covers

This guide covers setting up live commenting with FastComments on Typeflo.io blogs.

1. Find Code Input

To add FastComments to your Typeflo.io blog, first navigate to your blog's dashboard and click on Settings in the left sidebar.

Click Settings

Next, click on the Custom Code tab at the top of the settings page.

Click Custom Code Tab

You'll see three sections for adding custom code: Header, Body, and Footer. We'll use the Footer section for FastComments.

2. Insert Code

In the Footer section of the Custom Code tab, paste the following code:

Typeflo.io Live Commenting Code Snippet

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js" async></script>
<script>
    (function () {
        function load() {
            let target = null;
            let lastInstance;
            if (document.querySelector('.fastcomments-widget')) {
                setTimeout(load, 1000);
                return;
            }
            if (lastInstance) {
                lastInstance.destroy();
            }
            if (window.FastCommentsUI) {
                const newElement = document.createElement('div');
                newElement.classList.add('fastcomments-widget');
                const subscribeSection = document.querySelector('.nc-SectionSubscribe2');
                if (subscribeSection) {
                    subscribeSection.parentNode.insertBefore(newElement, subscribeSection);
                    target = newElement;
                } else {
                    const fullWidthSection = document.querySelector('.container.w-full');
                    if (fullWidthSection) {
                        fullWidthSection.prepend(newElement);
                        target = newElement;
                    }
                }
            }
            if (target) {
                lastInstance = FastCommentsUI(target, {
                    "tenantId": "demo"
                });
            }
            setTimeout(load, 1000);
        }
        load();
    })();
</script>

Paste Code in Footer Section

Paste FastComments Code in Footer Section

After pasting the code, click the Save button to apply your changes.

Note: This code includes logic to dynamically place the FastComments widget in the optimal location on your Typeflo.io blog posts. Other code snippets will not work properly with Typeflo.io's layout.

Remember to replace 'demo' with your actual FastComments tenant ID after signing up. If you're logged in to FastComments.com, it should already be replaced.

Success

Nice work! You've added live commenting to your Typeflo.io blog.

FastComments will now appear on all your blog posts, allowing your readers to engage in discussions.

If you've run into a permission denied error, or would like to customize FastComments, read on.

Customization

FastComments is designed to be customized to match your blog's design.

If you'd like to add custom styling, or tweak configuration, Checkout our Customization Documentation to learn how.

For Typeflo.io blogs, you can add custom CSS styles in the same Custom Code section where you added the FastComments script.

Domain Errors

You may get an authorization error, like the following:

Domain Configuration Missing

This is because FastComments doesn't know it's supposed to allow your account to be used on this domain.

In this case, the fix is simple. You just have to add your Typeflo.io blog domain to your FastComments.com account.

Go here to add your site to your account.

Note: Make sure to add both your custom domain (if you have one) and your Typeflo.io subdomain to ensure FastComments works in all scenarios.

Installation

undefined