Question

给出一个简单的ID：807811447862468608

如何将其嵌入我的页面？

我已经查看了StackOverflow上的其他问题，但它们需要整个推文HTML才能出现。我只是试图保存对推文的引用，让小部件接收它。

Answer 1

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

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

了解此信息后，您可以通过两种方式将Tweet嵌入页面中：

转到publish.twitter.com并粘贴上面的网址 - 它会显示一条推文，并提供标记代码
以编程方式致电Twitter's oEmbed API。这是使用Twitter twurl tool这样做的一个例子。您可以使用JSON响应中生成的html值将Tweet嵌入到您的页面中。再次注意，我使用了我的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&mdash; 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 2

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

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

<TweetEmbed id= {YourTweetID} />

这是在网站上整合推文的最简单方法。

如果您不使用React，则只需使用this代码段即可将tweet嵌入您的网站。

这是工作Jsfiddle的link。

Answer 3

检查此解决方案。您只需要嵌入式链接或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 4

在 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">。

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

4 个答案: