网页嵌入Twitter的推文

step 1： 使用 oEmbed 转换推文 URL

使用oEmbed API以编程方式将推文URL 转换为嵌入的推文标记 。使在您的 CMS 或应用程序中嵌入推文就像粘贴推文 URL 一样简单。

step 2：使用 JavaScript 渲染推文

我们的小部件 JavaScript 在执行时扫描 DOM， 根据元素内容将 blockquote.twitter-tweet元素转换为完全渲染的嵌入式推文。

如果动态地将新内容插入页面，请将新文档片段传递给 twttr.widgets.load() 以初始化嵌入的推文内容。

如果内容被动态插入到页面中（例如延迟加载内容或使用 pushState 技术在文章之间导航），则有必要使用twttr.widgets.load() 函数解析新按钮和小部件 。

twttr.widgets.load()

不带参数调用，  widgets-js 将在整个 document.body  DOM 树中搜索未初始化的小部件。为了获得更好的性能，请传递一个 HTMLElement 对象以将搜索限制为仅对元素的子元素进行搜索。

例子：

twttr.widgets.load(
  document.getElementById("container")
);

要在运行时直接渲染嵌入式Tweet，请使用 twttr.widgets.createTweet（） 函数。

例子

 页面上存在DOM ID 为container的元素 。

<div id="container"></div>

下面的代码片段将 Tweet ID 20 插入到具有唯一 ID container的元素内的页面 中。options 对象指定了深色主题自定义。

twttr.widgets.createTweet(
  "20",
  document.getElementById("tweet-container"),
  {
    theme: "dark"
  }
);

承诺

该 twttr.widgets.createTweet 返回一个 承诺。您可以在将小部件插入到您的页面后，通过将回调传递给生成的 Promise 的then 函数来执行代码 。

twttr.widgets.createTweet(...)
.then( function( el ) {
  console.log('Tweet added.');
});

官方API 链接：

 https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/overview