1

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.

Matthew S
  • 843
  • 2
  • 12
  • 26
  • Out of curiosity, what happens if you change `data-show-count` to `false`? – Philip Stratford Oct 02 '19 at 23:12
  • I would imagine at the most worst case scenario, you could call a function after that widget loads and do standard javascript dom hackery. Seems like there should be some OOTB config setting for this though. – mwilson Oct 02 '19 at 23:15
  • @PhilipStratford It hides the whole bubble – Matthew S Oct 02 '19 at 23:42
  • @mwilson That's what I was thinking, since there isn't an official setting for this. Do you want to provide that as the answer? – Matthew S Oct 02 '19 at 23:43
  • Are you suggesting killing the entire popup? I just want to remove the word "followers." The follower count IS useful. – Matthew S Oct 02 '19 at 23:52

2 Answers2

3

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.

Jordoff
  • 66
  • 8
  • Once remote code is executed and loaded, it becomes part of the final HTML that your site visitor looks at in his browser. How is it impossible to hack a text string out of that final view, with JavaScript or otherwise? – Matthew S Oct 03 '19 at 03:28
  • 1
    @KnocksX The contents of an iFrame do not belong to the host page. An iFrame is in many ways treated as a separate tab by your browser (so much so that chrome accually supports [out of process iframes](https://www.chromium.org/developers/design-documents/oop-iframes)). The parent page is disallowed from accessing or modifying the contents of an iFrame, unless the origin is the same, even after the parent page renders. [This question](https://stackoverflow.com/questions/6494721/override-body-style-for-content-in-an-iframe) is somewhat related and comes to a similar conclusion. – Jordoff Oct 03 '19 at 18:39
  • 1
    Thanks, I agree now that I've thought about it. Similar problem with trying to tame wild Google ads that take on dimensions of their own regardless of container div's rules and don't even respect !important. – Matthew S Oct 03 '19 at 22:09
1

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.
Manuel Abascal
  • 5,616
  • 5
  • 35
  • 68