Social media play an increasingly important role and for many, integrating social media into your site is very important to spread your message. Unfortunately, though, the share buttons used to do so often slow down your site due to all the external network connections required to retrieve the share counts.
Note that social media buttons are not as widely used as they used to be a few years ago when this article was written. But the content of this article still stands.
For every social media channel, multiple connections need to be set up to retrieve those stats, and usually, this is done on every separate page view. You may not realize this, but for many sites, the share-buttons alone make up more than 50% of the page load time. If you realize how important performance is, this is insane. Especially Facebook share-buttons add up to the load. Just look at this snippet from a performance test (using Pingdom Tools) of a random site with share buttons:
Seven of those connections originate from Facebook-owned domains, and all this just to display a simple button... And you can count on them to slow down your site. So, first of all, get rid of these standard share buttons. But how do we still offer our users the means to share your content? There are dozens of alternatives, but let's discuss the main categories here:
Share buttons without counters
Especially if you have only a few shares, why in the first place do you want to show these counts? Having just a few of those will not impress anyone and probably it will not make anyone more likely to click on them. Twitter even stopped providing counts, probably for this reason.
So if you just want to have share buttons for sharing purposes, a really simple button is enough. These buttons do not require any connections to social media until you actually click the button to start sharing. There are quite a few extensions in the JED that achieve exactly this.
If you study these buttons closely, you will see that they are actually set up extremely simply. They're basically buttons with a link reference. You might just as well build them yourselves, directly in your articles or as a simple module. I often do so by building a custom HTML module using some simple PHP code, inserted with Nonumber's Sourcerer extension. With the PHP code, I retrieve the current page's Page Title and URL, which I then insert as data in the share button. The full code to build a share button is the following (note: you have to put the Sourcerer tags around it, but I omitted these, as otherwise the code is interpreted by the plugin). Note that this code example is for Joomla 3, so for Joomla 4, you might have to rewrite slightly, but the principle still stands:
<?php
$doc = JFactory::getDocument();
$page_title = $doc->getTitle();
$page_url = JURI::current();
?>
<a class="button" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=400');return false;" href="http://www.facebook.com/sharer.php?u=<?php echo JURI::current(); ?>"><i class="uk-icon-facebook "></i> Share</a>
<a class="button" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=400');return false;" href="https://twitter.com/intent/tweet?url=<?php echo $page_url; ?>&via=@simonkloostra&text=<?php echo $page_title; ?>"><i class="uk-icon-twitter "></i> Tweet</a>
<a class="button" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" href="https://plus.google.com/share?url=<?php echo JURI::current(); ?>"><i class=" uk-icon-google "></i> Google+</a>
This results in the following buttons:
Really simple, and no performance loss ;) Just click them to notice that they actually result in a fully-functional pop-up to share.
Share buttons that execute delayed
If you really like the counts shown in your buttons, there are also a few extension providers that offer share buttons that only connect with the social networks after a delay. This delay is usually a user-initiated action, like a hover or a scroll. If this action does not take place, nothing happens. Also, if the user action takes place, the page is already loaded, and the connections to Facebook and Twitter do not make your users suffer.
