# Onebox Twitter embedding

**URL:** https://meta.discourse.org/t/onebox-twitter-embedding/18943
**Category:** Feature
**Created:** [August 17, 2014, 10:16am UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943 "2014-08-17T10:16:41Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![limeblast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/limeblast/32/31296_2.png) [@limeblast](https://meta.discourse.org/u/limeblast)
#### Post date: [August 17, 2014, 10:16am UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/1 "2014-08-17T10:16:41Z")

</div>

_Note: This is now implemented._

> [@techAPJ](#):
>
> Disable `enable twitter logins` and just provide `twitter consumer key` & `twitter consumer secret`.

* * *

What are the chances that the onebox system can be configured so it uses Twitter’s embedded tweets?

i.e. - this:

 ![](https://global.discourse-cdn.com/meta/original/3X/3/f/3fc93007aeb4fabd1a34603023b53643cc9f1730.png)

not this:

 ![](https://global.discourse-cdn.com/meta/original/3X/e/c/ec418881718793a94bd444532d6830c0a009b2e2.png)

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [August 18, 2014, 12:34am UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/2 "2014-08-18T00:34:37Z")

</div>

At first I liked this but I’m not sure after all. Changing to the Twitter embedded code kind of disrupts the UI, IMHO. The current Onebox displays all the relevant content (except maybe images?) which seems like enough (to me).

---

<div class="post-metadata">

### Author: ![trident](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/trident/32/2078_2.png) [@trident](https://meta.discourse.org/u/trident)
#### Post date: [August 18, 2014, 1:09am UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/3 "2014-08-18T01:09:33Z")

</div>

If you are looking to make modifications, start by looking at the [twitter spec](https://github.com/discourse/onebox/blob/master/lib/onebox/engine/twitter_status_onebox.rb) in onebox gem. You could patch it to return the embed HTML.

---

<div class="post-metadata">

### Author: ![BhaelOchon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bhaelochon/32/191311_2.png) [@BhaelOchon](https://meta.discourse.org/u/BhaelOchon)
#### Post date: [August 18, 2014, 3:20am UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/4 "2014-08-18T03:20:39Z")

</div>

By that logic, the YouTube and Vimeo embeds should be reverted to be the same, boring gray box, because their current onebox implementation isn’t precisely the same UI as every other onebox.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 18, 2014, 4:51am UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/5 "2014-08-18T04:51:13Z")

</div>

Yeah but those are video. Textual content isn’t from another alien planet like video is. Browsers can’t even display video natively for the most part, and historically not at all without plugins.

---

<div class="post-metadata">

### Author: ![BhaelOchon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bhaelochon/32/191311_2.png) [@BhaelOchon](https://meta.discourse.org/u/BhaelOchon)
#### Post date: [August 18, 2014, 5:23am UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/6 "2014-08-18T05:23:30Z")

</div>

> [@codinghorror](#):
>
> Browsers can’t even display video natively for the most part, and historically not at all without plugins.

Yeah, it’s really too bad modern browsers don’t support native playback via the HTML5 `<video/>` tag. Oh wait.

All I’m saying is @downey’s response was, “Twitter embedded code kind of disrupts the UI,” but so does embedded content from two other websites. Not to mention that the current Twitter onebox implementation drops things like uploaded pictures, e.g.:

[https://twitter.com/Lvl90HumanDev/status/500124839961583616](https://twitter.com/Lvl90HumanDev/status/500124839961583616)

---

<div class="post-metadata">

### Author: ![limeblast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/limeblast/32/31296_2.png) [@limeblast](https://meta.discourse.org/u/limeblast)
#### Post date: [August 18, 2014, 6:17am UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/7 "2014-08-18T06:17:13Z")

</div>

There are differences between what’s shown however. As you point out, the  
attached image isn’t shown, but in addition, the links shown are the [t.co](http://t.co)  
shortlinks, and the extra functionality, such as being able to follow the  
user, RT the message, etc.. Are all missing.

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [August 18, 2014, 1:32pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/8 "2014-08-18T13:32:32Z")

</div>

YouTube videos embed appear as just the video. Twitter adds a lot of extra UI junk when using their embeds.

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [August 28, 2014, 3:43pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/9 "2014-08-28T15:43:49Z")

</div>

Onebox now uses official Twitter Embed API:

> <https://twitter.com/codinghorror/status/491715612448538625?d>

(_Note: One critical advantage of using this strategy will be that Twitter API Key will no longer be required for Twitter Oneboxing!_)

**Update** : This change is affecting scrolling due to variable height, so it is being reverted.

---

<div class="post-metadata">

### Author: ![limeblast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/limeblast/32/31296_2.png) [@limeblast](https://meta.discourse.org/u/limeblast)
#### Post date: [August 28, 2014, 5:45pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/10 "2014-08-28T17:45:58Z")

</div>

This is awesome 😃

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [August 28, 2014, 6:29pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/11 "2014-08-28T18:29:04Z")

</div>

I apologize but we can not afford [broken scrolling](https://meta.discourse.org/t/twitters-onebox-not-working/11878/10), so I will have to revert this change. 😞

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [May 27, 2016, 3:37pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/12 "2016-05-27T15:37:17Z")

</div>

Twitter now support oEmbed for their timelines via their API:

> **[Announcing oEmbed support for embedded timelines](https://devcommunity.x.com/t/announcing-oembed-support-for-embedded-timelines/67689)**
>
> Our goal is to make it easier for you to tell great stories with embedded Tweets. We recently redesigned embedded timelines on web with a modern, responsive design, which makes them look great on any web page, whether mobile or desktop. Now, we’ve...

You can also request `omit_script` via the API.

Not sure if it fits with Discourse posts - but seems relevant here.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [May 27, 2016, 6:48pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/13 "2016-05-27T18:48:05Z")

</div>

Sure @techapj can you see what happens in this case?

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [May 27, 2016, 6:50pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/14 "2016-05-27T18:50:17Z")

</div>

This is awesome! We may finally be able to onebox fancy tweets without needing Twitter API access.

Added on my list to look into next week.

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [June 2, 2016, 4:36pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/15 "2016-06-02T16:36:34Z")

</div>

So I looked into it today and it’s still not usable. ☹

Here is a comparison:

Twitter onebox with API key:

> <https://twitter.com/codinghorror/status/738262100414337025>

Twitter onebox without API key:

 ![](https://global.discourse-cdn.com/meta/original/3X/d/1/d155cef0da7c23ea74ee703c1b84e81175f39da3.png)

Twitter onebox using new oEmbed endpoint (without script):

 ![](https://global.discourse-cdn.com/meta/original/3X/f/1/f17346076b9fa5783f4c24c45185c70e0f71c833.png)

Twitter onebox using new oEmbed endpoint (with script):

 ![](https://global.discourse-cdn.com/meta/original/3X/1/f/1faaeac8f23c356876f2bd6a707f4d48dc1b9802.png)

Now since we can’t use oEmbed with script, I think for now we will have have to rely on OpenGraph data in case Twitter API key is not present.

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [June 2, 2016, 4:55pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/16 "2016-06-02T16:55:44Z")

</div>

Sad times…

My post was regarding “timelines” as a new type of embed - But these aren’t “timelines”…

… I had already thought you had compared single tweet embeds.

But very good to see it visually - thanks.

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [June 2, 2016, 5:05pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/17 "2016-06-02T17:05:59Z")

</div>

> [@DeanMarkTaylor](#):
>
> My post was regarding “timelines” as a new type of embed - But these aren’t “timelines”

Ah, I see. Just looked at that, it also depends on JavaScript, and inserting script tag in our DOM isn’t supported.

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [June 2, 2016, 5:14pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/19 "2016-06-02T17:14:15Z")

</div>

I just had a quick look at the output from the API, it’s pretty poor - it does seem to require JavaScript to do anything ☹

**plain request**

```JSON
{
    "url": "https:\/\/twitter.com\/TwitterDev",
    "title": "",
    "html": "\u003Ca class=\"twitter-timeline\" href=\"https:\/\/twitter.com\/TwitterDev\"\u003ETweets by TwitterDev\u003C\/a\u003E\n\u003Cscript async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"\u003E\u003C\/script\u003E",
    "width": null,
    "height": null,
    "type": "rich",
    "cache_age": "3153600000",
    "provider_name": "Twitter",
    "provider_url": "https:\/\/twitter.com",
    "version": "1.0"
}

```

**omit\_script request**

```JSON
{
    "url": "https:\/\/twitter.com\/TwitterDev",
    "title": "",
    "html": "\u003Ca class=\"twitter-timeline\" href=\"https:\/\/twitter.com\/TwitterDev\"\u003ETweets by TwitterDev\u003C\/a\u003E\n",
    "width": null,
    "height": null,
    "type": "rich",
    "cache_age": "3153600000",
    "provider_name": "Twitter",
    "provider_url": "https:\/\/twitter.com",
    "version": "1.0"
}

```

As all it really does is allow you to exclude the scripts from the embeds to include it once in the page :sadpanda:

Looks like I hoped for too much.

---

<div class="post-metadata">

### Author: ![Apreche](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/apreche/32/106705_2.png) [@Apreche](https://meta.discourse.org/u/Apreche)
#### Post date: [January 2, 2017, 9:53pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/20 "2017-01-02T21:53:27Z")

</div>

While the full on Twitter embedding would be nice, if that’s not possible can we at least have images appear? A lot of people post Tweets solely because of the images, and forcing users to leave the site just to see the image(s) is not very friendly.

Instagram embedding actually has the opposite problem right now. It only embeds the image, and you would never know that the image was actually an embedded Instagram post. It should at least include the caption and the Instagram username.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 2, 2017, 10:10pm UTC](https://meta.discourse.org/t/onebox-twitter-embedding/18943/21 "2017-01-02T22:10:24Z")

</div>

This already works, you just need to set up Twitter logins to get a valid API key.

[Next page](https://meta.discourse.org/t/onebox-twitter-embedding/18943.md?page=2)
