# Twitter 네이티브 임베드

**URL:** https://meta.discourse.org/t/twitter-native-embed/261792
**Category:** Theme component
**Created:** [4월 15, 2023, 12:35오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792 "2023-04-15T12:35:49Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![Shaneod](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@Shaneod](https://meta.discourse.org/u/Shaneod)
#### Post date: [7월 25, 2023, 1:01오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/41 "2023-07-25T13:01:57Z")

</div>

> [@agemo](#):
>
> 트윗용으로 하나의 박스가 다시 작동하기 시작하면서 이 컴포넌트를 무시하고 있습니다. 오늘 이걸 확인하신 분 계신가요?

다시 돌아왔다가 내 쪽에서는 또 사라졌습니다.

---

<div class="post-metadata">

### Author: ![Shaneod](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@Shaneod](https://meta.discourse.org/u/Shaneod)
#### Post date: [7월 25, 2023, 1:04오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/42 "2023-07-25T13:04:27Z")

</div>

> [@agemo](#):
>
> > [@Steven](#):
> >
> > 이 솔루션만으로는 내게 충분하지 않아서 조금 더 추가할게요
> > 
> > `twitter consumer key`와 `twitter consumer secret`에 무언가(진짜, 아무 랜덤 값이든 상관없습니다)를 추가해야 해요
> > 
> > 아마 여전히 오래된 API가 남아있었을 거예요
> > 
> > 그러면 테마 컴포넌트가 다시 작동할 거예요
> 
> beta5에서는 onebox 도메인 차단만으로도 충분했는데, 최신 업데이트에서 무엇이 바뀌었는지 모르겠지만, 위의 추가 조언 덕분에 컴포넌트가 다시 트윗을 렌더링하게 되었습니다.

죄송하지만, 아이에게 설명하듯 수정 방법을 처음부터 끝까지 자세히 나열해 주실 수 있을까요? 😅

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [7월 25, 2023, 1:26오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/43 "2023-07-25T13:26:17Z")

</div>

1. 테마 컴포넌트를 설치하세요.
2. `content security policy script src` 설정에 `https://platform.twitter.com/`을(를) 추가하세요.
3. `blocked onebox domains`에 `twitter.com`을(를) 추가하세요.
4. `twitter consumer key` 설정에 아무 값이나 입력하세요.
5. `twitter consumer secret` 설정에 아무 값이나 입력하세요.

그러면 정상적으로 작동할 것입니다.

---

<div class="post-metadata">

### Author: ![Shaneod](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@Shaneod](https://meta.discourse.org/u/Shaneod)
#### Post date: [7월 25, 2023, 3:13오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/44 "2023-07-25T15:13:15Z")

</div>

아, 알겠습니다. 스티븐, 감사합니다. 네이티브 트위터 임베드 문제를 해결하는 방법이 있을까요? 현재 제 사이트에서는 약 일주일 동안 링크만 표시되고 있습니다. 아니면 이 컴포넌트가 트위터 임베드를 위한 유일한 해결책인가요?

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [7월 25, 2023, 5:38오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/45 "2023-07-25T17:38:16Z")

</div>

한 단계를 빠뜨렸네요. `twitter.com`을 차단된 onebox 도메인에 추가하는 것(나머지 도메인용)입니다. 🤦‍♂️ 이전 게시글을 수정했습니다.

DM으로 포럼 링크를 공유해 주시겠어요? (트위터 링크가 포함된 토픽) 테마 구성 요소를 활성화했는지 확인하고 싶어요(일부 사용자는 테마에 추가하는 것을 잊는 경우가 있거든요). 아니면 소스 메시지를 확인해 주세요(트위터 링크는 단독 줄에 있어야 합니다).

---

<div class="post-metadata">

### Author: ![Solarus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/solarus/32/232588_2.png) [@Solarus](https://meta.discourse.org/u/Solarus)
#### Post date: [7월 25, 2023, 9:36오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/46 "2023-07-25T21:36:14Z")

</div>

@Steven님이 제공한 지침이 최신 버전(3.1.0.beta6)을 실행 중인 내 인스턴스에서 작동하는 것을 확인했습니다.

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [8월 1, 2023, 9:52오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/47 "2023-08-01T21:52:02Z")

</div>

@Solarus 이미지 첨부된 트위터 게시물에도 이 방법으로 작동하나요?

예: `https://twitter.com/droneswmp/status/1686451431006453760`

> <https://twitter.com/droneswmp/status/1686451431006453760>

---

<div class="post-metadata">

### Author: ![Hifihedgehog](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hifihedgehog/32/140207_2.png) [@Hifihedgehog](https://meta.discourse.org/u/Hifihedgehog)
#### Post date: [8월 2, 2023, 2:46오전 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/48 "2023-08-02T02:46:03Z")

</div>

저에게도 이 방법이 잘 작동했습니다. 다만, 마지막 단계로 클라이언트 측에서 Discourse 인스턴스를 업그레이드하여 인스턴스를 소프트 리빌드해야 했습니다. 그게 바로 속담에 나오는 ‘점화’ 역할을 해준 것 같습니다.

---

<div class="post-metadata">

### Author: ![Solarus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/solarus/32/232588_2.png) [@Solarus](https://meta.discourse.org/u/Solarus)
#### Post date: [8월 2, 2023, 3:36오전 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/49 "2023-08-02T03:36:42Z")

</div>

> [@Richie](#):
>
> …

비디오가 포함된 트윗으로 테스트해 보았습니다. 제 인스턴스에서 해당 트윗을 확인하고 결과를 보고할 수 있습니다.

@Richie 예시 트윗으로 시도해 보았으며, 트윗+이미지가 정상적으로 렌더링되고 문제가 없습니다. (제 언어 설정은 스페인어입니다)

 ![Screenshot 2023-08-02 at 00-42-29 Test de onebox de Twitter - General - Discourse](https://global.discourse-cdn.com/meta/original/4X/7/b/f/7bf4655e3f31e0b16bc74cecab83b0470fb50630.png)

---

<div class="post-metadata">

### Author: ![Jongin](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@Jongin](https://meta.discourse.org/u/Jongin)
#### Post date: [8월 11, 2023, 5:18오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/50 "2023-08-11T17:18:54Z")

</div>

링크 "[http://x.com](http://x.com)"와 함께 임베드를 작동시킬 계획이 있나요?

---

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [8월 12, 2023, 9:21오전 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/51 "2023-08-12T09:21:49Z")

</div>

알려주셔서 감사합니다. 바로 수정하겠습니다.

---

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [8월 12, 2023, 9:50오전 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/52 "2023-08-12T09:50:52Z")

</div>

이제 [x.com](http://x.com) 링크를 지원합니다.  
참고로, Twitter 자체도 [x.com](http://x.com) 도메인 이름을 완전히 활성화하지 않은 것으로 보입니다. 향후 기본 공유 링크가 x.com으로 변경될 경우, 링크 형식과 로딩에 사용되는 JavaScript에 어떤 변경 사항이 생길지는 알 수 없습니다.

---

<div class="post-metadata">

### Author: ![Crius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/crius/32/317214_2.png) [@Crius](https://meta.discourse.org/u/Crius)
#### Post date: [9월 29, 2023, 6:51오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/53 "2023-09-29T18:51:54Z")

</div>

첫 번째 게시물에 올바른 지침이 포함된 상태로 수정될 수 있을까요?

이 스레드를 따라가고 있는데, 누군가는 onebox의 차단 도메인에 twitter.com을 추가하라고 제안하고, 또 다른 사람은 그럴 필요가 없다고 합니다. 그다음에는 누군가는 Twitter API 키를 제거하라고 하고, 또 다른 사람은 그 필드에 아무거나 추가하라고 하는 상황입니다…

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [9월 29, 2023, 7:28오후 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/54 "2023-09-29T19:28:40Z")

</div>

우리 쪽은 꽤 전에 작동이 멈춰서 결국 포기했어요.

일론 머스크가 또 무슨 장난을 치는 건가 싶어서, 상황이 좀 가라앉을 때까지 기다리기로 했죠 😊

---

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [9월 30, 2023, 1:09오전 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/55 "2023-09-30T01:09:43Z")

</div>

팁 알려줘서 고마워, 방금 설명서를 업데이트했어.

---

<div class="post-metadata">

### Author: ![Crius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/crius/32/317214_2.png) [@Crius](https://meta.discourse.org/u/Crius)
#### Post date: [10월 15, 2023, 9:55오전 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/56 "2023-10-15T09:55:20Z")

</div>

저희 포럼에서 트윗을 `[quote]` 블록으로 감싸면 리치 임베드가 정상적으로 작동하지만, 그렇지 않으면 텍스트만 표시된다는 사실을 확인했습니다. 테마와 관련된 문제일 수도 있지만, 다른 분들도 비슷한 현상을 겪을 수 있으므로 여기 남겨둡니다.

---

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [10월 15, 2023, 10:50오전 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/57 "2023-10-15T10:50:15Z")

</div>

링크 요소에 onebox 클래스가 있는지 확인해 보셨나요?  
테마 컴포넌트가 작동하려면 “onebox” 클래스 속성이 필요합니다.

`blocked onebox domains`에 twitter.com과 x.com을 추가해 보셨나요?

```plaintext
<a href="https://x.com/username/status/..." class="onebox">

```

---

<div class="post-metadata">

### Author: ![Crius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/crius/32/317214_2.png) [@Crius](https://meta.discourse.org/u/Crius)
#### Post date: [10월 23, 2023, 9:23오전 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/58 "2023-10-23T09:23:10Z")

</div>

twitter와 x를 모두 차단된 onebox 도메인에 추가했습니다(처음에는 X를 잊고 있었습니다) 하지만 이상한 동작은 계속되고 있습니다.

`onebox` CSS 클래스에 대해서는, 예를 들어 이 트윗의 경우 어디에서 확인해야 하는지 모르겠습니다:

`https://twitter.com/SpoutLore/status/1715688928806944943`

제출 후 제가 볼 수 있는 것은 오직 생성된 게시글(baked post)뿐입니다:

```plaintext
<aside class="onebox twitterstatus" data-onebox-src="https://twitter.com/SpoutLore/status/1715688928806944943">
  <header class="source"><svg class="fa d-icon d-icon-fab-twitter svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#fab-twitter"></use></svg>

      <a href="https://twitter.com/SpoutLore/status/1715688928806944943" target="_blank" rel="noopener">twitter.com</a>
  </header>

  <article class="onebox-body">
    
<h4><a href="https://twitter.com/SpoutLore/status/1715688928806944943" target="_blank" rel="noopener">Spout Lore <span class="badge badge-notification clicks" title="1 click">1</span></a></h4>
<div class="twitter-screen-name"><a href="https://twitter.com/SpoutLore/status/1715688928806944943" target="_blank" rel="noopener">@SpoutLore</a></div>

<div class="tweet">
  <span class="tweet-description">🚨NEW EPISODE!!🚨

In this ep the gang takes a page out of Christopher Nolan's book and tries to incept the shit out of themselves to see if they can figure literally ANYTHING out.

Also, most of this episode happens at a $7.99 pizza hut lunch buffet.

https://t.co/gDtdYQOYao</span>
</div>

<div class="date">
  <a href="https://twitter.com/SpoutLore/status/1715688928806944943" class="timestamp" target="_blank" rel="noopener"></a>

</div>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

```

또는 인용 블록(quote block)에 있는 경우, 다음과 같습니다:

```plaintext
<div class="twitter-tweet twitter-tweet-rendered" style="display: flex; max-width: 550px; width: 100%; margin-top: 10px; margin-bottom: 10px;"><iframe id="twitter-widget-13" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="" style="position: static; visibility: visible; width: 550px; height: 786px; display: block; flex-grow: 1;" title="Twitter Tweet" src="https://platform.twitter.com/embed/Tweet.html?dnt=false&amp;embedId=twitter-widget-13&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=false&amp;id=1715688928806944943&amp;lang=en&amp;origin=https%3A%2F%2Fnetgamers.it%2Ft%2Fusa-fascismo-e-polizia-part-2%2F836096%2F200&amp;sessionId=29bf06409a54fcadc10eb870158a5a32ae1772c3&amp;theme=light&amp;widgetsVersion=01917f4d1d4cb%3A1696883169554&amp;width=550px" data-tweet-id="1715688928806944943"></iframe></div>

```

여기서 시도해 보면, 단순한 직접 링크의 경우에도 동일한 동작을 보이며, 미디어 부분은 생략됩니다(최소 이 답변 옆에서 볼 수 있는 미리보기에서는 그렇습니다)

> <https://twitter.com/SpoutLore/status/1715688928806944943>

여기의 인용은 전체 iframe으로 변환되지 않습니다. 아마도 그들은 다른 방식을 사용하거나 이 컴포넌트를 사용하지 않는 것 같습니다.

> [X on X / X](https://twitter.com/SpoutLore/status/1715688928806944943)

---

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [10월 24, 2023, 3:20오전 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/59 "2023-10-24T03:20:07Z")

</div>

> [@Crius](#):
>
> 이 인용문이 전체 iframe으로 변환되지 않는 것 같습니다. 다른 방식으로 처리했거나 이 컴포넌트를 사용하지 않는 것 같습니다.

네, 실제로 Twitter의 iframe을 사용하는 것은 최후의 수단입니다. iframe을 사용하는 것에는 많은 단점이 있습니다. Discourse 메타 포럼은 이 테마 컴포넌트를 사용하지 않으며, 앞으로도 사용하지 않을 것이라고 생각합니다.

> [@Crius](#):
>
> 제출 후 보이는 것은 구워진(정적) 게시글뿐입니다:

이것은 당신의 포럼에서 일어나는 일인가요? Discourse 자체의 리치 임베드(Rich Embed) 기능이 영향을 미친 것으로 보입니다. 저는 API 접근 권한이 없어 리치 임베드를 사용할 수 없는 사람들을 위해 이 테마 컴포넌트를 작성했습니다.

이미 리치 임베드를 사용할 수 있는 포럼들이 이 테마 컴포넌트를 사용할 것이라고는 생각하지 못했습니다.

---

<div class="post-metadata">

### Author: ![Crius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/crius/32/317214_2.png) [@Crius](https://meta.discourse.org/u/Crius)
#### Post date: [10월 24, 2023, 8:54오전 UTC](https://meta.discourse.org/t/twitter-native-embed/261792/60 "2023-10-24T08:54:38Z")

</div>

제가 관리하는 포럼입니다(소유자는 저 아닙니다). 얼마 전부터 원박스가 제대로 작동하지 않아서 테스트를 해보고 있습니다.

[이전 페이지](https://meta.discourse.org/t/twitter-native-embed/261792.md?page=2)

[다음 페이지](https://meta.discourse.org/t/twitter-native-embed/261792.md?page=4)
