从嵌入的推文中删除关注按钮

Question

我在网站上嵌入推文，我想删除关注按钮以及回复、收藏和转推按钮在页脚中。一个最小的 HTML 示例如下

<blockquote class="twitter-tweet">
    <a href="https://twitter.com/StackCareers/statuses/468107750333894656"></a>
</blockquote>
<script src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

通过检查代码，一旦显示推文，我发现按钮被包装如下

<a class="follow-button profile" href="https://twitter.com/StackCareers" role="button" data-scribe="component:followbutton" title="Follow StackOverflowCareers on Twitter"><i class="ic-button-bird"></i>Follow</a>

到目前为止，我尝试使用 JQuery 删除这个类

$('.follow-button.profile').remove()

我还尝试通过在样式表中添加以下行来覆盖 css：

.follow-button {visibility:hidden;}

在post 之后，我也尝试添加这一行

.twt-actions { display: none; }

以上都不起作用。是否有自定义这些嵌入式推文的解决方案？

Answer 1

我已经设法使用返回Shadow DOM element 的widget 做到这一点。我读到here，您可以从shadow elements 操作CSS。 Twitter Widget 定义了一个 Shadow element，在我只嵌入一条推文的情况下，它有一个 id：#twitter-widget-0。
所以，我把以下内容放在我的CSS：

  #twitter-widget-0::shadow div.Tweet-brand {
   display: none;
  }

希望对你有用！

Answer 2

根据docs on embedding tweets，有几种不同的方法可以嵌入推文：

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

要在运行时直接呈现嵌入的推文，请使用 twttr.widgets.createTweet() 函数。

a) 默认通过发布小部件

如果通过publish widget处理this tweet，会生成如下代码（demo）：

<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Nobody:<br><br>Software Marketing Page: "Blazingly Fast"</p>
  &mdash; Kyle Mitofsky (@KyleMitBTV) 
  <a href="https://twitter.com/KyleMitBTV/status/1188837207206977536">October 28, 2019</a>
</blockquote>
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

然后，您可以识别所有已创建的<twitter-widget> 元素并更新其shadowRoot 中的任何样式属性，如下所示：

[...document.getElementsByTagName('twitter-widget')].forEach(tweet => { 
  let style = tweet.shadowRoot.firstElementChild;
  let css = document.createTextNode(`.EmbeddedTweet .CallToAction { display: none; }`);
  style.appendChild(css);
})

但是，我们必须等到小部件处理完每条推文，而我找不到可以让你在正确的时间触发它的事件（不做一些奇怪的setTimeout 的事情，希望你等够久了

b) 通过 JavaScript 手动

您可以像这样接管推文的创建：

let tweetId = "1188837207206977536"
let tweetContainer = document.getElementById('tweet-container');
twttr.widgets.createTweet(tweetId, tweetContainer)

这将返回一个承诺，您可以在插入推文后立即处理，允许您像这样 (demo) 更新 shadowRoot 中的样式：

<div id="tweet-container" class="embedded-tweets"></div>
<script src="https://platform.twitter.com/widgets.js"></script>

<script type="text/javascript">
  let tweetId = "1188837207206977536"
  let tweetContainer = document.getElementById('tweet-container');
  twttr.widgets.createTweet(tweetId, tweetContainer)
       .then(function (tweet) {
         let style = tweet.shadowRoot.firstElementChild;
         let css = document.createTextNode(`.EmbeddedTweet .CallToAction { display: none; }`);
         style.appendChild(css);
       });
</script>

注意：推文 ID 必须是字符串，因为 JavaScript 中 2<sup>53</sup> - 1 = 9007199254740991 以上的数字将被截断 (Number.MAX_SAFE_INTEGER)

Shadow DOM 说明

<twitter-widget> 是一个web component，使用shadow DOM 设置样式。使用 /deep/ 或 ::shadow 的全局样式覆盖在 Chrome 45 和 removed in Chrome 63 中已弃用。目前override styles in shadow root的最佳方式是直接在元素的shadowRoot中设置style元素

Answer 3

这是不可能的。您正在从具有同源策略的源将跨域内容加载到 iframe 中，这意味着您无法从 Javascript 中操作内容。

据我所知，对于不使用 iframe 的推文，没有开箱即用的嵌入代码。

你有两个选择。第一个选项是显示提供的推文。第二个选项是use the API to retrieve the tweet 并随意显示。对于后者，您必须注册一个 API 密钥。

或者，您可以找到解决方法here，但我不能保证任何这些建议的实施质量。

Answer 4

如果您有多个小部件

<style>

  [id*="twitter-widget"]::shadow div.Tweet-brand {   display: none;  }

</style>