ホーム›ガイド›Framer の設置は、貼る場所より実行の頻度でつまずく

Framer の設置は、貼る場所より実行の頻度でつまずく

スクリプトにはパネル、コメント欄にはコンポーネント。どちらも動き出すのは Publish のあとです。

Mr. Latte
更新

Framer で要るのは、パネル2つと5分ほどです。ローダーのスクリプトは Project Settings > Custom Code へ、コメント欄そのものはキャンバスへドラッグする Embed コンポーネントへ入ります。どちらも回避策ではなく、Framer が文書にしている機能です。引っかかるのは1点だけ。Settings から入れたコードはキャンバスでもプレビューでも動かないので、Publish して公開中のサイトを開くまで、何も見えません。

Framer は、二つの部品それぞれに居場所を用意している

ホスティング型のコメントウィジェットは、いつでもマークアップ2つでできています。サイト全体でウィジェットのコードを一度読み込むスクリプトタグと、コメント欄が描かれる場所を示す空の要素です。ビルダーによっては、この2つのどちらかに置き場所がなく、午後じゅう道具と格闘することになります。

Framer は、そちら側ではありません。スクリプトタグの居場所は Project Settings > Custom Code で、ここに入れると公開されたすべてのページ、または選んだページにだけ挿入されます。空の要素の居場所は Embed コンポーネントです。Insert メニューで Embed を検索してキャンバスにドラッグし、HTML を貼ります。Framer はこの組み合わせを、自社の Trustpilot の手引きでそのまま文書にしています。ベンダーのローダーは Custom Code に、マウントのマークアップは Embed に、という形です。

Framer が課金するもの、料金ページに載っていないもの

2026-08-25 に確かめた Framer のページには、カスタムコードにプランの条件が出てきません。料金ページの比較の表にはカスタムコードの行そのものがなく、カスタムコードを追加するヘルプの記事はプランに触れず、サイトのプランを説明する記事はカスタムコードを持ち出しもしません。文書にない制限と、制限がないという文書は同じものではないので、自分のアカウントについての約束ではなく、未確認として読んでください。これを前提に計画を立てる前に、自分の Project Settings の Custom Code タブを開いてみれば済みます。

Framer が文書ではっきり書いている制限は別にあり、この作業のすぐ隣にあります。無料のサイトは Framer が生成したサブドメインで公開され、Made in Framer のバナーを付けて回り、カスタムドメインの接続には有料のプランが要ります。ステージングは Pro 以上で、この一行が見た目より多くを決めます。Free や Basic では、公開されたサイトが、自分のスクリプトの動く唯一の場所です。

Embed が結局のところ描くもの

プレビュー

コメント2

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

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

  • J
    Jordan昨日

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

コメントウィジェットが自分で描いた画面で、中の会話はサンプルです。Framer の Embed に入れた div 1つで、自分のページにも同じものが出ます。

前半: Project Settings のローダー

  1. Framer が公開するアドレスから始める

    最初のアドレスを決めるのは、自分ではなく Framer です。公開すると無料のサブドメインが生成されてサイトがそこに載り、カスタムドメインは有料のプランで後から付きます。接尾辞は他人の記事から写さず、アドレスバーから読んでください。サイトは framer.website のアドレスで出てくる一方、Framer 自身の公開のヘルプは、いまも framer.app のドメインと呼んでいます。いま目の前にある文字列が BootSignal のダッシュボードに入れるホスト名で、ブラウザが書いたとおりに書きます。保存するとダッシュボードに site id が1つ出て、下の2つのスニペットのうち自分のサイトだけのものは、その値だけです。

  2. Project Settings > Custom Code を開く

    Framer のエディタで Project Settings を開き、左のサイドバーで Custom Code タブを選びます。まだコードを入れたことがなければ Add Script を、すでにスニペットがあれば + アイコンを押します。名前は BootSignal loader のように、見てわかるものにしてください。このパネルに見えるのは、名前の一覧だけです。

  3. ローダーを貼って、入る場所を選ぶ

    Framer は、コードをサイトのどこに置くかを聞いてきます。Framer 自身のベンダー向けの手引きは、ローダーのスクリプトを Custom Code の <head> タグの先頭に置いていて、ここでもその位置をそのまま真似します。タグには defer が付いているので、ブラウザはファイルを早めに取ってきて、HTML の解析が終わってから実行します。読者が待っているものを、コメント欄が遅らせないための仕掛けです。

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

  4. 範囲を絞るか、サイト全体のままにする

    同じパネルで、スニペットを特定のページに限定できます。コメントがブログのテンプレートにしか出ないなら、そのページだけ選んでおけば、ローダーはマーケティングのページに載りません。ほかの BootSignal ウィジェットも付けるつもりなら、サイト全体のままにしてください。ローダー1つが、その全部を動かします。

Once か、Run on every page visit か

次に Framer は、コードをどれくらいの頻度で実行するかを聞いてきます。ここは一拍おいて読んだほうがいいところです。ヘルプは2つの選択肢をそのまま書いています。Once はコードを一度だけ追加して実行するもので、イベントリスナーを付ける場合がその例、Run on every page visit は、誰かがページを訪れるたびにコードを実行します。新しく作ったスニペットは Once から始まり、このパネルを紹介した2025年12月の変更記録は、それを以前コードが動いていた方法に近く、サードパーティのスクリプトに使えると説明しています。

その一文は、分析のスクリプトを念頭に書かれています。訪問ごとに1回だけ動くのが、まさに正しい場合です。コメント欄は反対側の場合です。公開された Framer のサイトはブラウザを丸ごと読み直さずにページの間を移動するので、Once にしたスニペットは訪問の始めに読み込まれたきり、読者がナビゲーションを押して移動する間は二度と実行されません。一方でクライアント側で動くウィジェットは、いま画面に出ているページで自分のマウントを見つける必要があります。

コメントが1ページにしかないなら、Once で十分です。ブログのテンプレートや複数のページにまたがるなら、Run on every page visit を選んでください。症状は、いま覚えておけば足ります。記事の URL を直接開いたときはコメント欄が出るのに、サイトの中でリンクを押して同じ記事に着くと消えるなら、設置が壊れたのではありません。実行の頻度が違っているのです。

後半: Embed コンポーネントのマウント

キャンバスに戻って Insert メニューを開き、Embed を検索して、コメント欄を置きたい場所へコンポーネントをドラッグします。たいていは本文の下、フッターの上です。Embed は URL も生の HTML も受け取りますが、使うのは HTML の欄です。

Embed コンポーネントの HTML の欄に貼る
<div data-bootsignal="comments" data-thread-id="page-key"></div>

マウントは、その div 1つで終わりです。Embed の幅は適当に決めて、高さは伸びるようにしておいてください。書き込みがたまると、コメント欄は長くなります。Framer は、連携によっては Embed の中に包むコードが要ることがあると注意していますが、このウィジェットは違います。仕事をするのは、Custom Code のローダーです。

thread id の決め方

data-thread-id は、このページのコメントとあのページのコメントを分けます。同じ値を使うページ2枚は会話を共有し、それを望むこともありますが、たいていは望みません。1枚もののページなら、値をそのまま書き込みます。data-thread-id="pricing" のように。落とし穴は、CMS のコレクションのテンプレートです。1つの Embed がすべての記事を担当するので、そこに固定の値を書くと、コレクション全体が1つの会話に合流します。テンプレートをその上に組む前に、自分の Embed が属性の値に CMS のフィールドを受け取るかどうかを確かめてください。

Publish して、本物のサイトを見る

Framer は、Settings から入れたカスタムコードはプレビューには出ないと書いていて、Trustpilot の手引きがその理由を教えてくれます。head と body のスクリプトは、エディタではなくブラウザで実行される、ということです。右上の Publish を押して、公開中の URL を開きます。

そこで確かめることは2つです。コメント欄がログインの案内と一緒に描かれるか、そして Google でログインしたあとに実際に書き込めるか。描かれるのに自分のコメントを断られるなら、アドレスバーとダッシュボードのドメインを一文字ずつ突き合わせてください。Framer のサブドメインも含めてです。たいていは、誰も登録していないホスト名です。

設置を一目で

貼るものFramer の中の置き場所効いてくる設定Publish 前に見えるか
ローダーのスクリプトタグProject Settings > Custom Code > Add Script位置は <head> の先頭。頻度は、複数ページなら Run on every page visitいいえ
コメントのマウント divEmbed コンポーネントの HTML の欄なし、ただの静的なマークアップいいえ
data-site-idローダーのタグの属性サイトに1つ、BootSignal のダッシュボードから該当なし
data-thread-idマウントの div の属性サイトごとではなく、会話ごとに1つ該当なし
サイトに1つのスニペットと、コメント欄が要るページごとに1つの div。

コメントを最後に抱えるのは誰か

Framer のサイトに、正直な道は3つです。自分で作る道は、誰かが一文字書く前にログイン、データベース、API、管理の画面が要り、Framer はサーバーのコードを動かさないので、そのスタックは別の場所に住みます。広告で回るホスティング型のコメント欄は、読者が注意で支払います。あるいは、ホスティング型のウィジェットにお金を払います。比較のセクションに、ホスティング型の候補の現在の価格が並んでいて、数字があるべき場所はそこです。

Framer のサイトでいくらかかるか

Custom Code のスニペットに入れた site id の後ろには、サブスクリプションが1つあります。登録ドメイン単位で 月 $20 または年 $200、すべてのウィジェット込みで、いまのところ有料ウィジェット38個と無料のブラウザツール33個、それに後から出るものまで入ります。トラフィックで量る項目がないという点が、候補を並べるときの基準線です。トラフィックで値を付けるコメントツールは、記事がやっと当たった月に、いちばん大きい請求書を送ってきます。ドメインを増やすときは、別に買います。

  • 返信が階層になるので、会話が無関係なメモの山につぶれません。
  • Google ログインを、ドメイン上のすべての BootSignal ウィジェットが共有します。
  • ダッシュボードの管理の画面で、コメントを1件消すか、書いた人をブロックします。
  • ドメインの許可リストがあるので、自分の site id は登録したホスト名でしか応答しません。
  • ウィジェットの表示の文言は日本語・英語・韓国語から、ローダーの data-lang で選びます。
Framer のページにコメント欄を

Custom Code にスニペット1つ、Embed に div 1つ、そして Publish。

2つ目のウィジェットは、div がもう1つ

ローダーはコメント専用ではありません。サイトのすべての BootSignal ウィジェットを、これ1つが動かします。だから次のウィジェットにかかるのは、Embed 1つと div が1行です。スクリプトタグを増やすことも、請求が変わることもありません。コメントとよく合う相棒はリアクションです。読者の大半は段落を書きませんが、絵文字ならかなりの人が押してくれます。

プレビュー
👍 42❤️ 18🎉 7😮 3

コメントまでは書かない読者のためのリアクション。ローダーはそのまま、div をもう1つ。

初日にやると簡単で、3か月目にやると面倒になることが4つあります。公開しているホスト名を正確に登録すること。Custom Code のスニペットの名前を、他人が見てもわかるように付けること。実行の頻度を、その選択肢が出ているパネルの中で決めること。そして、失うコメントができる前に thread id の決め方を固めること。会話はその文字列にぶら下がっているので、あとで値を変えると空のコメント欄を受け取り、古いコメントは古い id に残ります。

よくある質問

記事の URL を直接開くとコメント欄が出て、サイトの中のリンクから行くと消えます。何が壊れたのですか？
壊れてはいません。スニペットの実行の頻度が違っています。公開された Framer のサイトはブラウザを丸ごと読み直さずにページの間を移動するので、Once のままの Custom Code のスニペットは訪問の始めに実行され、読者がクリックして回っている間は二度と実行されません。すると2枚目のページのマウントの div は、自分を埋めてくれる相手がいないまま残ります。Project Settings > Custom Code を開いてそのスニペットを選び、Run on every page visit に変えてください。Once が正しい答えなのは、コメント欄が URL で直接入ってくる1ページだけにあるときです。
Run on every page visit にすると、ページごとにウィジェットを取り直しますか？
取り直しませんし、コメント欄が二重に積み上がることもありません。ローダーのタグには defer が付いているので、最初のページで解析も描画も止めないリクエストを1回払い、そのあとはブラウザがキャッシュから出します。ローダーがもう一度動くときは、まだ描かれていないマウントの地点を探し、1つ立ち上げた瞬間に印を残し、すでに印のあるものは飛ばします。だからコメント欄がすでに出ているページでもう一度動いても、することはありません。目に見える代償はどちらの設定でも同じで、自分のコメントを別に取りに行くぶん、周りのページより一拍遅れて埋まります。
キャンバスにもプレビューにも何も出ないのは、貼る場所を間違えたからでしょうか？
たいていは違います。Framer は、Settings から入れたカスタムコードはプレビューには出ないと書いています。そのスクリプトはエディタではなく、公開されたサイトのブラウザで動くからです。Publish して、公開中の URL を開いてください。ステージングは Pro 以上なので、Free や Basic では、その最初の確認が本番のサイトで起きます。まだどこからもリンクされていないページに Embed を置いてそこでコメント欄を確かめ、幅と余白が合ってから移せば済みます。
Free のプランでもできますか？
2026-08-25 に確かめた Framer のどのページにも、カスタムコードのプランの条件は出てきません。料金の比較の表にカスタムコードの行がなく、カスタムコードを追加するヘルプはプランを書かず、サイトのプランの記事はカスタムコードを扱いません。これは許可ではなく、未確認として扱ってください。Framer がはっきり閉ざしているものは、そのすぐ隣にあります。カスタムドメインの接続には有料のプランが要り、無料のサイトは Framer のサブドメインに Made in Framer のバナーを付けて載り、ステージングは Pro からです。自分の Custom Code タブを開けば、その場で結論が出ます。
CMS のコレクションの記事が全部同じ会話を見せます。何を変えればよいですか？
コレクションのテンプレートの Embed 1つが固定の data-thread-id を持ち、そのテンプレートで描かれる記事がすべてその値を受け継ぐので、コレクション全体が1つの会話を読み書きします。値をそのまま書き込むのは data-thread-id="pricing" のような1枚もののページで正しく、ここでは間違いです。コレクションのテンプレートでは、その文字列が記事ごとに変わる必要があるので、テンプレートをその上に組む前に、Embed が属性の値として CMS のフィールドを受け取るかを確かめてください。誰かが書き込む前に片付ける話です。会話はその文字列に掛かっているので、あとで変えると空のコメント欄が開き、いまあるコメントは古い id に残ります。
ページをデザインし直したあと、たまったコメントはどこへ行くのですか？
data-thread-id がそのままなら、どこにも行きません。会話はレイアウトでも URL でもなく、その値を鍵にしているので、Embed を動かしても、周りのセクションを塗り直しても、ページを一から作り直しても、同じコメントが戻ってきます。値を変えると、空のコメント欄から始まります。
Framer のドメインの site id を受け取る

公開しているドメインを登録して、Custom Code に1行貼ります。

数値の出典