Hello, everybody watching this thread :
The cause for this happening is very simple, in my opinion. The syntax is malformed, in the meaning bellow:
Usually when defining styles (either internal – inside your index.html file, or external – by using a mystyles.css file stored next to your index.html file) you must define what are the classes which you are later invoking in your html source code.
Obviously, somewhere inside the server where is hosted www.twitter.com itself, it is defined this class selector
class=“twitter-follow-button”
which is the real root of the troubles. However, we simply can’t define it inside our server (because we usually might receive its description from twitter itself – or importing it using the script made available to us by twitter. Otherwise we can’t do it, because we don’t know exactly this class content. If it would be a simple image (as a banner), than no class code would be necessary, but simply to download it and create a link, etc…
I wonder why during all these 3 years long, nobody at twitter did not figured out this simple issue (it is something from first lessons about using classes and selectors) – one can read this very good source here:
Probably it has nothing to do with the missing http element (mentioned above by some of you), or any blocking software or extensions. Your browser simply doesn’t know if it just has to ignore that class (invoked in the html code copy-pasted from twitter page), or to enter into an infinite loophole still trying to search inside your css file the parameters for that element, both options being quite damaging for the aspect and the loading speed of your website.
Even worst is the fact that this affects also the absolute positioning of such a twitter button, should you want to place it above a static image on top of your page, because you can’t define 2 classes which to apply to the same element (the nested ones could override the external ones)
For example, if you want to create a floating element, and put in .css file the following code
.floating {
position: absolute;
left: 1050px;
top: 18px;
}
and then inside the index.html this code
![]()
,
so that the small blue bird image would stay nicely on top in the right side of the webpage, then certainly, it is risky to change that part
![]()
into this
Follow @some-user
In most cases the result is unexpected, so you might get lucky, or not.
Point is that you couldn’t know what exactly happens in the browsers of your visitors and if they can be driven swiftly to the user experience intended for them by you as a webmaster.
Having problems with this simple button is for twitter as not having available a “Pay Now” button inside of a e-commerce website when you want to conclude a purchase.
I hope that being identified the problem the developers from twitter could quickly find a workaround for this situation, in the benefit of all community of their users. I am very sure they can continue to add great features to their platform, as always. Thank you.
