Remove follow button from embedded tweet

I'm embedding tweet on a website and I would like to remove the follow button and also the reply, favorite and retweet buttons that are in the footer. A minimal HTML example is the following

<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>

By inspecting the code, once the tweet is diplayed, I figured that the button is wrapped as following

<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>

So far I tried to remove this class using JQuery

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

I also tried to overwrite the css by adding the following line to my stylesheet :

.follow-button {visibility:hidden;}

And following this post, I tried adding also this line

.twt-actions { display: none; }

None of the above worked. Is there a solution to customize these embedded tweets ?

There are a couple different ways to embed tweets - according to the docs on embedding tweets:

Our widget scans the DOM on execution, converting blockquote.twitter-tweet elements into fully-rendered embedded Tweets based on element content.

To directly render an embedded Tweet at runtime use the twttr.widgets.createTweet() function.

a) Default Through Publish Widget

If you process this tweet through the publish widget, it will generate the following code (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>

Then, you could go identify all the <twitter-widget> elements that were created and update any style properties in their shadowRoot like this:

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

However, we have to wait until the widget has processed each tweet and I can't find an event to tap into that would allow you to fire this at the right time (without doing some weird setTimeout stuff and hoping you waited long enough

b) Manually through JavaScript

You can take over the creation of the tweet like this:

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

Which will return a promise that you can handle as soon as the tweet has been inserted, allowing you to update styles in the shadowRoot like this (demo):

<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>

Note: The Tweet ID must be a string as numbers above <code>2⁵³ - 1 = 9007199254740991</code> in JavaScript will be truncated (Number.MAX_SAFE_INTEGER)

Notes on Shadow DOM

The <twitter-widget> is a web component that is styled using the shadow DOM. Global style overrides using /deep/ or ::shadow were deprecated in Chrome 45 and removed in Chrome 63. Currently the best way to override styles in shadow root is to set a style element directly in the element's shadowRoot