Onebox Twitter embedding


(Daniel Hollands) #1

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

i.e. - this:

not this:


Twitter Embed Video Not Displayed
(Michael Downey) #2

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


(Ben T) #3

If you are looking to make modifications, start by looking at the twitter spec in onebox gem. You could patch it to return the embed HTML.


(Bill Ayakatubby) #4

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.


(Jeff Atwood) #5

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.


(Bill Ayakatubby) #6

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


(Daniel Hollands) #7

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
shortlinks, and the extra functionality, such as being able to follow the
user, RT the message, etc… Are all missing.


(Michael Downey) #8

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


(Arpit Jalan) #9

Onebox now uses official Twitter Embed API:

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


(Daniel Hollands) #10

This is awesome :smiley:


(Arpit Jalan) #11

I apologize but we can not afford broken scrolling, so I will have to revert this change. :disappointed:


(Dean Taylor) #12

Twitter now support oEmbed for their timelines via their API:

You can also request omit_script via the API.

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


(Jeff Atwood) #13

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


(Arpit Jalan) #14

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.


(Arpit Jalan) #15

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

Here is a comparison:

Twitter onebox with API key:

Twitter onebox without API key:

Twitter onebox using new oEmbed endpoint (without script):

Twitter onebox using new oEmbed endpoint (with script):

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.


(Dean Taylor) #16

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.


(Arpit Jalan) #17

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


(Dean Taylor) #19

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

plain request

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

{
    "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.


(Scott Rubin) #20

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.


Instagram oneboxing
(Jeff Atwood) #21

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