Add simple social sharing buttons to your wordpress site that won’t slow it down
Why should you use this plugin?
Craig Buckler wrote a good article on Sitepoint: The Hidden Cost of Social Sharing, which describes the extra weight that including social sharing buttons adds to your website. Just a single share button can add quite a bit of bloat. Adding several for different social networks can cause quite a noticeable slow down, especially for low bandwidth users (e.g. those on mobile connections).
Above you can see the HTTP requests made just for the default facebook like button code as provided by facebook. A number of HTTP requests, downloading, and parsing of downloads, which is all unneeded for the basic functionality of sharing a link.
Craig then followed this up with an article on How to Add Fat-Free Social Buttons to Your Pages. This article covers how add social sharing buttons to your site with just a few lines of code.
I’ve now made these into a WordPress plugin, so you can easily add social sharing buttons to your wordpress based website or blog without adding unnecessary bloat that would slow your site down.
In its default configuration the plugin will add share buttons for Facebook, Twitter, Google+, LinkedIn, and Pinterest. Additionally there are share buttons for Reddit, VKontakte, and Delicious, but these are not shown by default. This configuration adds 3 HTTP requests to the page (less than Facebook’s like button by itself):
- Image sprite of the buttons – 2355 bytes
- CSS – approx. 800 bytes (depends on plugin settings and how long your domain name is).
- JS – 981 bytes
With a properly configured server these will all be cached, so they are only requested once per visitor. If you use a CSS/JS concatenation plugin as well, then the buttons image will be the only extra HTTP request produced. (The more HTTP requests, the slower the page will be).
The plugin offers a range of options, for example you can change the button size, which buttons to show, and whether to position the buttons above or below the article. I hope that the default settings will suit most people, but if you want to change a setting, you can.
At the top of the admin settings page is a preview of the share buttons. The PNG8 versions of the buttons are produced with a white background, so they look fine against a page that also has white background, but might not fit in so well with coloured backgrounds. If you want to use the PNG8 buttons (they have a smaller filesize than the PNG32 buttons), you can change the background colour of the preview to match that of your theme to see how they will appear.
The size of the buttons and position of the title in relation to the buttons is all controlled via CSS. CSS presets that cover various options are provided, with the additional ability to control the look of the buttons by editing the CSS.
Installing the plugin
To install the plugin, you can download it, and then go to Plugins > Add New in your wordpress admin area. At the top of the Install Plugins screen choose ‘Upload’. Click the browse button and find the plugin zip file. Then click the install button.
Alternatively you can manually upload the zip file to your web server and unzip it in the wordpress plugins folder.
Then just go to the plugins screen that lists all the installed plugins. Find xoogu Simple Social Sharing (it should be near the bottom of the list), and activate it.
To upgrade from a previous version of the plugin, please deactivate the old version using the WordPress admin area. Then manually delete the plugin folder (e.g. using FTP), don’t delete it using the WordPress admin area. Then in the WordPress admin area choose to add a new plugin by uploading (the same process as installing the plugin for the first time).
Doing it this way ensures that the plugin settings will be carried over from the old version to the new version.
Feedback is always appreciated. I’m especially interested in hearing:
- If something doesn’t work correctly
- If the default settings are good for you
- If you needed to change some of the settings (which ones)
- Any features you’d like to see added in the future