Onebox Twitter embedding

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.

4 Likes

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.

4 Likes

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.

1 Like

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

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.

5 Likes

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.

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

3 Likes

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 Likes

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 Likes

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

10 Likes

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

4 Likes

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 Likes

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 Likes

It’s always the 1% left

1 Like

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

11 Likes

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

How it appears on mobile:

5 Likes

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

4 Likes