Twitter Native Embed

It came back and mine has gone again

Apologies but can you list the fix in full as if explaining to a child? :sweat_smile:

  1. Install the theme component
  2. Add https://platform.twitter.com/ in the content security policy script src setting
  3. Add twitter.com to the blocked onebox domains
  4. Add anything in the twitter consumer key setting
  5. Add anything in the twitter consumer secret setting

And it should work

6 Likes

Oh, i see, thanks Steven, Does anyone have any idea how to fix the native Twitter embeds, they’re just showing as links on my site currently, for about a week, or is this component the only fix for twitter embeds?

I forgot one step, adding twitter.com to the blocked onebox domain (for the others) :man_facepalming: I’ve edited the previous post.

Can you share a link to your forum by dm (a topic with a twitter link)? I want to make sure you activated the theme component (some people can forget to add it to their themes), or check the source message (the twitter link needs to be in a line on its own)

2 Likes

Can confirm the instructions provided by @Steven work on my instance running latest (3.1.0.beta6)

1 Like

@Solarus did this also work for twitter posts with images attached?

Eg: https://twitter.com/droneswmp/status/1686451431006453760

This also worked for me. However, as a final step, I had to soft rebuild my instance by upgrading my Discourse instance client side. That seemed to do the proverbial jump start.

I tested with a video embedded twit, i can check this particular twit on my instance and report back.

@Richie i tried with your example twit and the twit+image renders ok, no issues (my lang is spanish)

are there any plans to work the embed with the link “http://x.com”?

2 Likes

Thank you for your reminder. I’ll fix it right away

3 Likes

It now supports x.com as a link.
It should be noted that it seems that Twitter itself has not fully enabled the x.com domain name. I don’t know what changes will be made to the format of the link and the javascript used for loading if the default sharing link changes to x.com in the future.

6 Likes

Can the first post be edited with the proper instructions?

I am trying to follow the thread but there is someone suggesting to add twitter.com to the blocked domains for onebox, then another saying it’s not needed. Then another saying to remove the twitter api keys and another one saying to add anything to that field…

Ours stopped working some time ago so we kinda gave up on it.

We assumed Elon was up to some shenanigans or other, so we thought we’d wait for the dust to settle :blush:

Thanks for the tip, I just updated the instruction.

3 Likes

On our forum we noted that encasing the tweet in a [quote] block makes the rich embed works, otherwise only the text is visualized. It might be a problem with our theme somehow, but I’ve thought to leave this here anyway in case someone else encounter a similar behaviour.

Could you try checking the the link element to see if it has a onebox class?
If you want the theme component to work, it depends on having a “onebox” class attribute.

Have you tried adding twitter.com and x.com to blocked onebox domains?

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

I added both twitter and x to the blocked onebox domains (forgot X initially) but the strange behaviour persist.

About the onebox css class, I don’t know where I should see that because for example with this tweet:

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

All I see is the baked post after submitting:

<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>

Or, if it’s in a quote block, this:

<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>

Trying this here shows the same behaviour for the simple direct link, the media part is left out (at least in the preview I can see beside this reply)

The quote here doesn’t transform to the full iframe, I guess they did something different or are not using this component.

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

Yes, in fact using Twitter’s iframe is a very last resort. There are many disadvantages to using iframes. Discourse meta doesn’t use this theme component, and I don’t think they will.

Is this on your forum? It appears that Discourse’s own rich embed has played a role. I wrote this theme component for those who can’t access rich embedding because they lack access to the API.

I didn’t consider that forums that already can use rich embeds would use this theme component.

1 Like

It’s a forum I administer (not owned by me). I am testing this because the oneboxes are not working properly for some time now.