ホーム›ガイド›埋め込みコードではなくカスタムコード、Wix にコメント欄を置く手順

埋め込みコードではなくカスタムコード、Wix にコメント欄を置く手順

うってつけに見えるほうの要素が、いちばん確実に壊します。入り口はカスタムコードのボディ - 最後です。

Mr. Latte
更新

Wix でも本物のコメント欄を動かせます。ただし、その仕事のために作られたように見える埋め込みコード要素では動きません。あの要素は Wix のドメインから配られるサンドボックス iframe なので、自分がどのサイトにいるかを確かめ、訪問者に Google ログインを求めるウィジェットは、自分のものではないオリジンを見て止まります。通る道は ボディ - 最後に入れるカスタムコード です。ローダーに数行を足して、マウント要素を自分で組み立て、選んだコンテナの下へぶら下げます。カスタムコードはドメインを接続した公開済みサイトでしか動かないので、有料の Wix プランが入場料になります。

まずプランの条件から

Wix は「カスタムコードには X プランが必要」という一文をどこにも書いていません。代わりに、足し合わせるとその意味になる文を2つ書いています。開発者向けドキュメントは、カスタムコードが動く前にサイトが公開済みでドメインが接続されている必要があると書きます。ヘルプセンターは、自分のドメインを接続するにはドメインと Wix のサイトプランを買う必要があると書きます。ですから無料の wixsite.com サイトではカスタムコードを使えません。パネルは見えていて、コードだけが最後まで実行されないという状態です。

とはいえ上位の等級が要るわけではありません。Wix は Light、Core、Business、Business Elite を並べ、"All plans allow you to have a custom domain" と書いているので、いちばん下の等級でもこの条件は通ります。Light はその並びの入り口にあたる等級ですが、これは一覧の中の位置であって値段の話ではありません。ここで参照したヘルプ記事に Wix は金額を載せず、Premium の価格は地域によって違うと述べているので、等級を値段の順に並べる書き方はこの記事が正直にできることではありません。条件は独自ドメインで、有料プランはどれもそれを持っています。Wix Studio のサイトは同じ理屈で別の Studio 等級を使います。実際の数字は自分のアカウントで、自分のいる地域の価格として確かめてください。

何を設置するのか

ウィジェットそのものが、このページで動いています。ひととおり見たければ何か投稿してみてください。正しくマウントすれば Wix のページでも同じ見た目になります。そのときにはもう、自分のサイトの div がひとつあるだけだからです。

プレビュー

コメント2

コメントを追加…
Alex として投稿投稿
  • M
    Maya2時間前

    本当に一行で完了。設定がこんなに簡単だとは！

  • J
    Jordan昨日

    ログインも共有なので他に組み込むものがありません。👍

サンプルの返信が入ったスレッドです。Google ログインとダッシュボードでの管理は、このプレビューではなく設置と一緒に付いてきます。

埋め込みコード要素ではこれが動かない理由

エディタが2つあり、同じ要素へ行く道がそれぞれ違います。誰かの説明をなぞる前に、自分がどちらのエディタなのかを先に決めてください。Wix エディタでは「パーツを追加」、「埋め込みコード」、「よく使われる埋め込み」、「HTML 埋め込み」と進み、「コードを入力」を押して「適用」します。Wix Studio では「要素を追加」、「埋め込み・SNS」、「埋め込みコード」の順で、そのあとが「コードを入力」と「適用」です。日本語版では左パネルの名前まで違っていて、旧エディタが「パーツを追加」、Studio が「要素を追加」です。どちらでもキャンバスに箱がひとつ置かれ、HTML を貼るとその HTML が描かれます。決まった場所に座らせたいものなら、ここが当然の置き場所に見えます。

Wix は自社のドキュメントで逆のことを言っています。HTML 要素はサンドボックス環境、つまり iframe を作り、同じページのほかの要素へ直接アクセスできず、ページの残りにアクセスする必要のあるウィジェットはその中では動かない、と書かれています。あの箱の中にいるあいだ、自分は自分のサイトにいません。自分のレイアウトの中に描かれた Wix のサンドボックス オリジンにいます。

そうなるとコメントウィジェットは2か所で折れます。ウィジェットは location.hostname を読んで site id に登録されたドメインと突き合わせるのですが、これは知らない人が自分の埋め込みを持ち去って別のサイトで使うのを止める仕掛けです。iframe の中ではそのホスト名が Wix のものなので、照合が落ちます。Google ログインはそれとは別に、要求してきたページのオリジンを検証します。ここでのオリジンは自分のドメインではなくサンドボックスです。どちらも手を入れて直せる種類の問題ではありません。サンドボックスは、まさにその中のコードが自分のページだと名乗れないようにするためにあります。

静かに失敗するところが、半日を持っていく部分です。エディタに赤いエラーは出ません。公開したサイトに空の箱があるか、ログインのポップアップが開いて閉じ、訪問者はログアウトのまま残ります。

問いカスタムコード、ボディ - 最後埋め込みコード要素（HTML iframe）
コードが動く場所自分のドメイン上の本物のページWix のオリジンにあるサンドボックス iframe
location.hostname が自分のドメインとして読めるか読める読めない、サンドボックスとして読まれる
Google ログインを最後まで通せるか通せる通せない、オリジンが自分のものではない
レイアウト上の位置をきっちり決められるかセレクタを使ってスクリプトからだけ決められる、要素をドラッグする
ページの残りに触れるか触れる触れない、境界を越えるのは postMessage だけ
必要なプランドメインを接続した有料の Wix プラン文書になし、無料サイトで使えるかも文書になし
エディタやプレビューで見えるか見えない、公開済みサイトだけ見える、適用を押したあと
ホスティング型のコメントウィジェットを載せられるか載せられる載せられない
Wix はごく普通のウィジェット設置を2つの機能に割っていて、これを載せられるのは片方だけ。

サイトビルダーごとに分かれる場所なので、同じウィジェットでもプラットフォームごとに設置法が変わります。Webflow の埋め込み要素はサンドボックスではないため、あちらではマウント用の div をページへそのまま置きます。Webflow の設置ページが、この話の短い版です。

動くほうの設置

カスタムコードが届く場所は3つです。<head>、ボディの最初、ボディの最後。その中に「記事本文の下」はありません。ですからスクリプトが自分でマウント要素を作り、置きたい場所へ入れます。これが仕掛けのすべてで、ローダーの上に5行ほど乗せる作業です。

  1. Wix がすでに決めてくれた接続ドメインを登録する

    ほかのサイトビルダーでは、この段階が選択になります。ステージング用のホストか本番のホストか、apex か www か、サイトが応答する複数の住所のうちどれか。Wix はその選択を取り上げてしまうのですが、今回に限ってはそれが助けになります。カスタムコードは接続済みドメインでサイトが公開されるまで動かないので、機能を入れてくれるドメインがそのままウィジェットに認識させるドメインで、しかもそれはひとつしかありません。そのホスト名をアドレスバーに出る形のまま、www も含めてBootSignal のダッシュボードに入れると、下のスニペットに要る site id が出ます。wixsite.com の住所は代わりに登録する候補ではありません。カスタムコードがまだ眠っているあいだに自分が見ている住所というだけです。

  2. サイトダッシュボードでカスタムコードを開く

    このパネルはエディタのキャンバスではなくサイトのダッシュボードにあり、道順は Wix エディタ、Wix Studio、Wix Harmony のどれでも同じです。「設定」へ入り、「開発・統合設定」セクションの「カスタムコード」をクリックして、画面右上の「＋カスタムコードを追加」を押します。

  3. 2つのスニペットを1つの項目に貼る

    ローダーとマウント用スクリプトが同じテキストボックスへ入ります。data-site-id には自分の site id を、TARGET にはコメント欄を置きたい要素の CSS セレクタを入れます。項目の名前はあとで見分けられるものにしておいてください。「BootSignal comments」くらいで十分です。

    コード
    <script src="https://bootsignal.com/bootsignal.js"
        data-site-id="YOUR_SITE_ID" data-lang="ja" defer></script>

<script>
(function () {
  // CSS selector for the element the thread should be appended to.
  var TARGET = '#comments';
  var timer;

  function mount() {
    var host = document.querySelector(TARGET);
    if (!host) return;
    if (host.querySelector('[data-bootsignal="comments"]')) return;
    var el = document.createElement('div');
    el.setAttribute('data-bootsignal', 'comments');
    // One thread per URL. On Wix Blog this is the post slug.
    el.setAttribute('data-thread-id', location.pathname);
    host.appendChild(el);
    // Ask the loader to scan again, in case it already ran.
    if (window.BootSignal && window.BootSignal.activate) window.BootSignal.activate();
  }

  function schedule() { clearTimeout(timer); timer = setTimeout(mount, 150); }

  // Wix warns its renderer may re-render elements, so watch instead of firing once.
  schedule();
  new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true });
})();
</script>

  4. ページの範囲と位置を選ぶ

    「コードを追加するページを選択：」の下で「全てのコードを読み込む」か「特定のページ」を選びます。前者は今後作る新しいページも含めてサイトの全ページに入り、ブログにだけコメント欄が要るなら後者です。日本語版のこの名前は範囲ではなく読み込み方の話に見えますが、英語版では All pages にあたる選択肢です。「コードを追加する箇所を選択」では 「ボディ - 最後」 を選びます。全ページを選ぶと Wix がもうひとつ選択をくれて、向こうの言い方ではコードを "only once per visit, or on each page your visitor opens" のどちらで読み込むかです。Wix はこの選択を書いておくだけで、どちらをいつ選ぶかは書いていないので、規則ではなく調整つまみだと思ってください。訪問ごとに一度から始めて、新しく開いたときはコメント欄が出るのに一覧から入ると出ない、という状態なら各ページへ移して公開し直します。

  5. 適用して公開し、ライブサイトを開く

    カスタムコードはエディタでは効かず公開済みのサイトでだけ動き、スニペットはキャンバスに要素として現れもしません。ですからサイトが生きるまで見るものがありません。適用して公開したら、実際の住所を開いて自分が決めた場所まで下りてみてください。

2025年12月に敷かれた安全層

「貼って公開してください」と同じ息で言っておくべき話がもうひとつあります。貼ったコードがそもそも動くかどうかを、この層が決めるからです。Wix のカスタムコードのページにはこんな告知が載っています。"In December 2025, Wix introduced new frontend security measures for custom code on Wix sites. This means that some code snippets that previously worked may now be blocked until the provider updates them. This change affects all types of custom code, including dashboard custom code, embedded code, and Velo code."ここに私たちを狙った内容はありません。誰であれ Wix サイトへ貼ったサードパーティのスクリプト全部にかかります。

その告知の後ろにある開発者向けのページが、実際に何が変わったのかを並べています。fetch と XMLHttpRequest は保護版に置き換わり、Wix の言い方では "Can't be replaced or reassigned" です。document.cookie から Wix のクッキーへ書く操作は静かに失敗します。同じドメインでの window.open は空のオブジェクトを返します。フロントエンドのコードが同じドメインに作った iframe は自動でサンドボックスになり、srcdoc 属性は塞がれます。URL、JSON、String、Object、addEventListener と removeEventListener、EventTarget、Service Worker の API は書き換えが封じられます。setTimeout と setInterval は第1引数に文字列を渡すと拒みます。

この一覧を上のスニペットと並べて見ると、スニペットがどんな形に書かれているかが見えてきます。ふつうの div を作って足し、ドキュメントを見張り、setTimeout へは文字列ではなく関数を渡します。グローバルを1つも上書きせず、自分の iframe も作りません。それでもこの一覧は目に入れておく値打ちがあります。去年 Wix サイトで動いていたスクリプトが今年になって同じサイトで止まったとき、最初に見に行く場所であり、誰が作ったものであれ fetch をこっそり差し替えたりクッキーを手で書いたりするウィジェットは、ここでは時間を借りて動いている身だからです。

Wix が名前を変えない目印を選ぶ

Wix はクラス名や要素の id を動的に作っていて、その識別子を狙った CSS や JavaScript はサイトを公開し直したときに壊れることがあると自社のドキュメントで警告しています。#comp-abc123 は有効期限つきのセレクタです。それを使うと決めたなら、ライブサイトの開発者ツールから写してきて、エディタで大きく手を入れたあとに確かめ直してください。

長持ちするほうの手は、Wix が管理するマークアップではなく自分が管理する中身に錨を下ろします。コメント欄を置きたい場所のテキスト要素へ目印の文字列を書いておき、そのテキストを探して差し替えるやり方です。文字列は自分のものなので公開し直しても残り、訪問者の目には触れません。

目印方式：セレクタで探す部分をこれに差し替えます
<script>
(function () {
  // Type this exact text into a Wix text element where the thread belongs.
  var MARKER = '[[comments]]';
  var timer;

  function slot() {
    var all = document.body.getElementsByTagName('*');
    for (var i = 0; i < all.length; i++) {
      var n = all[i];
      if (!n.children.length && n.textContent.trim() === MARKER) {
        return n.closest('[id^="comp-"]') || n.parentElement || n;
      }
    }
    return null;
  }

  function mount() {
    var host = slot();
    if (!host) return;
    host.textContent = '';
    var el = document.createElement('div');
    el.setAttribute('data-bootsignal', 'comments');
    el.setAttribute('data-thread-id', location.pathname);
    host.appendChild(el);
    if (window.BootSignal && window.BootSignal.activate) window.BootSignal.activate();
  }

  function schedule() { clearTimeout(timer); timer = setTimeout(mount, 150); }
  schedule();
  new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true });
})();
</script>

スニペットが一度で終わらせず見張る理由

Wix が自社のレンダリングについて書いていることがひとつあって、手で作るマウントはすべてその一文に引っかかります。Wix のレンダリング エンジンは "may re-render elements in ways that conflict with direct DOM manipulation, especially during page transitions or viewport changes" というものです。自分でぶら下げたノードの下で地面が動きうるというベンダー自身の言葉で、動く瞬間のひとつとしてページ遷移を名指ししています。一方、訪問者がブログの一覧から記事へ移るときスニペットがどうなるのかは、Wix がどこにも書いていません。4つ目の手順で選ぶ読み込み方も、推奨なしの選択肢として差し出されているだけです。ですから正直な立場は、マウントの時点も生き残りも約束されてはいない、というほうになります。

そこでスニペットは、ページが新しく開かれることにも、置いた div がその場に残ることにも賭けません。一度撃つ代わりに見張ります。オブザーバが新しいページの中身に気づき、まとめて押し寄せる変更をタイムアウトが1回の試みへ畳み、マウント関数は対象の中にスレッドがもうあれば早めに抜けます。ローダーが自分でマウントしたものへ印を残すので、もう一度なぞっても写しが2つ描かれません。data-thread-id は div を作る瞬間に location.pathname から読むため、テンプレートを触らなくても記事ごとに自分のスレッドを持ちますし、div を消す再レンダリングもオブザーバが聞き取る変更です。

Wix の料金の上にいくら乗るか

Wix はサイトプラン単位で請求します。BootSignal は登録ドメイン単位で、Wix のサイトではその単位が同じくひとつです。登録ドメイン1つにつき月 $20 または年 $200。カタログのウィジェット38個と、購読を始めたあとに増えるものまで含み、トラフィックが動いても請求書で動く項目はありません。Wix のサイトをもう1つ持つのは、プランを大きくすることではなくダッシュボードにドメインが1つ増えることです。詳しくは料金ページにあります。

Wix にだけある落とし穴がひとつあって、設置のときではなく確認のときに噛みます。作業を見ようとして公開済みのサイトを wixsite.com の住所で開くと、ホスト名の照合がその住所を知らないのでコメント欄が黙ります。そこでは何も壊れていません。ドメインを登録した理由そのものである許可リストが、いま仕事をしています。確認は接続したドメインで行ってください。そもそも訪問者がいる住所はそちらだけです。

このページに他社の価格は載せていません。比較表に入った古い数字は、ないより悪いからです。代替のまとめが出典と確認日を添えてそちらを扱います。

公開済みの Wix ページにコメント欄を載せる

接続したドメインを登録し、ボディ - 最後にカスタムコードを1項目貼って、公開。

同じローダーが残りも運ぶ

ほかのウィジェットも、いま貼ったローダーと同じマウントの手をそのまま使います。ですから2つ目のウィジェットの値段は、data-bootsignal の値だけ変えたマウント関数の写し1つです。Wix ではフィードバックがよく馴染みます。公開の場に書き込まない人が、非公開でなら話してくれることは多いものです。

プレビュー
ご意見をお寄せください…
送信

フィードバックのウィジェットです。設置の形は同じで、マウントの値だけが変わります。詳しくはフィードバックのページで。

Wix のサイトは何かを売っていることが多いので、ウィジェットをひとつ名指ししておきます。ソーシャルプルーフ通知は、自分のサイトに実際にある活動だけを流し直します。自分のドメインにもう保存されているコメント、リアクション、評価、投票です。オハイオの買い物客を作り出すことはできませんし、やろうともしません。活動がまだなければ何も出しません。それが意図した動きです。

公開ページが空のままのとき

下を順に潰していってください。Wix はこの作業に付き合わないとはっきり書いています。"We cannot provide support for external codes that were not created or tested by Wix. If you are experiencing an issue with your code snippet, please contact the provider directly." どの段階で止まったかがわかれば、これは当て推量の応酬ではなく、こちらへ送る2行の問い合わせになります。

  1. 公開済みのサイトを見ていますか。カスタムコードはエディタでもプレビューでも動きません。
  2. ネットワークタブに bootsignal.js は来ていますか。来ていないなら、そのカスタムコードの項目がこのページに掛かっていません。
  3. ライブページのコンソールで document.querySelector(TARGET) は要素を返しますか。null ならセレクタが違うか、Wix が名前を変えたあとです。
  4. site id か thread id がないというコンソール警告は出ていますか。div は付いていて属性が付かなかった場合です。
  5. アドレスバーのドメインは、登録したものと www まで一致していますか。惜しい違いも違いです。
  6. 2025年12月より前に、このサイトでこのスニペットが動いていたことはありますか。Wix は新しいフロントエンドのセキュリティ対策が、以前は動いていたコードを提供元の更新まで塞ぐことがあると述べています。
  7. 空いている場所を調べてください。自分の div が <iframe> の中にあるなら、スニペットが埋め込みコード要素へ入っていて、そこでは永久に動きません。

よくある質問

コメント欄を埋め込みコード要素に貼り付けることはできますか？
できません。Wix はあの要素を、ページの残りへ直接触れないサンドボックス iframe として文書化していて、その箱は自分のオリジンではなく Wix のオリジンから配られます。ドメインの照合が落ち、Google ログインも最後まで届きません。エラーではなく空の箱が出てくるので、時間ばかり食います。
エディタやプレビューでコメント欄は表示されますか？
されません。Wix は、カスタムコードがエディタでは効かず公開済みのサイトでだけ動くこと、スニペットがエディタに要素として現れないことを述べています。公開して実際の住所を開き、ブラウザの開発者ツールで確かめてください。これだけはエディタの中で先に見る手がありません。
Google アナリティクスのタグもカスタムコードで動きませんでした。同じ原因でしょうか？
違います。そちらはサンドボックスでもセキュリティの遮断でもなく、文書に書かれた除外です。Wix は Google アナリティクス、Google タグマネージャー、Facebook や TikTok のピクセルといったトラッキングスクリプトがカスタムコードでは機能しないと述べていて、それらは Wix 自身のマーケティング連携から入れる形になっています。コメントウィジェットはトラッキングスクリプトではないので、ボディ - 最後の項目からふつうに動きます。ですから解析タグが死んでいることは、パネルが壊れている証拠にはなりません。
ブログ記事ごとに別のコメント欄にするにはどうすればいいですか？
スニペットが div を作るときに data-thread-id を location.pathname から埋めるので、記事の住所ひとつがそのままスレッドひとつになります。あとから記事の住所を変えると会話は古いパスに付いたまま残るため、コメントが多く溜まる前に URL の作り方を決めておいてください。
Wix のページが元々読み込んでいる量に比べて、どのくらい重くなりますか？
ローダーのタグは defer なので描画を止めず、ページ上にマウント要素を見つけたときだけコメントのモジュールを取りに行きます。マウント用スクリプトは、間引きを入れたオブザーバの付いた数十行です。ただではありませんが、ふつうの Wix ページに載る画像より軽い程度です。
site id は秘密にしておくべき値なのですか？
秘密にできる値ではありません。Wix も、差し込んだコードはページのソースを見た人になら誰でも見えると警告していますし、これはフロントエンドの埋め込みなら全部そうです。site id を守っているのはドメインの許可リストのほうです。ウィジェットは自分に登録されたドメインでしか応じないので、写し取られたスニペットはよそでは何もしません。本物の API キーは、やはりカスタムコードのスニペットへ入れるものではありません。
Wix のドメインを登録して site id を受け取る

登録するホスト名がひとつ、貼るカスタムコードの項目がひとつ。その2つをつなぐのが site id です。

数値の出典