Embedded tweets don't display properly

[diomed]

They used to display normally in blue box, now they don't, and display characters that shouldn't be displayed (")

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[rodrigok]

I just removed the quotes.

Can you suggest a layout for tweet embeds?

[AdrianoCahete]

Why not using default Twitter cards layout?

Without images / conversation = none / cards = hidden
https://dev.twitter.com/web/embedded-tweets

With that little blockquote bar (on the left) blue?

[rodrigok]

Looks great, I didn't know this style guide.

We need to create a specific template to render twitter oembeds and see what data was extracted from link source to metadata and see if we have all information to mount a card like that.

Do you want to help us creating this new template in the oembed package?

[AdrianoCahete]

HTML teamplate or psd template?

[rodrigok]

HTML, but I'm working on it now.

[AdrianoCahete]

I just have time to do things like this in weekends, sorry... :(
But push that modification to branch and i'll see friday.

[rodrigok]

Unfortunately the tweet page does not provide all necessary informations via meta tags as you can see below.

I started a branch with initial templates for twitter render: https://github.com/RocketChat/Rocket.Chat/tree/twitter-oembed

{
  "url": "https://twitter.com/Interior/status/463440424141459456",
  "meta": {
    "pageTitle": "US Dept of Interior no Twitter: "Sunsets don't get much better than this one over @GrandTetonNPS. #nature #sunset http://t.co/YuKy2rcjyU" .",
    "ogType": "article",
    "ogUrl": "https://twitter.com/Interior/status/463440424141459456",
    "ogTitle": "US Dept of Interior on Twitter",
    "ogImage": "https://pbs.twimg.com/media/Bm54nBCCYAACwBi.jpg:large",
    "ogImageUserGenerated": "true",
    "ogDescription": "“Sunsets don't get much better than this one over @GrandTetonNPS. #nature #sunset”",
    "ogSiteName": "Twitter",
    "fbAppId": "2231777543"
  },
  "headers": {
    "contentLength": "265900",
    "contentType": "text/html;charset=utf-8"
  },
  "parsedUrl": {
    "host": "twitter.com",
    "hash": null,
    "pathname": "/Interior/status/463440424141459456",
    "protocol": "https:",
    "port": null,
    "query": null
  }
}

[diomed]

I wish I knew what exactly changed, because in the beginning everything was fine,
when this was integrated tweets were displayed in normal box with blue edges. and now they're not anymore.

[rodrigok]

In the past we used an external plugin to create oembed, but this plugin created many problems with rendering, so we decide to create our own plugin to have more control about render.

Probable the old plugin uses the Twitter API to mount this card, and do this in render time, we changed the approach to request the posted url and save headers of the request and meta tags of HTML, is the same approach that facebook does to get information about links.

Maybe we need to improve the meta "extractor" to handle twitter urls and call the twitter's api to get more information.