How to Embed Twitter Links in CKEditor (Strapi) After TwitFrame Shutdown?

Question

I’m using CKEditor5 in Strapi to embed Twitter links. Previously, I used TwitFrame to automatically embed tweets, but now that TwitFrame is down, I’m getting an error. Here’s a section of the code I was using:

  name: "twitter",
  url: /^twitter\.com\/([\w.-]+)\/status\/(\d+)$/,
  html: (match) => {
    const name = match[1];
    const id = match[2];
    return (
      '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
      `<iframe src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2F${name}%2Fstatus%2F${id}" loading="lazy"` +
      'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
      'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
      "</iframe>" +
      "</div>"
    );
  },
} 

Since TwitFrame is no longer available, I’m seeking an alternative solution. I’ve tried using Twitter’s oEmbed API, but I’m not sure how to integrate it properly. Can someone suggest a working solution?

Answer 1

I modified the code to directly use Twitter's official embed URL. Here’s the working solution:

{
  name: "twitter",
  url: /^twitter\.com\/([\w.-]+)\/status\/(\d+)$/,
  html: (match) => {
    const id = match[2];
    return (
      '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
      `<iframe src="https://platform.twitter.com/embed/Tweet.html?id=${id}" loading="lazy"` +
      ' style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
      ' frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
      "</iframe>" +
      "</div>"
    );
  },
},

The link in iframe is changed from twitframe.com to platform.twitter.com