如果我只知道推文的 ID，如何在页面上嵌入推文？

Question

给出一个简单的 ID，例如：

807811447862468608

如何将其嵌入我的页面？

我查看了 StackOverflow 上的其他问题，但它们要求提供完整的推文 HTML。我只是想保存对推文的引用并让小部件拾取它。

Answer 1

只需使用此标签即可

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/username/status/807811447862468608"></a> 
</blockquote>

并加载 Twitter 小部件脚本

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

推文将嵌入您的页面中

Answer 2

所以这里有一个技巧 - 如果您只知道推文 ID，那么您在 Twitter URL 中输入的用户 ID 并不重要，您实际上会获得所需推文的链接。

例如https://twitter.com/andypiper/statuses/807811447862468608仍然会向您显示实际的原始推文，即使我没有发送它。当然，它会显示正确的原作者归属，但如果您只有推文 ID，那么这是一个方便的快捷方式。

了解此信息后，您有两种选择将推文嵌入页面：

1. 转到 publish.twitter.com 并粘贴上面的 URL - 它将向您显示推文嵌入，并提供标记代码

2. 以编程方式调用 Twitter 的 oEmbed API。以下是使用 Twitter 的

   twurl

   工具 执行此操作的示例。您可以使用 JSON 响应中生成的

   html

   值将推文嵌入到您的页面中。再次注意，我使用了我的 Twitter 句柄，但使用了实际的推文 ID，并且结果输出引用了原始发布者的原始推文。

$ twurl -H publish.twitter.com "/oembed?url=https://twitter.com/andypiper/status/807811447862468608"

{
  "url": "https:\/\/twitter.com\/tiagopog\/status\/807811447862468608",
  "author_name": "Tiago Guedes",
  "author_url": "https:\/\/twitter.com\/tiagopog",
  "html": "\u003Cblockquote class=\"twitter-tweet\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003EI will never forget my first HTTP request measured in µs :-) \u003Ca href=\"https:\/\/twitter.com\/hashtag\/elixir?src=hash\"\u003E#elixir\u003C\/a\u003E \u003Ca href=\"https:\/\/twitter.com\/hashtag\/phoenix?src=hash\"\u003E#phoenix\u003C\/a\u003E\u003C\/p\u003E— Tiago Guedes (@tiagopog) \u003Ca href=\"https:\/\/twitter.com\/tiagopog\/status\/807811447862468608\"\u003EDecember 11, 2016\u003C\/a\u003E\u003C\/blockquote\u003E\n\u003Cscript async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"\u003E\u003C\/script\u003E",
  "width": 550,
  "height": null,
  "type": "rich",
  "cache_age": "3153600000",
  "provider_name": "Twitter",
  "provider_url": "https:\/\/twitter.com",
  "version": "1.0"
}

Answer 3

在 2021 以编程方式按 ID 实现推文时遇到了这个问题。

public colorScheme = 'light';

// get prefers-color-scheme for tweet embed
this.colorScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

// Setup Tweet
(<any>window).twttr.widgets.createTweet(this.tweetId, document.getElementById('tweet'), {
    theme: this.colorScheme,
    dnt: true
}).then( function( el ) {
    console.log('Tweet added.');
});

您需要在网页上加载 widgets.js

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

并且显然您的 HTML 中有

<div id="tweet">

。

更新：如果您在 vanilla JS 中遇到问题，您可能需要在

twttr.ready

之后运行此逻辑

twttr.ready(
  function (twttr) {
     ...
  }
)

Answer 4

检查此解决方案。您只需要嵌入链接或 ID

//Twitter JS  <script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

let twitterShareTweetLink = 'https://twitter.com/Google/status/1164236418622926849';
let tweetRegex = /^https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(es)?\/([0-9]{19})/
let id = twitterShareTweetLink.match(tweetRegex)[3];
$('#tweetDIV').append(`<div class="tweet" id="${id}"></div>`);
var tweets = $(".tweet");
    $(tweets).each(function(t, tweet) {
        $(this).html('');
        var id = $(this).attr('id');
        twttr.widgets.createTweet(
            id, tweet, {
                conversation: 'all', // or all
                cards: 'visible', // or visible 
                linkColor: '#cc0000', // default is blue
                theme: 'light' // or dark
            });
        $(this).removeClass('tweet');

    });

Answer 5

如果您使用React，则可以使用npm库react-tweet-embed。

使用此功能，您可以将您的推文显示为：

<TweetEmbed id= {YourTweetID} />

这是在您的网站中合并推文的最简单方法。

如果您不使用 React，那么您可以简单地使用 this 代码片段将推文嵌入到您的网站中。

这是工作 Jsfiddle 的链接。