Twitter 네이티브 임베드

컴포저 미리보기에서 임베딩을 활성화하지 않는 것이 정상적인 동작입니다.

:information_source: 요약 Discourse가 네이티브 Twitter 임베딩을 지원하도록 활성화
:hammer_and_wrench: 저장소 GitHub - Lhcfl/discourse-twitter-native-embed · GitHub
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: Discourse 테마 초보? Discourse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

최근 Twitter API 제한으로 인해 일부 Discourse 포럼 원박스(onebox)가 표시되지 않는 문제가 발생했습니다. 이 테마 컴포넌트는 Twitter의 API가 필요 없이 Discourse가 네이티브 Twitter 임베딩을 지원하도록 합니다.

이 테마 컴포넌트는 platform.twitter.com에서 Twitter JavaScript를 요청하므로, Twitter가 원한다면 이 JavaScript를 통해 사용자를 추적하여 프라이버시 문제를 일으킬 수 있습니다. 점점 더 무모해지고 있는 이 소셜 플랫폼을 신뢰할지 여부에 대해 신중하게 판단해야 합니다.

이 컴포넌트를 사용하려면 사이트 설정에서 콘텐츠 보안 정책(CSP) 허용 범위에 Twitter 링크를 추가하고 twitter.com 및 x.com을 차단된 원박스 도메인에 추가해야 합니다.

https://platform.twitter.com/

37개의 좋아요

이 작업을 수행한 후 재빌드가 필요한가요? 설치하고 콘텐츠 보안에 추가했지만 여전히 임베드가 없고 링크만 표시됩니다.

1개의 좋아요

물론 아닙니다. 제발 사이트 링크를 보내주세요. 왜 그런지 확인해 보겠습니다. 제 포럼에서는 이 컴포넌트가 정상적으로 작동하고 있으니까요.

6개의 좋아요

감사합니다. 해결했습니다. 설정에서 Twitter 소비자 키와 시크릿을 제거한 후 이제 의도대로 작동하는 것 같습니다. 아마도 제가 그 키들을 제거하지 않아서 API를 사용하여 임베드하려고 시도하는 기본값으로 설정되어 있었던 것 같습니다. 이 작업을 해주셔서 다시 한번 감사드립니다. Instagram에서도 이런 기능이 가능하면 좋겠습니다.

6개의 좋아요

잘하셨습니다. 이 테마 컴포넌트를 공유해 주셔서 감사합니다. 정말 적시에 나온 훌륭한 작업이네요. :slightly_smiling_face:

4개의 좋아요

와, 감사합니다!

제 환경에서는 광고된 대로 잘 작동하고 있습니다. 다만, 미리보기에서는 트윗 URL이 하이퍼링크로만 표시되고, 실제 임베드는 답글이나 게시물을 제출할 때 이루어진다는 점이 명확하지 않을 수 있습니다.

2개의 좋아요

저희 쪽은 그 반대 순서로 작동하고 있습니다… 미리보기에서는 임베드가 표시되지만, 게시할 때는 표시되지 않습니다.

1개의 좋아요

좋은 작업이었고 좋은 아이디어네요.

임베드에서 data-theme 다크 모드를 사용하도록 작은 포크를 만들었습니다. 잘 작동하지만, 저는 코딩 전문가가 아닙니다.

기본 테마 또는 다크 테마를 사용할 수 있는 옵션을 추가할 수 있다면 더 좋을 것 같습니다!

9개의 좋아요

위에서 권장한 모든 수정 사항을 완료했습니다. 현재 문제는 모바일 기기로 게시물을 올릴 때에만 발생하며, 노트북이나 데스크톱으로 트윗을 임베드하는 것은 이제 정상적으로 작동합니다.

2개의 좋아요

일부 사용자는 임베드를 원하지만 “로그인” 기능이 필요하지 않으며, 따라서 이 컴포넌트는 매우 인기 있을 것입니다. 실제로 다른 플랫폼에 대한 요청도 보고 있습니다.

개인적으로는 Onebox보다 더 자연스러운 외관의 트위터 임베드 스타일을 선호합니다. 인기 있는 플랫폼의 임베드가 네이티브 외관을 그대로 유지한다면, 이는 주제 흐름 속에서 그들을 잘 차별화해 줄 것입니다. 정말 훌륭한 작업입니다. 개발 계정 설정의 모든 복잡성을 피할 수 있었더라면 좋았을 텐데, 왜 전에 이런 기능이 없었는지 모르겠습니다. 하지만 그렇다는 것입니다. 필요에 의해 용감한 개발자들이 이 도전에 나서게 된 것이죠.

¡Mucho mucho gracias!

1개의 좋아요

트위터가 무너진다는 주제에 대해 살펴본 후, 임베드가 콘텐츠로서 얼마나 취약한지에 대해 다시 한번 생각하게 되었습니다. 그리고 이전에 제가 가졌던 오래된 아이디어가 다시 떠올랐습니다.

임베드 기능이 임베드 미리보기의 백업 비트맵을 생성할 수 있다면, Photobucket과 같은 결과나 유사한 문제를 방지할 수 있을 것입니다.

이를 어떻게 코드로 구현할 수 있을지는 모르겠지만, 원리적으로는 이미 게시된 이미지 링크의 이미지를 가져와 네이티브 데이터베이스에 저장하는 기능과 매우 유사하게 작동할 것이라고 생각합니다. 물론 이미 어딘가의 서버에 존재하는 파일이므로 그 과정은 더 쉽겠지만, 이는 임베드가 Discourse 게시물에 커밋될 때 실행되는 일종의 즉석 스크린 캡처 기능과 같은 역할을 할 것입니다.

웹이 노화되면서 사이트가 일정 수준의 콘텐츠를 아카이브로 보존하는 것은 도움이 됩니다. 콘텐츠는 때때로 사라지곤 하니까요.

이와 관련된 또 다른 기능 제안도 여기에서 하려고 합니다.

1개의 좋아요

감사합니다.

1개의 좋아요

이것은 중요하며 방금 발견한 내용입니다. 2와 2를 합치면 알 수 있듯이, 이전에 CSP가 활성화되어 있지 않던 상태에서 Google AdSense를 사용 중이라면, Twitter 컴포넌트를 작동시키기 위해 암호화(DM)를 사용하는 경우 CSP를 활성화하면 잠재적인 충돌로 인해 광고가 사라질 수 있습니다!

더 나은 해결책이나 "잘못 하셨어요"라는 답변으로 제가 틀렸다는 것을 증명해 주셨으면 합니다.

2개의 좋아요

API를 통한 원박싱(oneboxing)이 이제 유료 Twitter 구독을 요구한다고 가정할 때, 이 방법은 Discourse 코어에 추가될 수 있거나 추가되어야 합니다. 대기업 커뮤니티는 일론 머스크의 수수료를 감당할 수 있지만, 비영리 단체와 소규모 커뮤니티에게는 부담이 큽니다.

이 아이디어에 대해 @team의 지지를 받을 수 있을까요?

Twitter의 쇠퇴는 다루기 어려운 문제입니다. 여전히 대부분의 뉴스와 사건에 있어 1위의 정보원이며, 언론사, 기업, 주요 인물들이 사용하고 있습니다. 일론 머스크의 요구에도 불구하고, 이 플랫폼에 대한 신뢰할 만한 경쟁자나 대안은 아직 없습니다.

2개의 좋아요

불행히도 이 컴포넌트가 제 Discourse 인스턴스에서 작동하지 않습니다. Twitter 로그인 키를 제거했는데도 여전히 아무 반응이 없습니다. 또한 CSP도 활성화했습니다.

2개의 좋아요

ljpp님, 안녕하세요.

풍부한 임베드(rich embeds)가 사라지는 것은 분명히 원치 않는 일이며, 이에 대해 제대로 처리할 수 있는 방법을 논의하고 있습니다. :slight_smile:

컴포저에 Twitter 링크를 붙여넣었을 때, 브라우저 개발 도구의 네트워크 탭에서 어떤 결과가 반환되나요?
JavaScript 콘솔에 오류가 있나요?

3개의 좋아요

고려하고 있지만, 여기서 직면해야 할 매우 큰 두 가지 문제가 있습니다:

  1. IFRAME을 사용하면 Twitter가 사용자를 추적할 수 있게 됩니다. 개인정보 보호에 대한 우려가 있습니다.
  2. IFRAME을 사용하면 ‘미확인’ 높이에 대한 문제를 해결해야 합니다. 높이를 미리 알 수 없고 Twitter와의 통신 후에만 높이를 알 수 있다면, 페이지가 계속 튀어 오르는 현상이 발생하여 Discourse 사용 경험에 큰 영향을 미칠 수 있습니다. 높이를 미리 파악하는 것은 매우 어렵습니다.
6개의 좋아요

전적으로 동의합니다. 이 테마 컴포넌트 우회 방법은 트위터 서버에서 JavaScript를 로드하며, 트위터의 전반적인 상황을 고려할 때 이는 막대한 프라이버시 위험을 수반합니다. 따라서 적어도 지금은 이 테마 컴포넌트를 적용하는 것을 꺼리고 있습니다.

정말 까다로운 상황이네요.

5개의 좋아요

정확히 무엇을 봐야 할지 잘 모르겠지만, 링크를 작성기에 붙여넣은 후의 결과는 다음과 같습니다:


미리보기에서는 이 메시지가 표시됩니다:


해당 트윗입니다:

2개의 좋아요

업데이트:

이제 임베드가 정상 작동하지만, 컴포저 미리보기에는 여전히 "죄송합니다. 생성할 수 없습니다…"라는 메시지가 표시됩니다. 게시하면 모든 것이 정상으로 보입니다.

2개의 좋아요