Onebox Twitter embedding

Oh, thanks! Is it possible to do that without actually allowing Twitter logins?

Disable enable twitter logins and just provide twitter consumer key & twitter consumer secret.

3개의 좋아요

Tried it. It didn’t work. Embedded tweets still do not contain images.

Some long tweets with images don’t work

Shorter tweets with images works

It exists since the new twitter policy regarding links and images in the 140 characters count

6개의 좋아요

I’ve just submitted a PR which should fix this:

https://github.com/discourse/discourse/pull/4766

10개의 좋아요

@david - thank you! We do a lot of Twitter oneboxing and found the truncation very annoying.

4개의 좋아요

This is terrific - my forum users really need this.

Is this merged into a future release or something we have to do to modify in our existing installations?

Just upgrade on latest version, it should be good :

  • via yourforum.com/admin/upgrade
  • or SSH into your server and do these commands :

cd /var/discourse
git pull
./launcher rebuild app

I don’t think you need to add the twitter consumer key and twitter consumer secret in your admin settings but I’m only 99% sure

2개의 좋아요

Yep - it’s all merged into master and working great on my forum

I’m afraid you will need to add these keys to your site settings - the data is fetched via the twitter API rather than opengraph/oembed.

2개의 좋아요

It’s always the 1% left

1개의 좋아요

I just pushed a small improvement for Twitter onebox. The onebox will now show like and retweet count.

11개의 좋아요

Twitter onebox with videos are really long on mobile. Here’s one I am adding to this post.

https://twitter.com/FUNimation/status/1151627642522755072

How it appears on mobile:

5개의 좋아요

@awesomerobot is there a simple CSS fix for :arrow_double_up:

4개의 좋아요

현재 모바일에서는 max-height(70vh)와 100% 폭을 설정하여 비디오가 화면에 맞게 확장되도록 하고 있습니다. 이 방식은 세로 방향 비디오보다 가로 방향 비디오에 더 잘 적용됩니다.

대부분의 비디오가 가로 방향일 것이라고 가정할 수 있지만, 그렇게 하면 세로 방향 비디오가 상당히 많이 잘리는 것이 트레이드오프가 됩니다.

비디오의 종횡비(aspect ratio)를 알지 못하면 두 가지 문제를 모두 간단히 해결할 수 없습니다. 이 비디오들의 종횡비를 계산할 수 있으며, 이를 기반으로 스타일을 추가할 수 있을까요? iframe에는 높이/폭 속성이 포함된 것 같습니다.

4개의 좋아요

네, 가능합니다. 이 부분이 iframe을 생성하는 라인입니다.

@awesomerobot 님께 가장 유용한 HTML 구조는 어떤 것일까요? 다음과 같은 형태인가요?

<div class='tweet-images'>
  <div class='aspect-image-full-size' style='--aspect-ratio:#{width}/#{height};'/>
    <iframe class='tweet-video' src='https://twitter.com/i/videos/blah' width='123' height='456' frameborder='0' allowfullscreen></iframe>
  </div>
</div>

그리고 이미지에서 사용하는 aspect-image-full-size 로직을 재사용할 수 있을까요?

1개의 좋아요

네, 그렇게 하면 될 것 같아요. 거기에 있는 종횡비 덕분에 필요에 따라 조절할 수 있을 거예요.

2개의 좋아요

Zapier에서 가져온 트윗을 특정 주제에 표시할 때 이렇게 보이도록 만드는 방법을 알아보고 있습니다. 그런데 좀 막혀 있네요. 방향을 잡아줄 수 있는 분 계신가요? 설정에서 "onebox"만 활성화하면 작동할까요?

3개의 좋아요

임베드된 트윗에 답글을 보낸 원본 트윗도 함께 표시되도록 하는 방법이 있을까요? 예를 들어, 이 트윗 Alexandria Ocasio-Cortez on X: "@alexriviello Yeah! Thanks, I tend to cycle between the two. I like the 2 g’s more too :)" / X 을 phpBB나 vBulletin에 임베드하면 해당 트윗과 함께 답글의 대상이 된 원본 트윗도 함께 표시됩니다.

phpBB:

vBulletin:

하지만 Discourse에서는 답글만 표시되어, 원본 트윗의 맥락이 없으면 이해하기 어려운 경우가 많습니다.

물론 원본 트윗과 답글을 모두 게시하는 것은 쉬운 일이지만, 대부분의 사용자(그리고 우리가 사용하는 몇몇 트위터 봇)는 이 작업을 수행해야 한다는 것을 알아채기에는 충분히 세심하거나 성실하지 않습니다.

7개의 좋아요

이것은 매우 매우 까다로운 문제입니다. “공식” 트위터 임베드 코드는 두 가지 문제가 있습니다.

  1. 높이를 제공하지 않아, 로딩되면서 게시물이 위아래로 튀어 오릅니다.
  2. 모든 사이트에서 트위터 JavaScript 파일을 실행해야 합니다.

이 문제를 우회하기 위해 자체 커스텀 렌더러를 사용했지만, 불행히도 공식 임베드 코드를 계속 따라가야만 하는 상황이 됩니다.

6개의 좋아요