Remove follow button from embedded tweet

Question

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 ?

Answer 1

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.

Answer 2

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!

Answer 3

in case you have multiple widgets

<style>

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

</style>