Twitter(X)嵌入推文data-tweet-limit属性失效求助

data-tweet-limit属性并非对所有嵌入模式都生效——它仅在精选推文模式（比如搜索结果时间线、特定话题时间线）下有效，普通的用户主页时间线会默认忽略这个参数。以下是几种可行的解决办法：

方案1：切换为搜索时间线 #

构造一个仅包含目标用户推文的搜索链接，这种模式下data-tweet-limit能正常触发：

<a class="twitter-timeline" 
   data-width="350" 
   data-lang="en" 
   data-theme="dark" 
   data-chrome="transparent"
   data-tweet-limit="6"
   href="https://twitter.com/search?q=from%3AFriendsTV"
>
    Tweets by FriendsTV
</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

这里的from:FriendsTV是搜索语法，指定只展示来自FriendsTV账号的推文，官方组件会正确识别并应用条数限制。

方案2：自定义渲染推文（通过API） #

如果需要完全的控制权，可以直接调用Twitter API v2获取指定数量的推文，再自己渲染UI：

1. 申请Twitter API的Bearer Token（需要在开发者平台注册应用）
2. 前端发起请求获取目标用户的最近6条推文
3. 动态生成展示区域

示例代码（简化版）：

const bearerToken = '你的Bearer Token';
const timelineContainer = document.getElementById('custom-tweet-container');

fetch('https://api.twitter.com/2/users/by/username/FriendsTV/tweets?max_results=6', {
  headers: { 'Authorization': `Bearer ${bearerToken}` }
})
.then(res => res.json())
.then(data => {
  data.data.forEach(tweet => {
    const tweetCard = document.createElement('div');
    tweetCard.className = 'custom-tweet-card';
    tweetCard.innerHTML = `<p>${tweet.text}</p>`;
    // 可添加日期、点赞数等额外信息，或自定义样式
    timelineContainer.appendChild(tweetCard);
  });
});

这种方式不受官方组件的限制，能精准控制展示条数和样式细节。

方案3：排查兼容性问题 #

• 暂时移除data-chrome="transparent"属性测试，部分自定义chrome配置可能和条数限制存在冲突
• 确保加载的widgets.js是最新版本，旧版本可能存在属性解析bug

内容的提问来源于stack exchange，提问作者cecilie_j