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 all the external network connections required to retrieve the share-counts.
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. To name a random few:
- DB8 Social Share by Peter Martin
- BW Social Share for Joomla!
- And more, just look in the JED
If you study these buttons closely, you will see that they are actually set-up extremely simple. They're basically buttons with a link reference. You might just as well build them yourselves, directly in you 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):
<?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. I found 2 of them:
- Fast Social Share (from the same developer as the excellent Jsitemap). Buttons are only activated after the user scrolls to the bottom of the page or hovers over them
- 2CSB - 2 Click Social Buttons from Viktor Vogel's Kubik-Rubik extensions. You first have to click them to make them active
Ampz by Roosterz
Recently I checked out Ampz Social Sharing by Roosterz. Actually, I really liked it, and this is currently the extension that I am using right now, as you can see in the sidebar to the right. It has the ideal combination of nice looks, functionality and performance for me, and it is still capable of showing count-statistics...
Actually, performance was my main concern: if it cost me performance, I would not use it, but this was no problem: I still have a 100% performance score in Google Pagespeed and Pingdom Tools and it only adds 2 small resources to my site. Ampz achieves this by a smart caching solution: it does not retrieve the counter-stats on every pageload, but it only does so once an hour or whatever timeframe you set it, very clever. Other reasons why I like it:
- Support for many components. It detects which components have been installed and you can activate it per component
- You can optionally show counter-stats or not (for Facebook, read this post)
- It can even show Twitter-counts due to a clever integration with Newsharecounts.com.
- Separate mobile design
- Cache settings for best performance
- And of course, nice design options, with the options to show the buttons in the sidebar, inline or as a fly-in-box
By the way, if you start configuring the plugin you may be a bit surprised due the dashboard-like configuration you see instead of the classical Joomla plugin tabs. Nice, but I wouldn't have minded if it had stuck to the classical look.
What is also very nice is that Ampz provides a nice dashboard with your sharing statistics so you can easily track which module-positions and pages result in how many shares:
The only downside I could find is that it isn't free. You can get it for €27 up to €97 for life-time access. For demo-purposes of this blogpost I will leave the counter-stats on for a while, but since you guys are not very active sharers I will probably disable the counts later. You can download the extension here.
Have fun sharing ;)
