Social media integration: How to add social media icons to your website
June 19, 2015 1:36 pm
Social media sharing buttons are everywhere: strips of colored icons that can be found on nearly every blog, which allow the visitor to a site to share a link to the webpage on social media sites such as Twitter, Facebook and Instagram.
Social media icons are easy to add to your site: in many cases it’s as simple as copying and pasting a line of code into your webpage, or if you’re using a content management system (CMS) like WordPress or Drupal, then you can add them by activating a plugin.
A word of warning though: although sharing button code snippets might look harmless, very often when added to your webpage, these snippets will load extra code into your webpage, bloating it, slowing it down and making it take longer to load. It’s not unusual for some of the social media sharing services to add up to 2MB and more. That’s a lot, considering some pages are less than 100KB in size. This means that adding social media icons to your page can potentially blow it up by 20 times.
How to add social media buttons to your site
1. Via a social media sharing service
Generally, the process is like this:
- Sign up for account with sharing icons service provider
- Configure the style, layout, and functionality of the sharing buttons
- Generate code snippet(s)
- Copy code snippet(s) into your own website
Step 1. is sometimes optional, since not all service providers require you to sign up for an account. The services that do require you to sign up tend to offer extras such as analytics. Some of them have premium or pro tiers, which include value-add services such as further configuration.
The advice we’d give here is that if you must use one of these services, then go for a free one, and preferably one that doesn’t require signing up to an account.
2. Install Manually
There has been some backlash in technical circles around the amount of page-bloat and performance issues that social media sharing icons can cause. As a response, and number of people have published their own homegrown social media icons, which just include the basics, and are nice and lightweight with no impact to the performance of your site.
The drawback: it’s a little more technically involved, since the code and icons must be uploaded and installed to the correct place on your website manually. You will also need to add the right code for each different social network separately. This might be too much work for some users, but if you are technical, or have someone technical to help you, then this is the preferred option.
Some examples and tutorials of this approach are:
- Ridiculously Responsive Social Share Buttons
- How to add fat free sharing buttons to your page
- Responsive share buttons with CSS and jQuery
3. Install via a CMS plugin
If you are using WordPress or Drupal, you will have an option to add sharing icons via a plugin (WordPress) or module (Drupal). These plugins and modules simply wrap up the code from options 1. and 2. above.
Once again, the main thing to be careful of is that the social media icon code is not bloating your web page with unnecessary functionality.
Some WordPress Social Media icons can be found here:
Drupal social media icon modules can be found here:
Keep it simple!
In conclusion, first think whether you really want them or not. Sure, social media is a very good source of traffic to your blog. Whether or not adding social media buttons will help is another question. If you do decide to add them to your site, make sure that the ones you are using do not increase your page size significantly by adding unnecessary bells and whistles.
If you’re not sure if your choice of social media integration is affecting performance, try to test you pages with an online testing tool with the sharing icons enabled, and disabled, and check the difference in page size.
Main image: mkhmarketing