CODEWITHSUNDEEP
javascriptjquerycsstwittertwitter-follow
Matthew S
Matthew S

Reputation: 833

Hide the word "followers" in Twitter's follow button

Twitter suggests the following code to render the follow button on your site. 

<a href="https://twitter.com/twitter" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-dnt="true" data-show-count="true"></a>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"> 
</script>

The button shows a username, followed by a bubble with a follower count and the word "followers." enter image description here

I want to simplify the button by removing the word "followers." There was a CSS solution 7 years ago, which involved using overflow:hidden and then drawing a fake border where the bubble was cut off. However, that solution doesn't work very well, as described in the comments to that answer.

Is there a more elegant solution today? CSS would be best, but JavaScript/jQuery would also be acceptable.

Upvotes: 1

Views: 186

Answers (2)

Jordoff
Jordoff

Reputation: 66

Unfortunately, I don't think there is a practical solution for what you are trying to accomplish.

Because the Twitter widget generates an iFrame there isn't much you can do. The reason for this is the Same-origin policy. You can't access or modify the contents of an iFrame unless they are hosted on the same domain (this is a good thing, as it prevents a number of cross site exploits that would otherwise be possible).

An alternative approach might be to display the widget without the follower count and add your own follower count using a separate Twitter API.

Edit: For completeness, this page enumerates the parameters you can pass to the widget API. At the time of this post, there don't seem to be any parameters other than "show_count" relating to the displayed follower count.

Upvotes: 3

Manuel Abascal
Manuel Abascal

Reputation: 6380

I would suggest to do the following:

  • First, add the follow button like so:
<iframe
  src="//platform.twitter.com/widgets/follow_button.html"
  style="width: 88px; height: 20px;"
  allowtransparency="true"
  frameborder="0"
  scrolling="no">
</iframe>
  • Second, use Twitter API documentation & use its endpoints GET followers/list to display the followers count number without the word.

Upvotes: 1

Related Questions