FastComments.com

์‚ฌ์šฉ์ž ์ง€์ • ๋ฐ ๊ตฌ์„ฑ

์ปจํ…์ŠคํŠธ

์—ฌ๊ธฐ์—์„œ๋Š” ๋Œ“๊ธ€ ์œ„์ ฏ์ด ์ง€์›ํ•˜๋Š” ๊ฐ ๊ธฐ๋Šฅ ๋ฐ ์„ค์ •์— ๋Œ€ํ•œ ์‹ฌ์ธต ๋ฌธ์„œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์„œ์—์„œ๋Š” ํ•ต์‹ฌ ๊ฐœ๋…์„ ๋‹ค๋ฃจ๊ณ , ์‚ฌ์šฉ ๋ฐฉ๋ฒ•๊ณผ ๊ฐ ๊ธฐ๋Šฅ ์˜์—ญ๋ณ„๋กœ ์•Œ์•„์•ผ ํ•  ์ฃผ์˜์‚ฌํ•ญ๊นŒ์ง€ ๊นŠ์ด ์žˆ๊ฒŒ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

๊ด€๋ จ ์ค„์ด ๊ฐ•์กฐ๋œ ์ฝ”๋“œ ์˜ˆ์ œ๊ฐ€ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น๋˜๋Š” ๊ฒฝ์šฐ ๊ตฌ์„ฑ ํŽ˜์ด์ง€์˜ ์Šคํฌ๋ฆฐ์ƒท๋„ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

์ฝ”๋“œ ์˜ˆ์ œ๋Š” ๋‹น์‚ฌ์˜ ๋ฐ”๋‹๋ผ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ, ๊ตฌ์„ฑ ์˜ต์…˜์€ ๋ชจ๋“  ๋Œ“๊ธ€ ์œ„์ ฏ ๋ฒ„์ „(React, Vue ๋“ฑ)์—์„œ ์ •ํ™•ํžˆ ๋™์ผํ•œ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ฐ€์ด๋“œ์— ์„ค๋ช…๋œ ๋Œ€๋ถ€๋ถ„์˜ ๊ตฌ์„ฑ ๋ฐ ๊ธฐ๋Šฅ์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ํŽ˜์ด์ง€์—์„œ ๋™์ผํ•œ ๋Œ“๊ธ€ ํ‘œ์‹œํ•˜๊ธฐ Internal Link


urlId ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ๋Œ“๊ธ€์ด ์—ฐ๊ฒฐ๋  ํŽ˜์ด์ง€(๋˜๋Š” ID)๋ฅผ ์ •์˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋ฏ€๋กœ, ํ•ด๋‹น ํŽ˜์ด์ง€๋“ค์—์„œ urlId๋ฅผ ๊ฐ™์€ ๊ฐ’์œผ๋กœ ์„ค์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

The Same Comments on Multiple Pages
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "urlId": "https://example.com/source-page"
8}];
9</script>
10

๋งž์ถค ๊ธ€๊ผด Internal Link

FastComments๋Š” ์‚ฌ์šฉ์ž ๋งž์ถคํ˜•์œผ๋กœ ์„ค๊ณ„๋˜์—ˆ์œผ๋ฉฐ, ์œ„์ ฏ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ธ€๊ผด๋„ ์˜ˆ์™ธ๋Š” ์•„๋‹™๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ FastComments๋Š” ๊ฐ€๋Šฅํ•œ ํ•œ ๋‹ค์–‘ํ•œ ๊ธฐ๊ธฐ์—์„œ ๋ณด๊ธฐ ์ข‹๊ฒŒ ํ‘œ์‹œ๋˜๋„๋ก system font stack์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ž์‹ ์˜ ๊ธ€๊ผด์„ ์ •์˜ํ•˜๋ ค๋ฉด ๋งž์ถค CSS ๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

ํ•ด๋‹น ๋ฌธ์„œ์—์„œ๋Š” ์›ํ•˜๋Š” ๊ธ€๊ผด์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๋งž์ถค CSS ์ •์˜ ๋ฐฉ๋ฒ•์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธ€๊ผด์„ ์ •์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•

๊ธ€๊ผด์„ ์žฌ์ •์˜ํ•˜๋ ค๋ฉด .fast-comments, textarea ์„ ํƒ์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ CSS๋ฅผ ์ •์˜ํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ:

์ปค์Šคํ…€ ์™ธ๋ถ€ ํฐํŠธ ์˜ˆ์ œ
Copy CopyRun External Link
1
2@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
3.fast-comments, textarea {
4 font-family: 'Roboto', sans-serif;
5}
6

๋‹คํฌ ๋ชจ๋“œ(์–ด๋‘์šด ๋ฐฐ๊ฒฝ) ์ง€์› Internal Link

๊ธฐ๋ณธ์ ์œผ๋กœ FastComments ๋Œ“๊ธ€ ์œ„์ ฏ์€ ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ์ดํŠธ์—์„œ ๋‹คํฌ ๋ชจ๋“œ๋ฅผ ์ž๋™์œผ๋กœ ๊ฐ์ง€ํ•ฉ๋‹ˆ๋‹ค.

๋‹คํฌ ๋ชจ๋“œ๊ฐ€ ๊ฐ์ง€๋˜๋ฉด FastComments๋Š” ํฐ ๋ฐฐ๊ฒฝ์˜ ๊ฒ€์€์ƒ‰ ํ…์ŠคํŠธ์—์„œ ๊ฒ€์€ ๋ฐฐ๊ฒฝ์˜ ํฐ์ƒ‰ ํ…์ŠคํŠธ๋กœ ์ „ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€๋„ ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.

ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ, ์œ„์ ฏ์€ ๋Œ“๊ธ€ ์œ„์ ฏ ๋’ค์— ์žˆ๋Š” ํŽ˜์ด์ง€ ๋ฐฐ๊ฒฝ์ด ์–ผ๋งˆ๋‚˜ ์–ด๋‘์šด์ง€๋ฅผ ํŒ๋‹จํ•˜๋ ค๊ณ  ์‹œ๋„ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํŽ˜์ด์ง€๊ฐ€ ํฐ ๋ฐฐ๊ฒฝ์ผ ์ˆ˜ ์žˆ์ง€๋งŒ, ๋Œ“๊ธ€ ์œ„์ ฏ์„ ๊ฒ€์€์ƒ‰ ๋ฐฐ๊ฒฝ์˜ ์ปจํ…Œ์ด๋„ˆ ์•ˆ์— ๋„ฃ์œผ๋ฉด ๋Œ“๊ธ€์„ ์ฝ๊ธฐ ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ๋‹คํฌ ๋ชจ๋“œ๊ฐ€ ์—ฌ์ „ํžˆ ์ž๋™์œผ๋กœ ํ™œ์„ฑํ™”๋˜์–ด์•ผ ํ•จ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ "ํœ˜๋„(luminance)"๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋ฐฉ์‹์— ์˜์กดํ•˜๋Š” ๊ฐ์ง€ ๋ฉ”์ปค๋‹ˆ์ฆ˜์€ ์›ํ•  ๋•Œ ๋‹คํฌ ๋ชจ๋“œ๋ฅผ ํ™œ์„ฑํ™”ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ•์ œ๋กœ ํ™œ์„ฑํ™”ํ•˜๋ ค๋ฉด hasDarkBackground ํ”Œ๋ž˜๊ทธ๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด true๋กœ ์„ค์ •ํ•˜์‹ญ์‹œ์˜ค:

Force Dark Background Mode
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "hasDarkBackground": true
8}];
9</script>
10

๋Œ“๊ธ€์—์„œ ํŽ˜์ด์ง€๋กœ ๋งํฌํ•˜๊ธฐ Internal Link

์•Œ๋ฆผ ์ด๋ฉ”์ผ์„ ๋ณด๋‚ด๊ฑฐ๋‚˜, ๋ชจ๋”๋ ˆ์ด์…˜ ํŽ˜์ด์ง€์™€ ๊ฐ™์€ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์— ๋Œ“๊ธ€์„ ๋ Œ๋”๋งํ•  ๋•Œ, ๋Œ“๊ธ€์—์„œ ํ•ด๋‹น ๋Œ“๊ธ€์ด ๋‹ฌ๋ฆฐ ํŽ˜์ด์ง€๋กœ ๋งํฌ๋ฅผ ๊ฑธ ์ˆ˜ ์žˆ์œผ๋ฉด ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

If URL ID isn't always an ID, then we have to store the URL some place else. That's what the "url" property is for, defined as follows.

Defining a Custom URL
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "url": "https://example.com/article-5"
8}];
9</script>
10

์ผ๋ฐ˜์ ์ธ ์‚ฌ์šฉ ์‚ฌ๋ก€๋Š” ๋Œ“๊ธ€ ์Šค๋ ˆ๋“œ๋ฅผ ๊ธฐ์‚ฌ์™€ ๊ฐ™์€ ์‹๋ณ„์ž์— ์—ฐ๊ฒฐํ•œ ๋‹ค์Œ, ํŠน์ • ํŽ˜์ด์ง€๋กœ ๋‹ค์‹œ ๋งํฌํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด:

Defining Custom URL and URL IDs together
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "url": "https://example.com/article-5",
8 "urlId": "article-5"
9}];
10</script>
11

URL์€ ์ผ๋ฐ˜์ ์ธ ๋งˆ์ผ€ํŒ… ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ์ œ๊ฑฐ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ํ˜„์žฌ ํŽ˜์ด์ง€์˜ URL์ด ๋ฌด์—‡์ด๋“ , ๊ทธ URL์ด ๋Œ“๊ธ€๊ณผ ํ•จ๊ป˜ ์ €์žฅ๋ฉ๋‹ˆ๋‹ค.

๋ Œ๋”๋งํ•  ํŽ˜์ด์ง€ ๊ฒฐ์ • Internal Link

๋Œ“๊ธ€์„ ๊ฐ€์ ธ์˜ค๊ณ  ๋ Œ๋”๋งํ•  ๋•Œ, ๋Œ“๊ธ€ ์œ„์ ฏ์€ ์–ด๋А ํŽ˜์ด์ง€์—์„œ ์‹œ์ž‘ํ• ์ง€ ์•Œ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” ์‹œ์ž‘ ํŽ˜์ด์ง€๋กœ ์ฒซ ๋ฒˆ์งธ ํŽ˜์ด์ง€๋งŒ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

์›ํ•œ๋‹ค๋ฉด, ๋ Œ๋”๋งํ•  ์ •ํ™•ํ•œ ํŽ˜์ด์ง€๋ฅผ ์„ค์ • startingPage๋กœ ๋Œ“๊ธ€ ์œ„์ ฏ์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Specifying The Page to Render
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "startingPage": 1
8}];
9</script>
10

ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ๋Š” 0๋ถ€ํ„ฐ ์‹œ์ž‘ํ•œ๋‹ค๋Š” ์ ์— ์œ ์˜ํ•˜์„ธ์š”. ๋”ฐ๋ผ์„œ ์œ„์˜ ์˜ˆ์ œ๋Š” ๋‘ ๋ฒˆ์งธ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๊ณ ์น˜์ง€ ์•Š๊ณ  ๋Œ“๊ธ€ ์Šค๋ ˆ๋“œ ์ „ํ™˜ํ•˜๊ธฐ Internal Link

์šฐ๋ฆฌ๋Š” urlId๊ฐ€ ๋Œ“๊ธ€์ด ์—ฐ๊ฒฐ๋˜๋Š” ํŽ˜์ด์ง€ ๋˜๋Š” ๊ฒŒ์‹œ๋ฌผ์˜ ID๋ผ๋Š” ๊ฒƒ์„ ๋‹ค๋ค˜์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ ์š”์•ฝํ•˜๋ฉด, ์ •์˜๋˜์ง€ ์•Š์œผ๋ฉด urlId๋Š” ํ˜„์žฌ ํŽ˜์ด์ง€ URL๋กœ ๊ธฐ๋ณธ๊ฐ’์ด ์„ค์ •๋ฉ๋‹ˆ๋‹ค.

ํŽ˜์ด์ง€๋‚˜ ์ฝ˜ํ…์ธ ๊ฐ€ ์ „์ฒด ํŽ˜์ด์ง€ ๋ฆฌ๋กœ๋“œ ์—†์ด ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝ๋˜๋Š” SPA(์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜)์˜ ๊ฒฝ์šฐ๋Š” ์–ด๋–จ๊นŒ์š”?

Angular, React, Vue ๋“ฑ

Angular ๋ฐ React์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ์œ„์ ฏ์— ์ „๋‹ฌ๋˜๋Š” urlId ์†์„ฑ์„ ๋‹จ์ˆœํžˆ ์—…๋ฐ์ดํŠธํ•˜๋ฉด ๋Œ“๊ธ€ ์œ„์ ฏ์ด ์ƒˆ๋กœ๊ณ ์นจ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด React ์•ฑ์—์„œ ๋™์ž‘ํ•˜๋Š” ๋ชจ์Šต์„ ์—ฌ๊ธฐ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

VanillaJS

VanillaJS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ฉด, ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์ด๋‚˜ ์ƒํƒœ ์ „ํŒŒ๋ฅผ ์ฒ˜๋ฆฌํ•ด ์ฃผ๋Š” Angular๋‚˜ React ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์•ฝ๊ฐ„ ๋” ๋ณต์žกํ•ฉ๋‹ˆ๋‹ค.

VanillaJS ์œ„์ ฏ์„ ์ธ์Šคํ„ด์Šคํ™”ํ•˜๋ฉด, ์ด๋ฅผ ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ๋Š” ๋ช‡ ๊ฐ€์ง€ ํ•จ์ˆ˜๋“ค์ด ๋ฐ˜ํ™˜๋ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ํŽ˜์ด์ง€ ํ•ด์‹œ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ๋Œ“๊ธ€ ์œ„์ ฏ์„ ์—…๋ฐ์ดํŠธํ•˜๋Š” ์ž‘๋™ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค:

ํŽ˜์ด์ง€ ํ•ด์‹œ ์ „ํ™˜ ์˜ˆ์ œ
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<button id="change-page"></button>
4<div id="fastcomments-widget"></div>
5<script>
6 (function fastCommentsMain() {
7 let config = {
8 tenantId: 'demo'
9 };
10 let instance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);
11
12 let page = '#page-1';
13 function getNextPage() {
14 if (page === '#page-1') {
15 return '#page-2';
16 } else {
17 return '#page-1';
18 }
19 }
20
21 let button = document.getElementById('change-page');
22 function nextPage() {
23 page = getNextPage();
24 button.innerText = 'Go to ' + getNextPage();
25 window.location.hash = page;
26 let locationString = window.location.toString();
27
28 config.url = locationString; // We update url, too, so notifications can link back to the right page
29 config.urlId = locationString;
30
31 instance.update(config);
32 }
33 nextPage();
34 button.addEventListener('click', nextPage);
35 })();
36</script>
37

์ด๋ฏธ์ง€ ๋ฆฌ๋””๋ ‰์…˜ ๋น„ํ™œ์„ฑํ™” Internal Link


๊ธฐ๋ณธ์ ์œผ๋กœ FastComments๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ด๋ฏธ์ง€๋ฅผ ์—…๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋„๋ก ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ๊ทธ ์ด๋ฏธ์ง€๋ฅผ ํด๋ฆญํ•˜๋ฉด, FastComments๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ, ์ƒˆ ํƒญ์„ ์—ด์–ด ํ•ด๋‹น ์ด๋ฏธ์ง€๋ฅผ ์ „์ฒด ๋ณด๊ธฐ๋กœ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. ์ด ํ”Œ๋ž˜๊ทธ๋ฅผ true๋กœ ์„ค์ •ํ•˜๋ฉด ์ด ๋™์ž‘์ด ๋น„ํ™œ์„ฑํ™”๋ฉ๋‹ˆ๋‹ค:

Disable Image Redirect
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "disableImageRedirect": true
8}];
9</script>
10

์ด๋ฏธ์ง€ ํด๋ฆญ์„ ์ง์ ‘ ์บก์ฒ˜ํ•  ๊ณ„ํš์ด ์—†๋‹ค๋ฉด (์ฐธ์กฐ: onImageClicked), ์ด ๋™์ž‘์„ ์ผ๋ถ€ ์Šคํƒ€์ผ๊ณผ ๊ฒฐํ•ฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค ์ด๋ฏธ์ง€๊ฐ€ ํด๋ฆญ ๊ฐ€๋Šฅํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋Š” ์™ธ๊ด€์„ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•ด.


์ƒˆ ๋Œ“๊ธ€ ๊ฐ•์กฐ Internal Link

FastComments๋Š” ์ƒˆ ๋Œ“๊ธ€์„ ๊ฐ•์กฐ ํ‘œ์‹œํ•˜๋Š” ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

First and foremost, by default comments that triggered an in-app notification (replies, replies in same thread, or comments on a page that you're subscribed to), will automatically be highlighted with the user's avatar glowing slightly. ์ƒ‰์ƒ์€ CSS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ is-unread ํด๋ž˜์Šค๋กœ ์‚ฌ์šฉ์žํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ตœ๊ทผ 24์‹œ๊ฐ„ ๋‚ด์— ์ž‘์„ฑ๋œ ๋Œ“๊ธ€์—๋Š” ์Šคํƒ€์ผ๋ง์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” 24hr ํด๋ž˜์Šค๊ฐ€ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

๋งˆ์ง€๋ง‰์œผ๋กœ, ์‚ฌ์šฉ์ž ์„ธ์…˜์— ์ƒˆ๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ์‹ค์‹œ๊ฐ„ ๋Œ“๊ธ€์€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ํ†ตํ•ด ๋ช‡ ์ดˆ ๋™์•ˆ ๊ฐ•์กฐ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” is-live CSS ํด๋ž˜์Šค๋กœ ์ด๋ฃจ์–ด์ง€๋ฉฐ ์—ญ์‹œ ์‚ฌ์šฉ์žํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฉ”์ผ ํ…œํ”Œ๋ฆฟ Internal Link

FastComments์—์„œ ๊ณ ๊ฐ์—๊ฒŒ ๋ณด๋‚ด๋Š” ์ด๋ฉ”์ผ์€ ๋งž์ถค ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ…œํ”Œ๋ฆฟ, ๋กœ์ง ๋ฐ ๋ฒˆ์—ญ์„ ๋ชจ๋‘ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ…์ŠคํŠธ๋Š” ๋กœ์ผ€์ผ๋ณ„๋กœ ๋งž์ถค ์„ค์ •ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์Šคํƒ€์ผ์€ ๋„๋ฉ”์ธ๋ณ„๋กœ ๋ณ€๊ฒฝํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งž์ถค ์ด๋ฉ”์ผ ํ…œํ”Œ๋ฆฟ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด๋ ค๋ฉด ์—ฌ๊ธฐ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.

์ƒˆ ์‹ค์‹œ๊ฐ„ ๋Œ“๊ธ€์„ ํ•˜๋‹จ์— ํ‘œ์‹œ Internal Link

๊ธฐ๋ณธ์ ์œผ๋กœ ์ƒˆ ๋ผ์ด๋ธŒ ๋Œ“๊ธ€์€ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๊ฒŒ์‹œ๋  ๋•Œ ๋Œ“๊ธ€ ๋ชฉ๋ก์˜ ๋งจ ์œ„์— ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

์ด ์˜ต์…˜์„ ํ™œ์„ฑํ™”ํ•˜๋ฉด ์ƒˆ ๋ผ์ด๋ธŒ ๋Œ“๊ธ€์ด ๋Œ€์‹  ๋ชฉ๋ก์˜ ๋งจ ์•„๋ž˜์— ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋Œ“๊ธ€ ์Šค๋ ˆ๋“œ๋ฅผ ๋ณด๋Š” ๋™์•ˆ ๋Œ“๊ธ€์ด ์‹ค์‹œ๊ฐ„์œผ๋กœ ๊ฒŒ์‹œ๋  ๋•Œ ๋Œ“๊ธ€์ด ๋‚˜ํƒ€๋‚˜๋Š” ๋ฐฉ์‹์— ์˜ํ–ฅ์„ ์ค๋‹ˆ๋‹ค.

New Live Comments to Bottom
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "newCommentsToBottom": true
8}];
9</script>
10

์ด ์„ค์ •์„ ํ™œ์„ฑํ™”ํ•˜๋ฉด:

  • ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž๊ฐ€ ๊ฒŒ์‹œํ•œ ์ƒˆ ๋ผ์ด๋ธŒ ๋Œ“๊ธ€์ด ๋Œ“๊ธ€ ๋ชฉ๋ก์˜ ํ•˜๋‹จ์— ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค
  • ์‚ฌ์šฉ์ž๋Š” ์ƒˆ ๋Œ“๊ธ€์ด ๊ธฐ์กด ๋Œ“๊ธ€ ์•„๋ž˜์— ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์„ ๋ณด๊ฒŒ ๋ฉ๋‹ˆ๋‹ค
  • ์ด๊ฒƒ์€ ๋ผ์ด๋ธŒ ๋Œ“๊ธ€ ์—…๋ฐ์ดํŠธ์—๋งŒ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋ฉฐ ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋“œ์—๋Š” ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค
  • ์‚ฌ์šฉ์ž๊ฐ€ ํ† ๋ก ์„ ๋”ฐ๋ผ๊ฐˆ ๋•Œ ์ฝ๊ธฐ ํ๋ฆ„์„ ์œ ์ง€ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

์ด ์„ค์ •์€ ์ƒˆ ๋ผ์ด๋ธŒ ๋Œ“๊ธ€์ด ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋„์ฐฉํ•  ๋•Œ ๋ฐฐ์น˜๋˜๋Š” ์œ„์น˜์—๋งŒ ์˜ํ–ฅ์„ ๋ฏธ์นœ๋‹ค๋Š” ์ ์— ์œ ์˜ํ•˜์„ธ์š”. ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ์˜ ์ดˆ๊ธฐ ์ •๋ ฌ ์ˆœ์„œ์—๋Š” ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฌดํ•œ ์Šคํฌ๋กค ํ™œ์„ฑํ™” Internal Link

๊ธฐ๋ณธ์ ์œผ๋กœ FastComments ์œ„์ ฏ์€ ๋ชจ๋“  ๋ณด์ด๋Š” ๋Œ“๊ธ€์ด ๋ณด์ด๋„๋ก ์„ธ๋กœ ํฌ๊ธฐ๋ฅผ ์ž๋™์œผ๋กœ ์กฐ์ •ํ•ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ๋งค๊น€์€ ํ˜„์žฌ ํŽ˜์ด์ง€ ๋์— ์žˆ๋Š” "๋‹ค์Œ ๋ณด๊ธฐ" ๋ฒ„ํŠผ์œผ๋กœ ์ด๋ฃจ์–ด์ง€๋ฉฐ, ์ด๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ์šฉ์ž์—๊ฒŒ ๊ฐ€์žฅ ์พŒ์ ํ•œ ์ƒํ˜ธ์ž‘์šฉ์ด๋ผ๊ณ  ํŒ๋‹จํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋ฌดํ•œ ์Šคํฌ๋กค์ด ๋” ์„ ํ˜ธ๋˜๋Š” ๊ฒฝ์šฐ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋‹น์‚ฌ Stream Chat ์ œํ’ˆ์—์„œ ์ด ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

"๋‹ค์Œ ๋ณด๊ธฐ" ๋ฒ„ํŠผ์„ ์ˆจ๊ธฐ๊ณ  enableInfiniteScrolling ํ”Œ๋ž˜๊ทธ๋ฅผ true๋กœ ์„ค์ •ํ•˜์—ฌ ๋ฌดํ•œ ์Šคํฌ๋กค๋กœ ์ „ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:

Enabling Infinite Scrolling
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "enableInfiniteScrolling": true
8}];
9</script>
10

๋˜ํ•œ ์ด๋ฅผ ์œ„ํ•ด ์‚ฌ์šฉ์ž ์ง€์ • CSS๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์Šคํฌ๋กค์„ ํ™œ์„ฑํ™”ํ•˜๋ ค๋ฉด .comments ์„ ํƒ์ž์— ๋Œ€ํ•œ ์‚ฌ์šฉ์ž ์ง€์ • CSS๋ฅผ ์ถ”๊ฐ€ํ•˜์„ธ์š”:

๋ฌดํ•œ ์Šคํฌ๋กค ํ™œ์„ฑํ™”
Copy CopyRun External Link
1
2.comments {
3 max-height: 500px;
4 overflow-y: auto;
5}
6

์ „์ฒด ์ž‘๋™ ์˜ˆ์‹œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

Enabling Infinite Scrolling
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "enableInfiniteScrolling": true,
8 "customCSS": ".comments { max-height: 500px; overflow-y: auto; }"
9}];
10</script>
11

์œ„ ์˜ˆ์ œ์—์„œ๋Š” customCSS ์†์„ฑ์„ ์‚ฌ์šฉํ–ˆ์ง€๋งŒ, ์„ฑ๋Šฅ์ƒ์˜ ์ด์œ ๋กœ ์œ„์ ฏ ๊ตฌ์„ฑ UI๋ฅผ ๋Œ€์‹  ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ์ง€์ • CSS ๋ฌธ์„œ ์ฐธ์กฐ.

๋ชจ๋“  ๋Œ“๊ธ€์„ ํ•œ ๋ฒˆ์— ๋ Œ๋”๋งํ•˜๊ธฐ - ํŽ˜์ด์ง€ ๋งค๊น€ ๋น„ํ™œ์„ฑํ™” Internal Link

ํŽ˜์ด์ง€๋„ค์ด์…˜์„ ๋น„ํ™œ์„ฑํ™”ํ•˜๊ณ , ๋ชจ๋“  ๋Œ“๊ธ€์„ ํ•œ ๋ฒˆ์— ๋ Œ๋”๋งํ•˜๋ ค๋ฉด startingPage๋ฅผ -1๋กœ ์„ค์ •ํ•˜์„ธ์š”.

Render All Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "startingPage": -1
8}];
9</script>
10

์ƒˆ ์ตœ์ƒ์œ„ ๋Œ“๊ธ€ ๋ฐฉ์ง€ Internal Link

Setting noNewRootComments to true will cause the widget to hide the root reply area, but still allow users to reply ํ•˜์œ„ ๋Œ“๊ธ€์— ๋‹ต๊ธ€์„ ๋‹ฌ ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ ์กฐ๊ฑด๋ถ€๋กœ ์ด ๊ฐ’์„ ์„ค์ •ํ•˜์—ฌ ์ผ๋ถ€ ์‚ฌ์šฉ์ž๋งŒ ์ตœ์ƒ์œ„ ๋Œ“๊ธ€์„ ๋‚จ๊ธธ ์ˆ˜ ์žˆ๋„๋ก ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ตœ์ƒ์œ„ ๋Œ“๊ธ€ ์ž‘์„ฑ ๋ฐฉ์ง€
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "noNewRootComments": true
8}];
9</script>
10

๋‹ต๊ธ€ ์ตœ๋Œ€ ๊นŠ์ด Internal Link

๊ธฐ๋ณธ์ ์œผ๋กœ FastComments๋Š” ๋‹ต๊ธ€์˜ ์ค‘์ฒฉ์„ ๋ฌด์ œํ•œ์œผ๋กœ ํ—ˆ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ต๊ธ€์— ๊ณ„์†ํ•ด์„œ ๋‹ต๊ธ€์„ ๋‹ฌ ์ˆ˜ ์žˆ๋Š” ์Šค๋ ˆ๋“œ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

maxReplyDepth ์˜ต์…˜์€ ๋‹ต๊ธ€ ์Šค๋ ˆ๋“œ๊ฐ€ ์–ผ๋งˆ๋‚˜ ๊นŠ๊ฒŒ ์ค‘์ฒฉ๋  ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ์ œํ•œํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. ์ตœ๋Œ€ ๊นŠ์ด์— ๋„๋‹ฌํ•˜๋ฉด ํ•ด๋‹น ์ˆ˜์ค€์˜ ๋Œ“๊ธ€์—๋Š” ๋” ์ด์ƒ ๋‹ต๊ธ€ ๋ฒ„ํŠผ์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

Limiting Reply Depth to 2 Levels
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "maxReplyDepth": 2
8}];
9</script>
10

With maxReplyDepth set to 2:

  • ์‚ฌ์šฉ์ž๋Š” ์ตœ์ƒ์œ„ ์ˆ˜์ค€(๊นŠ์ด 0)์— ๋Œ“๊ธ€์„ ๋‹ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค
  • ์‚ฌ์šฉ์ž๋Š” ์ตœ์ƒ์œ„ ๋Œ“๊ธ€์— ๋‹ต๊ธ€์„ ๋‹ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค (๊นŠ์ด 1)
  • ์‚ฌ์šฉ์ž๋Š” ๊ทธ ๋‹ต๊ธ€๋“ค์— ๋‹ค์‹œ ๋‹ต๊ธ€์„ ๋‹ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค (๊นŠ์ด 2)
  • ๊นŠ์ด 2๋ฅผ ๋„˜์–ด์„œ ์ถ”๊ฐ€ ๋‹ต๊ธ€์€ ํ—ˆ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค

Setting to 1 would only allow replies to top-level comments, creating a flatter discussion structure.

maxReplyDepth๋ฅผ 0์œผ๋กœ ์„ค์ •ํ•˜๋ฉด ๋ชจ๋“  ๋‹ต๊ธ€์ด ๋น„ํ™œ์„ฑํ™”๋˜์–ด ์ตœ์ƒ์œ„ ๋Œ“๊ธ€๋งŒ ํ—ˆ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ๋‹ต๊ธ€์€ ๋ฌด์ œํ•œ์œผ๋กœ ์ค‘์ฒฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‹ฑ๊ธ€ ์‚ฌ์ธ์˜จ(SSO) ๊ฐœ์š” Internal Link

SSO, ๋˜๋Š” ์‹ฑ๊ธ€ ์‚ฌ์ธ์˜จ์€ FastComments๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋ณ„๋„์˜ ๊ณ„์ •์„ ๋งŒ๋“ค์ง€ ์•Š๊ณ ๋„ ์‚ฌ์šฉ์ž๋‚˜ ๊ท€ํ•˜๊ฐ€ FastComments๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๊ทœ์•ฝ ์ง‘ํ•ฉ์ž…๋‹ˆ๋‹ค.

์ต๋ช… ๋Œ“๊ธ€์„ ํ—ˆ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋ฉด, FastComments์—์„œ ๋Œ“๊ธ€์„ ๋‹ฌ๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ณ„์ •์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ด ๊ฐ€์ž… ๊ณผ์ •์„ ๋งค์šฐ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค โ€” ์‚ฌ์šฉ์ž๋Š” ๋Œ“๊ธ€์„ ๋‚จ๊ธธ ๋•Œ ์ด๋ฉ”์ผ๋งŒ ์ž…๋ ฅํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ ์ผ๋ถ€ ์‚ฌ์ดํŠธ๋Š” ๊ทธ์กฐ์ฐจ๋„ ์ถ”๊ฐ€์ ์ธ ๋งˆ์ฐฐ์ด๋ผ๊ณ  ๋А๋‚„ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์ดํ•ดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ „์ฒด ์‚ฌ์ดํŠธ์— ๋Œ€ํ•ด ํ•˜๋‚˜์˜ ๋กœ๊ทธ์ธ ํ๋ฆ„๋งŒ ๊ฐ€์ง€๋„๋ก ํ•˜์—ฌ ๊ทธ ๋งˆ์ฐฐ์„ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

How do I get it?

๋ชจ๋“  ๊ณ„์ • ์œ ํ˜•์€ ํ˜„์žฌ SSO์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ SSO ์‚ฌ์šฉ์ž ์ˆ˜์˜ ์ตœ๋Œ€์น˜๋Š” ํŒจํ‚ค์ง€์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง‘๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๊ธฐ๋Šฅ๋“ค๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ Pro ํ”Œ๋žœ ์ด์ƒ์€ ์ง์ ‘์ ์ธ ๊ฐœ๋ฐœ ์ง€์›์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์˜ต์…˜๋“ค์„ ๋น„๊ตํ•œ ํ›„ ๊ฐ ํ•ญ๋ชฉ์˜ ์„ธ๋ถ€ ์‚ฌํ•ญ์œผ๋กœ ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.

User and Comment Migrations

Disqus์™€ ๊ฐ™์€ SSO๋ฅผ ์ œ๊ณตํ•˜๋Š” ํ”Œ๋žซํผ์—์„œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋Š” ๊ฒฝ์šฐ, ์ด๋ฏธ ์‚ฌ์šฉ์ž์™€ ๊ทธ๋“ค์˜ ๋Œ“๊ธ€์ด ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋Œ“๊ธ€์€ API, ์šฐ๋ฆฌ์˜ Import UI, ๋˜๋Š” ๊ณ ๊ฐ ์ง€์›์„ ํ†ตํ•ด ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์˜ ์ผ๋ถ€๋กœ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. ์ด์ „ ํ”Œ๋žซํผ์„ ์ง€์›ํ•˜๋Š” ๊ฒฝ์šฐ Import UI๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ถŒ์žฅ๋˜๋ฉฐ, ์ด๋Š” ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ, ์•„๋ฐ”ํƒ€ ๋ฐ ๋ฏธ๋””์–ด ์ถ”์ถœ ๋ฐ ์—…๋กœ๋“œ, ๊ทธ๋ฆฌ๊ณ  ๋ฐฐ์น˜ ์ž‘์—… ๋ชจ๋‹ˆํ„ฐ๋ง ์‹œ์Šคํ…œ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž ๊ณ„์ • ์ž์ฒด๋Š” ๋Œ“๊ธ€ ์Šค๋ ˆ๋“œ๋ฅผ ์ฒ˜์Œ ๋ณผ ๋•Œ ์ž๋™์œผ๋กœ ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. ๋˜๋Š” API๋ฅผ ํ†ตํ•ด ์‚ฌ์ „ ์ถ”๊ฐ€ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ์ด ์ž‘์—…์€ ํฐ ์ด์ ์ด ๋งŽ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋Œ“๊ธ€์ด ๊ฐ€์ ธ์™€์กŒ๊ณ  SSO ์‚ฌ์šฉ์ž๊ฐ€ API๋กœ ์ˆ˜๋™ ์ถ”๊ฐ€๋˜์ง€ ์•Š์•˜๋‹ค๋ฉด, ๋Œ“๊ธ€์€ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ๋Œ“๊ธ€ ์Šค๋ ˆ๋“œ๋ฅผ ์ฒ˜์Œ ๋ณผ ๋•Œ ํ•ด๋‹น ์‚ฌ์šฉ์ž์˜ ๊ณ„์ •์œผ๋กœ ์ž๋™์œผ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ๊ทธ๋“ค์€ ์›๋ž˜ ์ž‘์„ฑํ•œ ๋Œ“๊ธ€์„ ๊ด€๋ฆฌ, ํŽธ์ง‘ ๋ฐ ์‚ญ์ œํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์ž๋™ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์€ ์ด๋ฉ”์ผ์ด๋‚˜ ์‚ฌ์šฉ์ž ์ด๋ฆ„์„ ํ†ตํ•ด ์ˆ˜ํ–‰๋ฉ๋‹ˆ๋‹ค. ์ผ๋ถ€ ํ”Œ๋žซํผ์€ Disqus์ฒ˜๋Ÿผ ๋‚ด๋ณด๋‚ด๊ธฐ ์‹œ ์ด๋ฉ”์ผ์„ ์ œ๊ณตํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ด ๊ฒฝ์šฐ ์‚ฌ์šฉ์ž ์ด๋ฆ„์œผ๋กœ ๋Œ€์ฒดํ•ฉ๋‹ˆ๋‹ค.

  • ์ผ์น˜ํ•˜๋Š” ์‚ฌ์šฉ์ž ์ด๋ฆ„๊ณผ SSO ํŽ˜์ด๋กœ๋“œ์— ์ด๋ฉ”์ผ์„ ์ „๋‹ฌํ•˜๋Š” ํ•œ, ์•Œ๋ฆผ ๋ฐ ๋ฉ˜์…˜์ด ์ž‘๋™ํ•˜๋„๋ก ๊ฐœ๋ณ„ ๋Œ“๊ธ€ ๊ฐ์ฒด์— ์ด๋ฉ”์ผ์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

๋Œ“๊ธ€๊ณผ ์‚ฌ์šฉ์ž๋ฅผ ํ•œ ๋ฒˆ์— ๊ฐ€์ ธ์˜ค๊ณ  ์‹ถ๋‹ค๋ฉด, ์‚ฌ์šฉ์ž๊ฐ€ API๋ฅผ ํ†ตํ•ด ๊ฐ€์ ธ์˜จ ํ›„ ๊ณ ๊ฐ ์ง€์›๊ณผ ํ˜‘๋ ฅํ•˜์—ฌ ๋Œ“๊ธ€์„ ํ•ด๋‹น ์‚ฌ์šฉ์ž ๊ณ„์ •์œผ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜์„ธ์š”.

์š”์•ฝํ•˜์ž๋ฉด ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์„ ์œ„ํ•œ ๊ฐ€์žฅ ์‰ฌ์šด ๊ฒฝ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

  1. ๋Œ“๊ธ€์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.
    1. ์•„๋ฐ”ํƒ€ ๋ฐ ๊ธฐํƒ€ ๋ฏธ๋””์–ด๋Š” Manage Data -> Imports์˜ Import UI๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ์ž๋™์œผ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜๋ฉ๋‹ˆ๋‹ค.
  2. Secure ๋˜๋Š” Simple SSO๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  3. ์‚ฌ์šฉ์ž๊ฐ€ ์ฒ˜์Œ ๋กœ๊ทธ์ธํ•  ๋•Œ ์‚ฌ์šฉ์ž๋ณ„๋กœ ์ž๋™ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์ด ์ด๋ฃจ์–ด์ง€๊ฒŒ ๋‘ก๋‹ˆ๋‹ค.
    1. ์‚ฌ์šฉ์ž์˜ ๋Œ“๊ธ€ ์ˆ˜๊ฐ€ 50k ๋ฏธ๋งŒ์ธ ๊ฒฝ์šฐ ๋ณดํ†ต ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ๊ฐ„์— 1์ดˆ ๋ฏธ๋งŒ๋งŒ ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.

WordPress Users

๊ท€ํ•˜๊ฐ€ ์šฐ๋ฆฌ WordPress ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ์ž‘์„ฑํ•  ์ฝ”๋“œ๋Š” ์—†์Šต๋‹ˆ๋‹ค! ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜์—ฌ SSO ์„ค์ •์„ ํด๋ฆญํ•œ ๋‹ค์Œ ํ™œ์„ฑํ™”ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋ฉด API ํ‚ค๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์ด๋ฅผ ๊ท€ํ•˜์˜ WordPress ์„ค์น˜๋กœ ์ „์†กํ•˜๋ฉฐ SSO๋ฅผ ์ผœ๋Š” ๋‹จ์ผ ๋ฒ„ํŠผ ํด๋ฆญ ๋งˆ๋ฒ•์‚ฌ๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ๋‹จ์ผ ๋ฒ„ํŠผ ํด๋ฆญ์œผ๋กœ ํ†ตํ•ฉํ•ด ๋‘์—ˆ์Šต๋‹ˆ๋‹ค.

ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ฒ˜์Œ ์„ค์น˜ํ•˜๋Š” ๊ฒฝ์šฐ ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€์˜ SSO ์„ค์ • ๋ฒ„ํŠผ์„ ๋ณด๊ธฐ ์ „์— ์„ค์ • ๊ณผ์ •์„ ์™„๋ฃŒํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ ์„ ์œ ์˜ํ•˜์„ธ์š”.

WordPress SSO - Moderators

ํ˜„์žฌ FastComments WordPress ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ๋Œ“๊ธ€์„ ๋‹ฌ ๋•Œ ๋ชจ๋”๋ ˆ์ดํ„ฐ ์˜†์— "Moderator" ๋ฐฐ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋ ค๋ฉด, ํ•ด๋‹น ์‚ฌ์šฉ์ž๋“ค์€ FastComments ๋Œ€์‹œ๋ณด๋“œ์—์„œ Moderator๋กœ๋„ ์ถ”๊ฐ€๋˜์–ด ์žˆ์–ด์•ผ ํ•˜๋ฉฐ ์ด๋ฉ”์ผ์ด ํ™•์ธ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Custom Integrations

์ปค์Šคํ…€ ํ†ตํ•ฉ์˜ ๊ฒฝ์šฐ ๋‘ ๊ฐ€์ง€ ์˜ต์…˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.

Option One - Secure SSO

Secure SSO๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด FastComments๋Š” ๋Œ“๊ธ€์„ ์ž‘์„ฑํ•˜๊ณ  ํˆฌํ‘œํ•˜๋ฉฐ ๋Œ“๊ธ€์„ ์ฝ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๊ท€ํ•˜์˜ ์‚ฌ์ดํŠธ์˜ ์‹ค์ œ ์‚ฌ์šฉ์ž์ž„์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์œ ํšจํ•œ ํŽ˜์ด๋กœ๋“œ๋งŒ ์ƒ์„ฑํ•˜๋ฉด, ์‚ฌ์šฉ์ž๋Š” ํ•ญ์ƒ ์›ํ™œํ•œ ๋Œ“๊ธ€ ์ž‘์„ฑ ๊ฒฝํ—˜์„ ๊ฐ–๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

Secure SSO์—์„œ๋Š” SSO ํŽ˜์ด๋กœ๋“œ๊ฐ€ HMAC ์ธ์ฆ์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„ ์ธก์—์„œ ์ƒ์„ฑ๋œ ๋‹ค์Œ ํด๋ผ์ด์–ธํŠธ์˜ ์œ„์ ฏ์— ์ „๋‹ฌ๋ฉ๋‹ˆ๋‹ค.

Secure SSO์—์„œ๋Š” ์‚ฌ์šฉ์ž์˜ ๊ณ„์ •์ด FastComments ์‚ฌ์šฉ์ž ๊ธฐ๋ฐ˜์˜ ๋‚˜๋จธ์ง€์™€ ์™„์ „ํžˆ ๋ถ„๋ฆฌ๋ฉ๋‹ˆ๋‹ค. ์ฆ‰, ํŒŒํŠธ๋„ˆ A์™€ ํŒŒํŠธ๋„ˆ B๊ฐ€ ์žˆ์„ ๋•Œ ๊ฐ ํŒŒํŠธ๋„ˆ๋Š” ๋ชจ๋‘ ์‚ฌ์šฉ์ž ์ด๋ฆ„์ด "Bob"์ธ SSO ์‚ฌ์šฉ์ž๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Requirements

  • ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์‹.
  • ๋น„๋ฐ€ API ํ‚ค๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ๋ณธ ์ง€์‹.
  • API ๊ฐœ๋ฐœ ๋˜๋Š” ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์‹.

Pros

  • ์•ˆ์ „ํ•จ.
  • ์›ํ™œํ•œ ๋Œ“๊ธ€ ์ž‘์„ฑ ๊ฒฝํ—˜.

Cons

  • ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ด ํ•„์š”ํ•จ.

Updating User Data

Secure SSO๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด SSO ์‚ฌ์šฉ์ž ํŽ˜์ด๋กœ๋“œ๋ฅผ ์ „๋‹ฌํ•  ๋•Œ๋งˆ๋‹ค ์ตœ์‹  ์ •๋ณด๋กœ ์‚ฌ์šฉ์ž๋ฅผ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์‚ฌ์šฉ์ž์˜ ์‚ฌ์šฉ์ž ์ด๋ฆ„์ด X์˜€๊ณ  SSO ํŽ˜์ด๋กœ๋“œ์— Y๋ฅผ ์ „๋‹ฌํ•˜๋ฉด ๊ทธ๋“ค์˜ ์‚ฌ์šฉ์ž ์ด๋ฆ„์€ Y๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

์ด ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฐ’์„ ์ œ๊ฑฐํ•˜๋ ค๋ฉด ๊ฐ’์„ null๋กœ ์„ค์ •ํ•˜์„ธ์š” (undefined๊ฐ€ ์•„๋‹˜).

Secure SSO API

SSO ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๊ธฐ ์œ„ํ•œ API๋„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. the docs๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

Secure SSO๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์‚ฌ์šฉ์ž๋Š” ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋œ๋‹ค๋Š” ์ ์— ์œ ์˜ํ•˜์„ธ์š”. ์‚ฌ์šฉ์ž๋ฅผ ๋Œ€๋Ÿ‰์œผ๋กœ ๊ฐ€์ ธ์˜ฌ ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

Option Two - Simple SSO

Secure SSO์˜ ๋Œ€์•ˆ์€ ๋‹จ์ˆœํžˆ ์‚ฌ์šฉ์ž ์ •๋ณด๋ฅผ ๋Œ“๊ธ€ ์œ„์ ฏ์— ์ „๋‹ฌํ•˜๋Š” Simple SSO์ž…๋‹ˆ๋‹ค.

Simple SSO์—์„œ๋Š” ์ด๋ฉ”์ผ์„ ์ œ๊ณตํ•  ํ•„์š”๊ฐ€ ์—†์ง€๋งŒ, ์ด๋ฉ”์ผ์ด ์—†์œผ๋ฉด ๊ทธ๋“ค์˜ ๋Œ“๊ธ€์€ "Unverified"๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ! 2022๋…„ ์ดˆ๋ถ€ํ„ฐ Simple SSO์˜ ์‚ฌ์šฉ์ž ์ด๋ฆ„์€ FastComments.com ์ „์ฒด์—์„œ ๊ณ ์œ ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ด์ƒ์ ์œผ๋กœ Simple SSO๋Š” ๋ฐฑ์—”๋“œ ์ ‘๊ทผ์„ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” ํ”Œ๋žซํผ์—์„œ ๊ฐœ๋ฐœํ•  ๋•Œ๋งŒ ์„ ํƒํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Requirements

  • ํด๋ผ์ด์–ธํŠธ ์ธก ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์‹.
  • ์ ์–ด๋„ ์‚ฌ์šฉ์ž ์ด๋ฉ”์ผ์„ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•จ.

Pros

  • ๋‹จ์ˆœํ•จ.
  • ๋ชจ๋“  ํ™œ๋™์€ ์—ฌ์ „ํžˆ ๊ฒ€์ฆ๋จ.
  • ์‚ฌ์šฉ์ž๋Š” ์ž์‹ ๋“ค์˜ ์‚ฌ์šฉ์ž ์ด๋ฆ„์ด๋‚˜ ์ด๋ฉ”์ผ์„ ์ž…๋ ฅํ•˜์ง€ ์•Š์Œ.

Cons

  • ํด๋ผ์ด์–ธํŠธ ์ธก ํŽ˜์ด๋กœ๋“œ๊ฐ€ ์ž„์˜๋กœ ์กฐ์ž‘๋˜์–ด ์–ด๋–ค ์‚ฌ์šฉ์ž๋กœ๋„ ๋  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— Secure SSO๋ณด๋‹ค ๋ณด์•ˆ์„ฑ์ด ๋‚ฎ์Œ.

Simple SSO API

Simple SSO ํ๋ฆ„์„ ํ†ตํ•ด ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋œ ์‚ฌ์šฉ์ž๋Š” SSOUser ๊ฐ์ฒด๋กœ ์ €์žฅ๋ฉ๋‹ˆ๋‹ค. ์ด๋“ค์€ SSOUser API๋ฅผ ํ†ตํ•ด ์ ‘๊ทผํ•˜๊ณ  ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. the docs๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

๋งž์ถค ํ†ตํ•ฉ - ๊ฐ„๋‹จํ•œ ์‹ฑ๊ธ€ ์‚ฌ์ธ์˜จ(SSO) Internal Link

Simple SSO๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋Œ“๊ธ€ ์œ„์ ฏ์— ์‚ฌ์šฉ์ž ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ๋Œ“๊ธ€์„ ๋‹ฌ ๋•Œ ์‚ฌ์šฉ์ž ์ด๋ฆ„์ด๋‚˜ ์ด๋ฉ”์ผ์„ ์ž…๋ ฅํ•  ํ•„์š”๊ฐ€ ์—†๋„๋ก ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Simple SSO๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:

Simple SSO
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "simpleSSO": {
8 "username": "Bob",
9 "email": "bob@example.com",
10 "avatar": "https://example.com/bob.png",
11 "websiteUrl": "https://example.com/profiles/bob",
12 "displayName": "Bob's Name",
13 "displayLabel": "VIP User",
14 "loginURL": "https://example.com/login",
15 "logoutURL": "https://example.com/logout",
16 "badgeConfig": {
17 "badgeIds": [
18 "badge-id-1",
19 "badge-id-2"
20 ],
21 "override": false
22 }
23 }
24}];
25</script>
26

์‚ฌ์šฉ์ž๋Š” ๋กœ๊ทธ์ธ๋œ ์ƒํƒœ๊ฐ€ ๋˜๋ฉฐ, ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ SSO ์‚ฌ์šฉ์ž๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. API์—์„œ ๊ฐ€์ ธ์˜จ ๊ฒฝ์šฐ createdFromSimpleSSO๋Š” true๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.

Notes:

  • ์ด๋ฉ”์ผ์€ Simple SSO์˜ ๊ณ ์œ  ์‹๋ณ„์ž์ž…๋‹ˆ๋‹ค.
  • Simple SSO์— ์ด๋ฉ”์ผ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์€ ํ•„์ˆ˜๊ฐ€ ์•„๋‹ˆ์ง€๋งŒ, ๊ธฐ๋ณธ์ ์œผ๋กœ ํ•ด๋‹น ์‚ฌ์šฉ์ž์˜ ๋Œ“๊ธ€์€ "ํ™•์ธ๋˜์ง€ ์•Š์Œ"์œผ๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฉ”์ผ์ด ์ œ๊ณต๋˜์ง€ ์•Š์œผ๋ฉด ์‚ฌ์šฉ์ž๋Š” ์™„์ „ํžˆ ์ธ์ฆ๋  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
  • NEW 2022๋…„ 1์›”๋ถ€ํ„ฐ: ์‚ฌ์šฉ์ž ์ด๋ฆ„์€ fastcomments.com ์ „์—ญ์—์„œ ๊ณ ์œ ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค
  • ์ด๋ฉ”์ผ์ด ์ œ๊ณต๋˜๊ณ  ํ•ด๋‹น ์‚ฌ์šฉ์ž๊ฐ€ ์›๋ž˜ Secure SSO์—์„œ ์ƒ์„ฑ๋˜์ง€ ์•Š์•˜๋‹ค๋ฉด, Simple SSO๋Š” SSO ์‚ฌ์šฉ์ž๋ฅผ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•˜๊ณ  ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ์ž์— ๋Œ€ํ•ด badgeConfig ์†์„ฑ์œผ๋กœ ๋ฐฐ์ง€๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. badgeIds ๋ฐฐ์—ด์€ ์‚ฌ์šฉ์ž์™€ ์—ฐ๊ด€ํ•  ๋ฐฐ์ง€์˜ ID๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. override๊ฐ€ true๋กœ ์„ค์ •๋˜๋ฉด ๋Œ“๊ธ€์— ํ‘œ์‹œ๋œ ๊ธฐ์กด ๋ชจ๋“  ๋ฐฐ์ง€๋ฅผ ๋Œ€์ฒดํ•˜๊ณ , false๋ฉด ๊ธฐ์กด ๋ฐฐ์ง€์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

๋งž์ถค ํ†ตํ•ฉ - Disqus SSO์—์„œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ Internal Link

Disqus์™€ FastComments Secure SSO ์‚ฌ์ด์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ Disqus๋Š” ์•”ํ˜ธํ™”์— SHA1์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ˜๋ฉด, ์šฐ๋ฆฌ๋Š” SHA256์„ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค.

์ด๋Š” Disqus์—์„œ์˜ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์ด ์‰ฝ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค - ์‚ฌ์šฉ๋˜๋Š” ํ•ด์‹ฑ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ SHA1์—์„œ SHA256์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  UI์— ์ „๋‹ฌ๋˜๋Š” ์†์„ฑ ์ด๋ฆ„๋“ค์„ ์—…๋ฐ์ดํŠธํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๋งž์ถค ํ†ตํ•ฉ - Commento SSO์—์„œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ Internal Link

Commento๋Š” ๊ทผ๋ณธ์ ์œผ๋กœ ๋‹ค๋ฅธ SSO ์ ‘๊ทผ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค - ์‚ฌ์šฉ์ž๋ฅผ ์ธ์ฆํ•˜๊ธฐ ์œ„ํ•ด ํ˜ธ์ถœํ•˜๋Š” ์—”๋“œํฌ์ธํŠธ๋ฅผ ๋ณด์œ ํ•˜๋„๋ก ์š”๊ตฌํ•ฉ๋‹ˆ๋‹ค.

FastComments๋Š” ๊ทธ์™€ ๋ฐ˜๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค - ๋‹จ์ˆœํžˆ ๋น„๋ฐ€ ํ‚ค๋ฅผ ์‚ฌ์šฉํ•ด ์‚ฌ์šฉ์ž์˜ ์ •๋ณด๋ฅผ ์ธ์ฝ”๋”ฉํ•˜๊ณ  ํ•ด์‹œํ•œ ํ›„ ์ „๋‹ฌํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์ฝœ๋ฐฑ Internal Link

All libraries for the comment widget (currently Angular, React, Vue) support callbacks.

์ฝœ๋ฐฑ์€ ๊ตฌ์„ฑ ๊ฐ์ฒด์— ์ง€์ •๋˜๋ฉฐ, ๊ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋งˆ๋‹ค ๋™์ผํ•œ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

์ง€์›๋˜๋Š” ์ฝœ๋ฐฑ:

  • onInit
  • onAuthenticationChange
  • onRender
  • commentCountUpdated
  • onReplySuccess
  • onVoteSuccess
  • onImageClicked
  • onOpenProfile
  • onCommentSubmitStart
  • onCommentsRendered

์ •ํ™•ํ•œ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋Š” TypeScript definitions์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ์ฝœ๋ฐฑ์ด ์‚ฌ์šฉ๋œ ์˜ˆ์ œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

์ฝœ๋ฐฑ ์˜ˆ์ œ
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 window.FastCommentsUI(document.getElementById('fastcomments-widget'), {
6 tenantId: 'demo',
7 onInit: function () {
8 console.log('Library started to fetch comments!');
9 },
10 onAuthenticationChange: function (eventName, userObj) {
11 console.log('User authenticated!', eventName, userObj);
12 },
13 onRender: function () {
14 console.log('Render event happened!');
15 },
16 commentCountUpdated: function (newCount) {
17 console.log('New comment count:', newCount);
18 },
19 onReplySuccess: function (comment) {
20 console.log('New comment saved!', comment);
21 },
22 onVoteSuccess: function (comment, voteId, direction, status) {
23 console.log('New vote saved!', comment, voteId, direction, status);
24 },
25 onImageClicked: function (src) {
26 console.log('Image clicked!', src);
27 },
28 onOpenProfile: function (userId) {
29 console.log('User tried to open profile', userId);
30 // return true; // fastcomments.com ์‚ฌ์šฉ์ž ํ”„๋กœํ•„์„ ์—ฌ๋Š” ๊ธฐ๋ณธ ๋™์ž‘์„ ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
31 },
32 onCommentSubmitStart: function(comment, continueSubmitFn, cancelFn) {
33 console.log('Trying to submit comment', comment);
34 setTimeout(function() { // ๋น„๋™๊ธฐ ๋™์ž‘(์˜ˆ: API ํ˜ธ์ถœ ๋“ฑ)์„ ์—๋ฎฌ๋ ˆ์ด์…˜ํ•ฉ๋‹ˆ๋‹ค.
35 if(confirm('Should submit?')) {
36 continueSubmitFn();
37 } else {
38 cancelFn('Some optional error message');
39 }
40 }, 1000);
41 },
42 onCommentsRendered: function(comments) {
43 // comments๋Š” ํŽ˜์ด์ง€์˜ ๊ธฐ๋ณธ ์ •๋ ฌ(์˜ˆ: Most Relevant(์˜ˆ: ๊ฐ€์žฅ ๋งŽ์ด ์ถ”์ฒœ๋œ ํ•ญ๋ชฉ ๋“ฑ) ๋˜๋Š” Newest First)์— ๋”ฐ๋ผ ์ •๋ ฌ๋ฉ๋‹ˆ๋‹ค.
44 const topCommentInList = comments[0];
45 console.log('First Comment Rendered:', topCommentInList.avatarSrc, topCommentInList.commenterName, topCommentInList.commentHTML);
46 }
47 });
48</script>
49

ํŽ˜์ด์ง€ ์ œ๋ชฉ Internal Link


ํ˜„์žฌ ํŽ˜์ด์ง€ ์ œ๋ชฉ์€ ์ง€์ •๋œ urlId์— ์—ฐ๊ฒฐ๋˜์–ด ๋ชจ๋”๋ ˆ์ด์…˜ ๋„๊ตฌ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์ €์žฅ๋ฉ๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๋Š” document.title์—์„œ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

์›ํ•œ๋‹ค๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํŽ˜์ด์ง€ ์ œ๋ชฉ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:

Specifying The Page Title
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "pageTitle": "Article 42"
8}];
9</script>
10

๋Œ“๊ธ€ ์ˆ˜ ๋ฐ ์ค‘์ฒฉ๋œ ๋ชจ๋“  ๋‹ต๊ธ€ ํฌํ•จ ๊ณ„์‚ฐ Internal Link

๋Œ“๊ธ€ ์œ„์ ฏ ์ƒ๋‹จ์— ํ‘œ์‹œ๋˜๋Š” ๋Œ“๊ธ€ ์ˆ˜๋Š” ํŽ˜์ด์ง€๋‚˜ ๊ฒŒ์‹œ๋ฌผ ์ž์ฒด์— ์ง์ ‘ ๋‹ฌ๋ฆฐ ๋‹ต๊ธ€์„ ์˜๋ฏธํ•˜๋Š” "top-level" ๋Œ“๊ธ€๋งŒ์„ ํ‘œ์‹œํ•  ์ˆ˜๋„ ์žˆ๊ณ , ๋˜๋Š” ๋ชจ๋“  ์ค‘์ฒฉ๋œ ๋Œ“๊ธ€์˜ ์ˆ˜๋ฅผ ์…€ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๊ฒƒ์€ true์ž…๋‹ˆ๋‹ค - ํ›„์ž์˜, ์ฆ‰ ๋ชจ๋“  ๋Œ“๊ธ€์˜ ์ˆ˜๋ฅผ ์…‰๋‹ˆ๋‹ค. ๋Œ“๊ธ€ ์œ„์ ฏ์˜ ์ด์ „ ๋ฒ„์ „์—์„œ๋Š” ๊ธฐ๋ณธ๊ฐ’์ด false์˜€์Šต๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ๋™์ž‘์„ ๋ณ€๊ฒฝํ•˜์—ฌ ๋ชจ๋“  ์ค‘์ฒฉ ๋Œ“๊ธ€์˜ ์ˆ˜๊ฐ€ ๋˜๋„๋ก countAll ํ”Œ๋ž˜๊ทธ๋ฅผ true๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Counting All Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "countAll": true
8}];
9</script>
10

์นด์šดํŠธ๊ฐ€ ์˜ค์ง ์ตœ์ƒ์œ„ ๋Œ“๊ธ€๋งŒ ๋ฐ˜์˜ํ•˜๋„๋ก ํ•˜๋ ค๋ฉด, ํ”Œ๋ž˜๊ทธ๋ฅผ false๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

Counting Top Level Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "countAll": false
8}];
9</script>
10

์ด ๋™์ž‘์€ ํ˜„์žฌ ์ฝ”๋“œ ๋ณ€๊ฒฝ ์—†์ด ์‚ฌ์šฉ์žํ™”ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๊ทธ๋ฃน ๋ฉ˜์…˜ ID Internal Link

@mentions ์ž๋™ ์™„์„ฑ์— ์‚ฌ์šฉํ•  id ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค. ๊ต์ง‘ํ•ฉ ๊ทธ๋ฃน์ด ์—†๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ํƒœ๊ทธ๋˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ์— ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ง€์ •ํ•˜๋ฉด @ ๋ฌธ์ž๋ฅผ ์ž…๋ ฅํ•œ ํ›„ ์ž๋™ ์™„์„ฑ์—๋Š” ๋‹ค๋ฅธ ๊ทธ๋ฃน์— ์†ํ•œ ์‚ฌ์šฉ์ž๋งŒ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

Limit Groups for Mentions
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "mentionGroupIds": [
8 "yxZAhjzda",
9 "QT19nXbqB"
10 ]
11}];
12</script>
13