FastComments を使うと、同じページに好きなだけ多くのコメントウィジェットを配置できます。すべてを同じ スレッドに設定すれば同期されますし、または同時にすべて別々のスレッドにすることもできます。追加、削除、 およびコメントスレッドをオンデマンドで変更できます。
コメントスレッドを動的に追加・切り替える 
すべては urlId と関連パラメータを設定し、ウィジェットインスタンスで update() を呼び出して別のスレッドに差し替えることで行われます。
下は対話式の例です（左上の「Run」を押してください）。これにより、必要に応じてコメントスレッドを追加・切り替えることができます。
また、update の代わりに instance.destroy を呼び出すことで削除することもできます。
コメントスレッドの追加と切り替え
Copy 
Run 
Run 1
2 <script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3
4 <div id="fastcomments-widgets"></div>
5 <div class="demo-form">
6 <section>
7 <h3>Add or Swap a Product/Comment Thread</h3>
8 <label>
9 Product Name
10 <input type="text" name="name" />
11 </label>
12 <label>
13 Product ID
14 <input type="text" name="id" />
15 </label>
16 <label>
17 Product URL
18 <input type="url" name="url" />
19 </label>
20 <label>
21 Replaces Product (id)
22 <input type="text" name="replaces_id" />
23 </label>
24 <button type="button">Add/Swap</button>
25 </section>
26 </div>
27 <script>
28 (function () {
29 const target = document.getElementById('fastcomments-widgets');
30 const tenantId = "demo"; // ここにあなたのテナントIDを入れてください
31
32 function setHeading(heading, {name, productID}) {
33 heading.innerHTML = `${name} (${productID})`;
34 }
35
36 function addWidget({name, productID, productURL}) {
37 const outer = document.createElement('div');
38 const heading = document.createElement('h5');
39 setHeading(heading, {name, productID});
40 const inner = document.createElement('div');
41 inner.append(heading);
42 outer.append(inner);
43 const widgetTarget = document.createElement('div');
44 outer.append(widgetTarget);
45 target.append(outer);
46 window.FastCommentsUI(widgetTarget, {
47 "tenantId": tenantId,
48 "pageTitle": name, // 通知メールとモデレーションダッシュボード用
49 "url": productURL, // 通知メールとモデレーションダッシュボード用
50 "urlId": productID,
51 "showLiveRightAway": true
52 });
53 }
54
55 function switchProduct(oldId, {name, productID, productURL}) {
56 for (const instanceWrapped of fcUIInstances) {
57 if (instanceWrapped.targetElement) {
58 const config = instanceWrapped.config;
59 if (config.urlId === oldId) {
60 const heading = instanceWrapped.targetElement.parentNode.querySelector('h5');
61 setHeading(heading, {name, productID});
62 config.pageTitle = name;
63 config.urlId = productID;
64 config.url = productURL;
65 instanceWrapped.instance.update(config);
66 return;
67 }
68 }
69 }
70 alert(`Product ${oldId} not found to replace!`);
71 }
72
73 // add some widgets
74 addWidget({name: "Product A", productID: 'product-id-a', productURL: 'https://example.com/a'});
75 addWidget({name: "Product B", productID: 'product-id-b', productURL: 'https://example.com/b'});
76
77 const form = document.querySelector('.demo-form');
78 form.querySelector('button').addEventListener('click', function() {
79 const name = form.querySelector('input[name=name]').value;
80 const productID = form.querySelector('input[name=id]').value;
81 const productURL = form.querySelector('input[name=url]').value;
82 const replaces_id = form.querySelector('input[name=replaces_id]').value;
83
84 if (replaces_id) {
85 switchProduct(replaces_id, {
86 name,
87 productID,
88 productURL,
89 });
90 } else {
91 addWidget({name, productID, productURL});
92 }
93 });
94 })();
95 </script>
96 <style>
97 #fastcomments-widgets {
98 display: flex;
99 }
100 #fastcomments-widgets > div {
101 width: 100%;
102 }
103
104 .demo-form section label {
105 display: block;
106 margin-bottom: 20px;
107 }
108 </style>
109
これはページネーションの動作に似ています。
React や関連ライブラリを使用する場合は、設定を更新するだけでライブラリ（React、Angular、Vue）がウィジェットの再描画を処理してくれます。VanillaJS では、ここに示したように自分で管理する必要があります。
下に何か質問があればお気軽にどうぞ。できる限りお手伝いします！