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

> 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()`][4] function.



### a) Default Through Publish Widget

If you process [this tweet][0] through the [publish widget][1], it will generate the following code ([demo][2]):

[0]: https://twitter.com/KyleMitBTV/status/1188837207206977536


```html
<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:


```js
[...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:

```js
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][5]):


```html
<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<sup>53</sup> - 1 = 9007199254740991</code> in JavaScript will be truncated ([`Number.MAX_SAFE_INTEGER`][6])

### Notes on Shadow DOM

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

[1]: https://publish.twitter.com
[2]: https://jsfiddle.net/KyleMit/hLqc1eyw/
[3]: https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/overview
[4]: https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-javascript-factory-function
[5]: https://jsfiddle.net/KyleMit/rc3L7a5x/
[6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
[7]: https://developers.google.com/web/fundamentals/web-components
[8]: https://developers.google.com/web/fundamentals/web-components/shadowdom
[9]: https://developers.google.com/web/updates/2017/10/remove-shadow-piercing
[10]: https://stackoverflow.com/q/47625017/1366033

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][1], I tried adding also this line

    .twt-actions { display: none; }

None of the above worked. Is there a solution to customize these embedded tweets ?


  [1]: https://stackoverflow.com/questions/11635579/twitter-embedded-tweets-remove-reply