Twitter "Follow" button doesn't appear. Only text

Question

First, I have read this, this and this and many other out there about "Twitter button doesn't render". None of them have solution for my issue.

I have two Twitter buttons near each other. Tweet button renders all right, Follow button doesn't render. No errors or warnings being thrown to console, neither in FF, nor in Chrome. Twitter widget <script> code is all right - I copy/paste it, no typo or anything.

Apparently the issue has nothing to do with that Twitter widget doesn't load in page because "Tweet" button is displayed just fine.

However there is a strange class name that Twitter adds to <a> element of the button - twitter-follow-button-error. And whole Google has only two results about this class, both are irrelevant. Twitter API docs doesn't say anything about it.

What can it be? Is this the cause? How to solve it?

<div key={key}>
    {/* Follow doesn't render */}
    <a className="twitter-follow-button" 
       href={href} data-size="large" 
       data-show-screen-name="true" 
       data-show-count="true">Follow</a>

    {/* Tweet renders all right */}
    <span className={`${css.btn_dist}`}>
        <a className="twitter-share-button"  
           href={href}  
           lang="en" 
           data-size="large">Tweet</a>
    </span>
</div>

And your `href` variable points to something that actually can be followed …? — CBroe, Oct 05 '17 at 12:11
I have no experience with this but you could try prittyfy twitter JavaScript and use control + shift + f in chrome dev tools and look for twitter-follow-error. Maybe you can find it in the JavaScript, break on it and see what it is that goes wrong. Any failing xhr in the network that provide extra information? — HMR, Oct 05 '17 at 12:19

score 1 · Accepted Answer · answered Oct 05 '17 at 13:16

I can reproduce your error with chrome 61.0.3163.100 (Official Build) (64-bit).

When you press F12 and load the page it will break in twitter JavaScript rejecting a promise c.reject(new Error("cannot hydrate widget before it is initialized"))

There is no error in the console but it pauses on this error in my version of Chrome. The follow link has a twitter-follow-button-error class using the following code:

    <a class="twitter-follow-button" 
    href="http://www.wut.com" data-size="large" 
    data-show-screen-name="true" 
    data-show-count="true">Follow</a>

    <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>

When using a valid href the error goes away:

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

    <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>

Make sure your dev tools pauses on exception (I did not have to check pause on caught exceptions)

True. It was a trailing slash in account url `https://twitter.com/TwitterDev/`. Just a trailing slash. Protocol (`http:` or `https:`) and letter case do not matter. But a trailing slash throws, of all things. — Green, Oct 05 '17 at 16:05
How could you debug it so that you could see the error? My console didn't print any errors or warnings. How did you do it > _When you press F12 and load the page_ ? — Green, Oct 05 '17 at 16:07
@Green I added the code above to a page in an existing project and ran it with webpack dev server on localhost:8080 (but you could run any server I think). Opened the dev tools and reloaded. Maybe breaking at failed promises is something that the newest google chrome does, I did not have the "pause on caught exceptions" checkbox checked (in sources tab) — HMR, Oct 06 '17 at 03:18

Twitter "Follow" button doesn't appear. Only text

1 Answers1