Fastest Social Media Sharing Plugin Without The Bloat

One thing I have never understood is why these social media sharing plugins like Share This and Add This take so long to load. Don’t get me wrong, these are great plugins with a ton of features. However, you know what is more important than a ton of features? Increasing conversions.

Two  key elements to increasing conversions that I will focus on in this post is limiting options to the most important social media sites and speed.

First, we are lazy. Our brain tends to choose the path of least resistance, so if we are presented with a ton of options, we tend not to make any decision at all. There are a ton of studies on this, but unbounce and KISSmetrics have good articles that explain this very will with plenty of data.

A second element that will increase conversion rates is page speed. This has also been well documented by several studies. Google has been a proponent of this for years. Here is one study they posted in 2009. Moz also has a good article on page speed here.

Because of these two factors, I created a WordPress plugin to add social icons in a way that is extremely lightweight and fast loading. I did not add a ton of options, because you don’t want them. What you really want is the top two to four social sites places strategically to increase shares.

So, without further ado, here is the code you can add to your site:

<div class="share-icons" id="social">
	<a class="share facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"></a>
	<a class="share twitter" target="_blank" href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php echo urlencode( get_the_title() ); ?>"></a>
	<a class="share google" target="_blank" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"></a>
	<a class="share linkedin" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php echo urlencode( get_the_title() ); ?>"></a>
</div>

And here is the CSS to go with it:

#social {
	clear: both;
	height: 45px;
	margin: 0 auto;
	width: 70%;
}

#social .share {
	background-image: url("http://nmtriallawfirm.com/wp-content/themes/mukerjilaw/images/share-icons.png");
	display: inline-block;
	height: 24px;
	width: 24px;
	padding: 0;
	margin: 0 1px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

#social .google { background-position: 0 0; }
#social .facebook { background-position: -26px 0; }
#social .twitter { background-position: -52px 0px; }
#social .linkedin { background-position: -78px 0px; }

#social .google:hover { background-position: 0px 24px; }
#social .facebook:hover { background-position: -26px 24px; }
#social .twitter:hover { background-position: -52px -24px; }
#social .linkedin:hover { background-position: -78px 24px; }

Last, here is the image used to create the icons.

I also created a plugin you can download and easily install. You can download it below.

Coming soon.