# Twitter Native Embed

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

<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: [April 15, 2023, 12:35pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/1 "2023-04-15T12:35:49Z")

</div>

> We don’t enable embedding in composer preview, which is the expected behavior.

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Enable Discourse to support native Twitter embeds |
| 🛠 | **Repository** | [GitHub - Lhcfl/discourse-twitter-native-embed · GitHub](https://github.com/Lhcfl/discourse-twitter-native-embed) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/6/6/0661fda9a9db92779e6ceb7ea5c5d20621048aca.jpeg)

A recent Twitter API limitation has prevented some discourse forum oneboxes from being displayed. This theme component enables Discourse to support native Twitter embeds without requiring any of Twitter’s APIs.

The theme component requests a twitter javascript from [platform.twitter.com](http://platform.twitter.com), so if twitter wanted to, it could track you in this javascript and cause privacy issues. You need to weigh whether to trust this social platform that is getting more and more ridiculous now.

**To use this component, you must add the Twitter link to the content security policy permission range in the site settings and add `twitter.com` & `x.com` to blocked onebox domains**

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/d/0/1d07983fbb2e653528176d9a64ae53f7f75e5883.png)

```plaintext
https://platform.twitter.com/

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/6/e/f6e7e8f3402a4f7722b372f5495f3509743bc2af.png)

---

<div class="post-metadata">

### Author: ![JasonH](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jasonh/32/287309_2.png) [@JasonH](https://meta.discourse.org/u/JasonH)
#### Post date: [April 15, 2023, 2:13pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/2 "2023-04-15T14:13:33Z")

</div>

Do you have to rebuild after doing this? I have installed and added it to the content security but there are still no embeds, just the link

---

<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: [April 15, 2023, 2:15pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/3 "2023-04-15T14:15:36Z")

</div>

Of course not. Please send me a link to your site and I’ll take a look at why, this component works fine on my forum.

---

<div class="post-metadata">

### Author: ![JasonH](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jasonh/32/287309_2.png) [@JasonH](https://meta.discourse.org/u/JasonH)
#### Post date: [April 15, 2023, 2:24pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/4 "2023-04-15T14:24:05Z")

</div>

Thanks, I figured it out. After removing the Twitter consumer key and secret from settings it now works as intended, I think it was defaulting to trying to embed using the API because I hadn’t removed those. Thanks again for doing this, would be great if something like this was possible for Instagram as well

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [April 15, 2023, 3:24pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/5 "2023-04-15T15:24:19Z")

</div>

well done. thanks for this theme component. great timely work. 🙂

---

<div class="post-metadata">

### Author: ![cogdog](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cogdog/32/116536_2.png) [@cogdog](https://meta.discourse.org/u/cogdog)
#### Post date: [April 16, 2023, 3:45am UTC](https://meta.discourse.org/t/twitter-native-embed/261792/6 "2023-04-16T03:45:48Z")

</div>

Wow thanks for this!

It’s working as advertised for me, but maybe not as clear is that in preview one just sees the tweet URL as a hyperlink, the embed happens when the reply or post is submitted.

---

<div class="post-metadata">

### Author: ![jazznutUVA](https://avatars.discourse-cdn.com/v4/letter/j/7ba0ec/32.png) [@jazznutUVA](https://meta.discourse.org/u/jazznutUVA)
#### Post date: [April 18, 2023, 4:12pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/7 "2023-04-18T16:12:24Z")

</div>

> [@cogdog](#):
>
> It’s working as advertised for me, but maybe not as clear is that in preview one just sees the tweet URL as a hyperlink, the embed happens when the reply or post is submitted.

Ours is happening in the opposite order… the preview shows the embed and then it is not showing it when posted.

---

<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: [April 18, 2023, 5:27pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/8 "2023-04-18T17:27:36Z")

</div>

Nice work and good idea.

I worked on a [little fork](https://github.com/MonDiscourse/discourse-twitter-native-embed/blob/main/javascripts/discourse/initializers/discourse-twitter-native-embed.js) to use the data-theme dark mode for embed. It works fine, but I’m not an expert coder.

If you manage to add an option to use default theme or dark theme, I think it will be even better!

---

<div class="post-metadata">

### Author: ![jazznutUVA](https://avatars.discourse-cdn.com/v4/letter/j/7ba0ec/32.png) [@jazznutUVA](https://meta.discourse.org/u/jazznutUVA)
#### Post date: [April 18, 2023, 8:23pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/9 "2023-04-18T20:23:29Z")

</div>

We’ve done all the modifications recommended above. Our issue now is only if trying to post using a mobile device… embedding a Tweet using a laptop/desktop works fine now.

---

<div class="post-metadata">

### Author: ![agemo](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@agemo](https://meta.discourse.org/u/agemo)
#### Post date: [May 20, 2023, 10:36am UTC](https://meta.discourse.org/t/twitter-native-embed/261792/10 "2023-05-20T10:36:03Z")

</div>

Some folks want embeds and no need for “login” functionality, and so this component is going to be very popular and yes I see request for other platforms too.

Personally I like the more natural looking twitter embed style than the Onebox, if the more popular platform embeds carry over the native look it differentiates them well in the flow of a topic. Truly great work and can’t help thinking why we didn’t have this before to avoid all the complexities of the dev account setup, but there you go, needs must and the valiant and brave rise to the challenge.

¡Mucho mucho gracias!

---

<div class="post-metadata">

### Author: ![agemo](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@agemo](https://meta.discourse.org/u/agemo)
#### Post date: [May 20, 2023, 11:27am UTC](https://meta.discourse.org/t/twitter-native-embed/261792/11 "2023-05-20T11:27:06Z")

</div>

On another point of the fragility of embeds as content after looking at the twitter imploding topic. made me think again of an old idea I had.

**If embeds were able to generate a backup bitmap of the embed preview as part of the embed function, that would guard against photobucket outcomes and similar.**

I have no idea how that could be coded up but I imagine it would work in principle much like the function that grabs the image of posted image link and is stored int eh native database, while I assume that is easier since it’s an already existing file out there on a server somewhere, it would act as I suppose the same as a custom screen grab function on the fly, that occurs when an embed is committed to a discourse post.

Sites archiving a level of their content is helpful as the net ages, stuff does disappear form time to time.

I’m going to suggest another feature along these lines too [here](https://meta.discourse.org/t/auto-archive-content/265632)

---

<div class="post-metadata">

### Author: ![REALITY](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/reality/32/199798_2.png) [@REALITY](https://meta.discourse.org/u/REALITY)
#### Post date: [May 22, 2023, 1:50pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/12 "2023-05-22T13:50:31Z")

</div>

Thank you.

---

<div class="post-metadata">

### Author: ![agemo](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@agemo](https://meta.discourse.org/u/agemo)
#### Post date: [May 26, 2023, 6:07pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/13 "2023-05-26T18:07:56Z")

</div>

This is important and just discovered, by putting 2 and 2 together - if you had not CSP enabled before and you use say Google Adsense, you will nuke you ads turning on CSP if using encryption (DM’s) to get the twitter component to work as there is a potential conflict!

I would like to be proven wrong with a super solution or _“you did it wrong”_

> [@Blank/Empty ads on Discourse Adsense Adplugin](https://meta.discourse.org/t/blank-empty-ads-on-discourse-adsense-adplugin/253100/12):
>
> Ah ha… that’s why adsense ads disappeared, it was the recently enabled CSP to allow the twitter component work! Trying the above ‘unsafe-inline’ can not be used when encryption is enabled for DM’s, now here we have a of web of unintended consequences if I ever saw one… thinking

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [June 5, 2023, 8:04am UTC](https://meta.discourse.org/t/twitter-native-embed/261792/14 "2023-06-05T08:04:47Z")

</div>

Presuming that oneboxing via API now requires a paid Twitter subscription, this method could/should be added to the Discourse core? Big enterprise communities can afford Elon’s fees, but it is out of reach for non-profits and small time communities.

Does this idea get support from [@team](https://meta.discourse.org/groups/team)?

Twitter’s erosion is a challenging case to handle. It is still the no.1 source for most news and events, used by media houses, corporations and persons of interest. Despite Elon’s shakedown, there is no credible challenger or alternative for the platform.

---

<div class="post-metadata">

### Author: ![robotnjik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robotnjik/32/120095_2.png) [@robotnjik](https://meta.discourse.org/u/robotnjik)
#### Post date: [June 5, 2023, 9:08am UTC](https://meta.discourse.org/t/twitter-native-embed/261792/15 "2023-06-05T09:08:16Z")

</div>

Unfortunately, this component is not working on my Discourse instance. We removed Twitter login keys, yet still nothing. Also enabled CSP.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [June 5, 2023, 2:36pm UTC](https://meta.discourse.org/t/twitter-native-embed/261792/16 "2023-06-05T14:36:21Z")

</div>

Hi ljpp,

Losing rich embeds is certainly not wanted, and we’re discussing it to see what can be done properly about this. 🙂

> [@robotnjik](#):
>
> Unfortunately, this component is not working on my Discourse instance. We removed Twitter login keys, yet still nothing. Also enabled CSP.

When you paste a twitter link in the composer, what does the network tab of your browser dev tools returns?  
Are there errors in the javascript console?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 6, 2023, 8:06am UTC](https://meta.discourse.org/t/twitter-native-embed/261792/17 "2023-06-06T08:06:50Z")

</div>

> [@ljpp](#):
>
> Presuming that oneboxing via API now requires a paid Twitter subscription, this method could/should be added to the Discourse core? Big enterprise communities can afford Elon’s fees, but it is out of reach for non-profits and small time communities.
> 
> Does this idea get support from [@team](https://meta.discourse.org/groups/team)?

We are thinking about it but there are two very big problems that need to be confronted here:

1. IFRAME means we are allowing twitter to track users. There are privacy concerns.
2. IFRAME means we need to fight the war of “unknown” height. If we have no height and only get it after we have a chat with Twitter, the page goes jumpy jumpy which can heavily impact the Discourse experience. Figuring out the height upfront is super hard.

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [June 6, 2023, 9:24am UTC](https://meta.discourse.org/t/twitter-native-embed/261792/18 "2023-06-06T09:24:21Z")

</div>

> [@sam](#):
>
> There are privacy concerns.

Absolutely. This theme component workaround loads JavaScript from Twitters servers, and considering how Twitter is doing in general, this is a massive privacy risk. Therefore I am reluctant to apply this theme component, at least for now.

Tricky case indeed.

---

<div class="post-metadata">

### Author: ![robotnjik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robotnjik/32/120095_2.png) [@robotnjik](https://meta.discourse.org/u/robotnjik)
#### Post date: [June 6, 2023, 9:30am UTC](https://meta.discourse.org/t/twitter-native-embed/261792/19 "2023-06-06T09:30:52Z")

</div>

I’m really not sure what to look at, but here are the results after pasting link in the composer:

 ![Screenshot 2023-06-06 at 12.25.10 PM](https://global.discourse-cdn.com/meta/original/4X/e/f/2/ef240613f471c63dc3dfb9b863a7311849ff4e3b.jpeg)

* * *

and in the preview I’m getting this message:

 ![Screenshot 2023-06-06 at 12.27.36 PM](https://global.discourse-cdn.com/meta/original/4X/7/5/a/75a5e6e284e52f5b323eeaed91bc05fdbf3232e3.png)

* * *

This is the tweet:

> <https://twitter.com/MKBHD/status/1665796011262894084>

---

<div class="post-metadata">

### Author: ![robotnjik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robotnjik/32/120095_2.png) [@robotnjik](https://meta.discourse.org/u/robotnjik)
#### Post date: [June 7, 2023, 6:46am UTC](https://meta.discourse.org/t/twitter-native-embed/261792/20 "2023-06-07T06:46:12Z")

</div>

Update:

So embeds are working now, but composer preview still displays “Sorry, we are unable to generate…” message. When posted, everything looks good.

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