# Embed Discourse comments on another website via Javascript

**URL:** https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963
**Category:** Integrations
**Tags:** embedding, how-to
**Created:** [8월 10, 2015, 6:20오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963 "2015-08-10T18:20:46Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [1월 7, 2021, 4:27오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/373 "2021-01-07T16:27:31Z")

</div>

귀하의 사용 사례는 Discourse에서 기본적으로 지원하지 않으며, 이를 구현하려면 일부 맞춤형 개발이 필요합니다. 플러그인 개발을 고려하시거나, 컨설턴트를 고용하여 구현을 도와달라고 요청하는 것을 추천드립니다.

---

<div class="post-metadata">

### Author: ![willywongi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/willywongi/32/201417_2.png) [@willywongi](https://meta.discourse.org/u/willywongi)
#### Post date: [1월 14, 2021, 1:49오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/374 "2021-01-14T13:49:35Z")

</div>

문제 해결(Troubleshooting) 섹션에 추가하자면, Discourse가 새 스레드를 생성하기 위해 페이지나 블로그 포스트의 내용을 파싱하지 못하면 임베딩이 실패하며(그에 대한 어떤 안내도 제공되지 않음) 발생합니다. 먼저 특정 주제(Topic)를 임베드해 보시고, 그런 다음 페이지를 파싱하기 위한 옵션들을 활용해 보세요.

---

<div class="post-metadata">

### Author: ![bvdrie72](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bvdrie72/32/158775_2.png) [@bvdrie72](https://meta.discourse.org/u/bvdrie72)
#### Post date: [1월 26, 2021, 4:50오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/375 "2021-01-26T16:50:04Z")

</div>

정말 좋습니다! 다만 하나 걸리는 것이 있습니다. 첫 번째 게시글로 사용하려면 올바른 CSS 선택자를 사용해 `meta-description`을 가져오는 방법을 알 수 없습니다.

아래와 같은 여러 버전을 시도해 보았습니다. 조언해 주실 수 있나요?

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/0/60ed568e8cadd1ec5eaa441cb3fc2e0f1a9e3361.png)

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [1월 26, 2021, 6:33오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/376 "2021-01-26T18:33:05Z")

</div>

> [@bvdrie72](#):
>
> 여기서 제가 겪는 유일한 문제는 `meta-description`을 첫 번째 게시물로 가져오기 위해 올바른 CSS 선택자를 어떻게 사용해야 하는지 파악하지 못한다는 점입니다.

웹사이트의 `head` 섹션에서 `meta` 태그의 내용을 가져오려 한다면, 이는 불가능할 것으로 보입니다.

---

<div class="post-metadata">

### Author: ![Jim\_Starkweather](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jim_starkweather/32/181916_2.png) [@Jim\_Starkweather](https://meta.discourse.org/u/Jim_Starkweather)
#### Post date: [2월 3, 2021, 6:36오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/377 "2021-02-03T18:36:15Z")

</div>

아직도 이 기능이 임베드에 포함된 링크에 대해 단순히 하나의 박스만 표시할 뿐, 텍스트나 이미지 등 더 정교한 방식으로 가져오지 않는다는 점이 아쉽습니다.

복잡한 페이지 데이터나 레이아웃을 가진 사이트의 경우, 토론을 위한 자리이면서 동시에 원격 사이트의 기사나 스토리로 사람들을 안내하는 방법까지 고려한 시나리오를 누군가는 생각했을 것 같은데요.

부탁드려요? 🙂

---

<div class="post-metadata">

### Author: ![Robert\_Fay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robert_fay/32/86825_2.png) [@Robert\_Fay](https://meta.discourse.org/u/Robert_Fay)
#### Post date: [2월 10, 2021, 7:31오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/378 "2021-02-10T19:31:21Z")

</div>

현재 저희는 메인 사이트의 일부 블로그와 기사에 이를 구현하고 포럼을 활용하는 방안을 검토하고 있습니다. 오늘 아침 회의 중 마케팅 담당자가 각 포럼 게시물이 블로그와 동일한 제목과 첫 단락을 표시하기 때문에 중복 콘텐츠로 보일 수 있다며 나쁜 아이디어라고 지적했습니다. 그는 예시를 구글 검색으로 보여주었습니다. 구글에게 이들이 중복 콘텐츠가 아님을 알리는 내장 기능이 있는지, 아니면 해당 게시물에 no index를 적용할 수 있을까요?

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/1/7114e076c417eae215f2fb5315f3f24e9c352361.png)

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2월 11, 2021, 3:37오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/379 "2021-02-11T15:37:09Z")

</div>

음, 흥미로운데, `noindex`를 추가하면 댓글도 인덱싱되지 않아서 이상적이진 않아요. 페이지의 일부가 중복이라고 구글에 알려줄 방법이 있을까요?

그걸 OP에 적용해볼 수 있을 것 같아요.

---

<div class="post-metadata">

### Author: ![Robert\_Fay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robert_fay/32/86825_2.png) [@Robert\_Fay](https://meta.discourse.org/u/Robert_Fay)
#### Post date: [2월 11, 2021, 3:57오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/380 "2021-02-11T15:57:58Z")

</div>

실제로 우리가 이 문제를 논의할 때 내 걱정도 바로 이 부분이었습니다. 블로그의 SEO 가치를 해치고 싶지는 않지만, 때로는 일부 블로그 글만큼이나 큰 매력으로 작용하는 포럼 Q&A를 숨기기도 원치 않습니다. 게시물의 일부만 Google에 인덱싱시키고 나머지는 제외하는 방법을 어떻게 해야 할지 모르겠습니다.

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2월 11, 2021, 6:38오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/381 "2021-02-11T18:38:41Z")

</div>

> [@Robert\_Fay](#):
>
> 이들이 중복 콘텐츠가 아님을 Google에 알리는 데 도움이 되는 내장 기능이 있나요, 아니면 이 게시물들에 no index를 적용할 수 있을까요?

Discourse에는 `embed set canonical url`이라는 사이트 설정이 있습니다. 이 설정이 활성화되면 임베드된 토픽의 정정(canonical) URL이 임베드된 콘텐츠의 URL로 설정됩니다. 이 기능이 중복 콘텐츠 문제를 개선하는 데 도움이 될까요?

---

<div class="post-metadata">

### Author: ![Robert\_Fay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robert_fay/32/86825_2.png) [@Robert\_Fay](https://meta.discourse.org/u/Robert_Fay)
#### Post date: [2월 11, 2021, 7:42오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/382 "2021-02-11T19:42:39Z")

</div>

이 기능이 해당 문제를 해결하는 데 도움이 될 것 같습니다. 혹시 이 기능을 사용 중인 분을 알고 계신가요? 예시를 보여주시고 공유할 수 있으면 좋겠습니다.

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [2월 11, 2021, 8:49오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/383 "2021-02-11T20:49:38Z")

</div>

여기서 또 다른 옵션은 토론 제목 앞에 "\_\_\_\_\_\_에 대한 댓글"을 추가하는 것입니다.

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2월 11, 2021, 9:10오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/384 "2021-02-11T21:10:49Z")

</div>

> [@Robert\_Fay](#):
>
> 이 기능을 사용하고 있는 사람을 아시는 분이 혹시 계실까요? 예시를 보여주고 공유할 수 있도록요.

그건 좀 까다로운데요, 고객의 사이트 관련 세부 사항을 공유할 수 없어서요. 이 문제에 대한 자세한 내용은 이 토픽에서 확인하실 수 있습니다: [Add option to set canonical\_url to embed\_url](https://meta.discourse.org/t/add-option-to-set-canonical-url-to-embed-url/103915). 해당 토픽에서 설정을 활성화한 것이 SEO에 어떤 영향을 미쳤는지에 대한 세부 사항을 공유해 주실 분이 있는지 문의해 두었습니다.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2월 12, 2021, 3:52오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/385 "2021-02-12T15:52:10Z")

</div>

제목만 바꾸면 충분한가요? 게시글 내용은 여전히 공유됩니다.

---

<div class="post-metadata">

### Author: ![Cali\_Amanda](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cali_amanda/32/199229_2.png) [@Cali\_Amanda](https://meta.discourse.org/u/Cali_Amanda)
#### Post date: [2월 12, 2021, 4:36오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/386 "2021-02-12T16:36:15Z")

</div>

> [@Jim\_Starkweather](#):
>
> 음… 글쎄, 그게 약간 문제가 되는 건 페이지 자체가 미리보기되는 대상이거든요. 그래서 페이지 HTML이나 본문 상단에 링크를 두는 건 좀 문제입니다. 문제가 되는 페이지는 다음과 같습니다:
> 
> [https://modelshipwrights.com/news/us-navy-light-cruiser-cl-89-miami](https://modelshipwrights.com/news/us-navy-light-cruiser-cl-89-miami) [직원 모니터링](https://www.worktime.com/employee-monitoring)

어떤 이유에선지 아드블록을 비활성화해도 페이지를 볼 수 없고, 아드블록을 비활성화해야 한다는 메시지가 뜹니다.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2월 13, 2021, 3:34오전 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/387 "2021-02-13T03:34:46Z")

</div>

> [@Robert\_Fay](#):
>
> 포럼에서 생성되는 각 게시물은 우리 블로그와 동일한 제목과 첫 단락을 표시하기 때문에 중복 콘텐츠로 보일 것입니다.

제 경험상, 중복 콘텐츠 문제가 발생하는 데는 단 하나의 "중복"된 단락만으로는 부족합니다 – 제 블로그의 스크린샷을 사용하셨기 때문이죠 🙂 무작위 기사에서 한 단락을 인용하는 것과 비슷합니다.

---

<div class="post-metadata">

### Author: ![Jim\_Starkweather](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jim_starkweather/32/181916_2.png) [@Jim\_Starkweather](https://meta.discourse.org/u/Jim_Starkweather)
#### Post date: [2월 19, 2021, 8:06오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/388 "2021-02-19T20:06:29Z")

</div>

> [@JimPas](#):
>
> 링크를 별도의 줄에 단독으로 배치하면 Onebox가 적용됩니다.  
> 그 다음, 첫 번째 이미지에서 보인 것처럼 링크를 포함한 설명 전체를 아래 줄에 배치하세요. 그러면 Onebox 처리된 링크 아래에 표시됩니다.

오늘 이 방법을 시도해 보았는데, 페이지 URL을 숨겨진 div에 넣었습니다. 스크립트는 그냥 링크를 텍스트로만 배치했습니다. 아쉽게도 Onebox가 적용되지 않았습니다. ☹

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/3/f33d0638dad73ea7188aaba25d89a8dd07b6e79b.png)

---

<div class="post-metadata">

### Author: ![Jim\_Starkweather](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jim_starkweather/32/181916_2.png) [@Jim\_Starkweather](https://meta.discourse.org/u/Jim_Starkweather)
#### Post date: [4월 3, 2021, 7:30오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/389 "2021-04-03T19:30:03Z")

</div>

임베드 기능을 통해 페이지에서 내 사진을 가져오도록 설정했습니다. 문제는 제 쪽에 있었는데, 코드가 lazyload라는 사전 로드/페이드인 이미지 JavaScript를 사용하고 있었기 때문입니다. 이 기능을 제거한 후에는 클래스 선택자 영역에서 설정한 어떤 이미지도 주제 생성 시 정상적으로 생성되었습니다. 하지만…

주제는 생성되고 몇 분간은 잘 작동합니다. 확대 클릭을 통해 이미지를 볼 수도 있습니다. 그러나 몇 분 후 새로고침을 하면 주제가 변경되고, 이미지가 있는 자리에 업로드 텍스트 줄이 표시됩니다.

`![](upload://s9ULowF5G9GnR4SQ1STdj1d9JtO.jpeg)`

**이것은 이미지가 포럼 서버로 원격 업로드되지 못한 실패로 보입니다. 이것이 실패하는 이유가 무엇인지에 대한 아이디어가 있을까요? 또한 실패하더라도 왜 시스템은 원래의 URL 위치를 유지하지 않는지 궁금합니다. 이상해 보입니다.**

추가로 말씀드리자면, 이는 단독 사례가 아니었습니다. 처음에 이미지가 있던 모든 주제(약 10개 이상)에서 일관되게 발생했습니다.

[update: 이 문제의 우회 방법은 내 사이트를 이미지 다운로드 금지 사이트 블랙리스트에 추가하는 것이었습니다. 이렇게 하면 HTML이 원격 사이트에서 이미지를 그대로 가져옵니다. 제 환경에서는 잘 작동합니다.]

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [4월 4, 2021, 3:38오전 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/390 "2021-04-04T03:38:00Z")

</div>

URL이 변경될 때(블로그 제목 업데이트 등) 새 토픽 생성을 방지할 수 있을까요?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [4월 4, 2021, 4:01오전 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/391 "2021-04-04T04:01:48Z")

</div>

네, 하지만 블로그 소프트웨어는 첫 번째 호출 시 생성된 토픽 ID를 추적하여 이후 임베드 요청 시 매개변수로 전달해야 합니다.

OP의 “기존 토픽에 링크하기” 섹션을 참고하세요.

---

<div class="post-metadata">

### Author: ![Q3manish](https://avatars.discourse-cdn.com/v4/letter/q/258eb7/32.png) [@Q3manish](https://meta.discourse.org/u/Q3manish)
#### Post date: [4월 19, 2021, 2:26오후 UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/392 "2021-04-19T14:26:02Z")

</div>

Angular에서 TypeScript를 사용하여 임베드(내장)하는 데 문제가 있습니다. 도움을 주십시오.

```plaintext
let window : any;

      window.DiscourseEmbed = { discourseUrl: 'xyz.com',

        topicId: 26};

       

        let script = this._renderer2.createElement('script');

        script.type = "text/javascript";

        script.src = 'window.DiscourseEmbed.discourseUrl '+ 'javascripts/embed.js';

        script.async = true;
this._renderer2.appendChild(this._document.body, script);

```

[Previous page](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963.md?page=1)

[Next page](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963.md?page=3)
