CODEWITHSUNDEEP
jqueryhtmlcsstwitter
cheseaux
cheseaux

Reputation: 5325

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 ?

Upvotes: 4

Views: 3690

Answers (4)

KyleMit
KyleMit

Reputation: 30107

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 253 - 1 = 9007199254740991 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

Upvotes: 2

Jekill Byca
Jekill Byca

Reputation: 31

in case you have multiple widgets

<style>

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

</style>

Upvotes: 1

Pablo.
Pablo.

Reputation: 21

I've managed to do this with the widget that returns a Shadow DOM element. I read here that you can manipulate CSS from shadow elements. The Twitter Widget defines a Shadow element that, in my case where I just have one tweet embedded, has an id: #twitter-widget-0.
So, I put the following in my CSS:

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

I hope it's useful!

Upvotes: 2

Ant P
Ant P

Reputation: 25231

This is not possible. You are loading cross-domain content into an iframe from a source with a same-origin policy, which means you cannot manipulate the contents from your Javascript.

As far as I am aware, there is no out-of-the-box embed code for tweets that doesn't use an iframe.

You have two options. The first option is to display the tweet as it is provided. The second options is to use the API to retrieve the tweet and display it as you please. For the latter, you'll have to sign up for an API key.

Alternatively, you may be able to find a workaround here but I can't vouch for the quality of any implementation of any of these suggestions.

Upvotes: 2

Related Questions