Add Comments to ThriveCart Learn+ Courses

FastComments を使うと、任意の ThriveCart Learn+ コースにライブコメント機能を簡単に追加できます。

セットアップに問題がある場合は、FastComments のサポートが支援を提供できます。

このチュートリアルは FastComments アカウントを必要とすることに注意してください。まずサインアップしてからここに戻ってくることをおすすめします。こちらからアカウントを作成できます。

ステップ 1: コースを準備する

ThriveCart Learn+ の設計上、コメントを表示したい各コースページに FastComments のコードを追加する必要があります。

同じコードスニペットをすべてのページで使用でき、コメントスレッドは自動的に各ページごとに紐づけられます。

まず、コースをエディターで開き、HTML ブロックを追加します。

左側に HTML ブロックのオプションが表示されるはずです。コメントを表示したいページの位置へそのブロックをドラッグしてください。

Open Course and Add HTML Block

新しく追加した HTML 要素を選択します。コードを貼り付けられるブロックが左側に表示されます。

これでステップ 2 の準備が整いました。

ステップ 2: カスタムコードを追加する

For Step 2 we have to copy our code snippet. Check that line 50 does not say "demo" - you'll want to ensure this has your tenant id. It should be populated for you.

Now let's copy our ThriveCart-Learn-Specific FastComments code snippet.

It's quite large, because the integration with ThriveCart has a lot of features, so just click the Copy button in the top right of the code snippet:

ThriveCart Learn+ コメントコード

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    (function () {
        let attemptsRemaining = 10;
        function tryLoad() {
            const simpleSSO = {optedInNotifications: true, optedInSubscriptionNotifications: true};
            let isAuthenticated = false;
            let profileLink = document.querySelector('.thrivecart-courses-header-profile-link');
            if (!profileLink) {
                profileLink = document.querySelector('.thrivecart-courses-header-profile'); // class is different for preview.
            }
            // broad email input field selector incase ThriveCart changes id.
            const emailInputField = document.querySelector('input[type=email]');
            if (emailInputField && emailInputField.value) {
                isAuthenticated = true;
                simpleSSO.email = emailInputField.value;
            } else if (profileLink && !profileLink.innerText.includes('John Smith')) { // allow preview to work - no email available.
                attemptsRemaining--;
                if (!attemptsRemaining) {
                    return console.error('Could not load FastComments - could not determine user information (email). Please reach out to FastComments support.');
                }
                console.warn('FastComments: No user email found - waiting and trying again.');
                return setTimeout(tryLoad, attemptsRemaining < 5 ? 3000 : 100); // increase wait time after 5 attempts incase slow internet.
            }
            if (profileLink) {
                // use raw "img" query incase ThriveCart changes image class selector.
                const avatarImg = profileLink.querySelector('img');
                if (avatarImg && avatarImg.src) {
                    isAuthenticated = true;
                    simpleSSO.avatar = avatarImg.src;
                }
                // use innerText incase ThriveCart changes how profile name is displayed.
                if (profileLink.innerText) {
                    isAuthenticated = true;
                    simpleSSO.username = profileLink.innerText;
                } else {
                    const bold = profileLink.querySelector('b');
                    if (bold && bold.innerText) {
                        isAuthenticated = true;
                        simpleSSO.username = bold.innerText;
                    }
                }
            } else {
                if (!attemptsRemaining) {
                    return console.error('Could not load FastComments - could not determine user information (user name/avatar). Please reach out to FastComments support.');
                }
                console.warn('FastComments: No user profile info found - waiting and trying again.');
                attemptsRemaining--;
                return setTimeout(tryLoad, attemptsRemaining < 5 ? 3000 : 100); // increase wait time after 5 attempts incase slow internet.
            }
            let url;
            const selectedNavLink = document.querySelector('.tcc-browse-lesson.active a');
            if (selectedNavLink) {
                // sometimes TC uses multiple links the same page, so let's de-dupe them.
                url = getPathnameFromUrl(selectedNavLink.href);
            } else {
                // trim marketing parameters and domain name
                url = window.location.pathname;
            }
            if (url) {
                url = url.replace('/starte-hier', '');
                url = url.replace('/start-here', '');
            }
            FastCommentsUI(document.getElementById('fastcomments-widget'), {
                tenantId: 'demo',
                urlId: url,
                simpleSSO: isAuthenticated ? simpleSSO : null
            });
        }
        tryLoad();
        function getPathnameFromUrl(url) {
            try {
                const parsedUrl = new URL(url);
                // trim marketing parameters and domain name
                return parsedUrl.pathname;
            } catch (error) {
                console.error("Invalid URL", url, error);
                return window.location.pathname; // default to current, so at least it works sometimes
            }
        }
    })();
</script>

Now paste it into the code block on the left in the ThriveCart editor. It should look like this:

コードが追加されました

That's it! Now we just have to publish:

公開

That's it! You should now see the comment box on your course when you preview, and real users will be able to leave comments without signing in or leaving their username/email a second time.

テストに関する注意！

If you have anonymous commenting disabled, which it is by default, you won't be able to leave comments in Preview mode as the John Smith user. You will get an authentication error as the default John Smith user has no email. If you want to test, we suggest you use a coupon code and go through your site like an actual user.

完了

成功しました！FastCommentsコメントウィジェットが表示されているはずです。

成功！

ThriveCartでFastCommentsを設定したことをおめでとうございます！ドメインエラーが発生した場合、またはコメントエリアをカスタマイズする方法を学びたい場合は、読み進めてください！

ドメインエラー

次のような認証エラーが発生することがあります。

ドメイン構成が見つかりません

一般的に、これはデフォルトの "thrivecart.com" ドメインではなく独自ドメインを使用している場合に発生します。

これは、FastComments がこのドメインでアカウントの使用を許可するべきだと認識していないためです。

この場合、修正は簡単です。自分のサイトを FastComments.com のアカウントに追加するだけです。

アカウントにサイトを追加するにはここをクリックしてください。

カスタマイズ

FastComments はあなたのサイトに合わせてカスタマイズできるよう設計されています。

カスタムスタイリングを追加したり、設定を微調整したい場合は、カスタマイズに関するドキュメントをご覧ください。方法が記載されています。

言語 🇯🇵 日本語