DEV Community

Pete Freitag
Pete Freitag

Posted on • Originally published at petefreitag.com on

Replacing Twitter Share / Follow Widget Buttons with CSS

While looking at the PageSpeed Insights for my blog I noticed that the Twitter widgets I was using to display a twitter follow button and a tweet / share button were causing some page speed issues. Specifically the TBT (Total Blocking Time), LCB (Largest Contentful Paint) saw an impact. Overall it was taking about 151 KiB and blocking the main thread for 56ms.

Here's an example of what I was using:


<a href="https://twitter.com/pfreitag" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @pfreitag</a>
<script async src="https://platform.twitter.com/widgets.js"></script>

Enter fullscreen mode Exit fullscreen mode

That loads the following button:

Follow @pfreitag

Note this doesn't show up on dev.to, but you can see it if you go to my blog directly.

Taking a look at this script, it replaces the button with an iframe, it's just quite simply overkill for what it does.

Replacing the Twitter button with pure CSS

It should be easy enough to replace this button with a pure css implementation. First, we should replace https://twitter.com/pfreitag with a twitter intent to follow url, for example: https://twitter.com/intent/follow?screen_name=pfreitag. We can also get rid of data-show-count="true" data-size="large" in the link. One thing our new solution won't have is that nice follower count, but I can live without it. It would be possible to add that back in again, perhaps using a hard coded count to keep it efficient.

Finally here's the css we are using to make the button look similar to the twitter follow button:


.twitter-follow-button, .twitter-follow-button:visited {
    background-color: #1b95e0;
    color: #fff;
    border-radius: 4px;
    height: 28px;
    font-weight: 500;
    font-size: 13px;
    line-height: 26px;
    padding: 8px 8px 8px 30px;
    text-decoration: none;
    background-image: url('/images/twitter.png');
    background-repeat: no-repeat;
    background-size: 16px 13px;
    background-position: 8px 10px;
}
.twitter-follow-button:hover {
    background-color: #0c7abf;
}

Enter fullscreen mode Exit fullscreen mode

One thing you'll note is that we are using an image for the twitter logo, but you don't have to do that. If you have an icon pack like font-awesome you may have a twitter logo you can use, or you can even create the twitter logo in pure css.

If you want to make the button even more efficient to load just omit the button and use something like this:


.twitter-follow-button, .twitter-follow-button:visited {
    background-color: #1b95e0;
    color: #fff;
    border-radius: 4px;
    height: 28px;
    font-weight: 500;
    font-size: 13px;
    line-height: 26px;
    padding: 8px;
    text-decoration: none;
}
.twitter-follow-button:hover {
    background-color: #0c7abf;
}

Enter fullscreen mode Exit fullscreen mode

Another good reason to remove the twitter JavaScript is that it also makes the Content-Security-Policy for twitter buttons much easier to implement.

To see an example of the pure CSS button take a look below the end of this entry (go to my blog directly).

Top comments (2)

Collapse
 
gamesover profile image
James Moberg

If you want access to more social media services & CSS styles, here's a generator that can save up to 26 HTTP requests (based on if you used all of the services.)
sharingbuttons.io/

We started using CSS to emulate the look-and-feel of social media, search & pay widgets in the early 2000's as a way to improve both webperf and privacy.

CSP-wise, we approached this feature by creating a CFML CFC to perform post-page transformations to parse the output buffer using jsoup only if it hadn't flushed yet. It automatically output valid HTML, optimizes the head/body sections (defer, relocate JS to head/footer, modernize for HTML, etc), adds unique a11y hints & attributes where needed and identifies whitelisted social media hosts to automatically inject inline nonces & CSP headers into the HTTP response. (We also set up our own Taffy endpoint for collecting CSP errors.)

Collapse
 
grahamthedev profile image
GrahamTheDev

To further improve performance an inline SVG will save a network request for each icon and it will be much smaller.