Fast loading social share buttons without javascript or plugins

The following tutorial will attempt to help you implement social share buttons without javascript. These buttons are a very popular feature of many websites, they allow visitors to click on a button and distribute the content in different social networks.

So far, so good right?… The problem is that those buttons will add additional javascript and css files to your website. Some drawbacks of the extra scripts are, slow loading times and low performance scores, because the javascript and css files are distributed in different domains.

At the end the visitor needs to wait first for the website, then for the scripts you are loading locally, then the scripts coming from a different location, all of those things slows things down a lot.

As reference, I tested my front page with an extension for my browser called Yslow for Firefox and for Chrome. With it you can check which items are taking longer to load, what is being loaded on the head, footer, etc.

My website score before adding any buttons was a 91 with Yslow, by comparison after loading several different plugins, it went down between the mid 70’s, to the mid 80’s range depending of the plugin in use. Some people might think that score is not so bad, but the truth is that if something takes long to load, the visitor might just forget about it and leave.

Another thing worth mentioning is that those buttons were not even in my front page, only inside each of the posts I have. But the plugins were loading unnecessary javascript everywhere.

Also check this website dedicated to “Speed Awareness Month“, it has lots of tips and great articles to learn from.

Credits

Looking around I found a few resources which I want to mention first, each one of these really helped me implement my final solution. First “Create Your Own Fast Social Sharing Buttons For WordPress“, in that article you will get the core of how the links work for several social networks.

The next since I am using the Genesis framework, is “HowTo: Add New Menus to Genesis Themes“. We are not adding a menu per se, but it was a good article that pointed me in the right direction, about creating the “external” file and how to add the section inside Genesis where I wanted the share buttons.

Check both of those articles, particularly the the first one, it will help you regardless of the framework you are using.

What you need

To make and edit the files needed for these simple social share buttons without javascript, you need a plain text editor, the code below, and that’s it. In all you need to create one file, and edit two files you already probably have, functions.php and style.css.

The first thing you need to do, is to create a new file in your child theme directory called “social_sharing.php” or anything else you want to name it, in it you need to add the following code.

Those links add a way to dynamically insert the title of the article and create a short link instead of a long one. For the twitter link make sure you change @kenmata to your username, otherwise I will get a mention from your links, not that I mind 😉

Update 03/24/13. The code for the Google+ button needed to be changed because, while it was taking the user to their G+ account, it was not loading the url and doing an infinite loop. The code below should work now.

<div class="social-button-container"> 
<div class="share_top_text">Share this post on:</div> 
<div class="SocialCustomMenu"> 
<a class="scmTwitter" href="//twitter.com/home/?status=<?php the_title();?> - <?php echo wp_get_shortlink();?> via @kenmata "title="Tweet this!">Twitter</a>
<a class="scmFacebook" href="//www.facebook.com/sharer.php?u=<?php the_permalink();?> - <?php echo wp_get_shortlink();?> "title="Share on Facebook!">Facebook</a> 
<a class="scmGoogleplus" href="//plus.google.com/share?url=<?php the_permalink(); ?>"onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false; "title="Share on Google +!">Google +</a> 
<a class="scmPinterest" href="//pinterest.com/pin/create/button/?url=<?php the_permalink();?> - <?php echo wp_get_shortlink();?> "title="Share on Pinterest!">Pinterest</a>
</div> 
</div>

The code above will add four share buttons, one each for Twitter, Facebook, Google + and Pintrest. Those are a good starting point I think, add more or take some out depending on your needs. Remember that a great reference for the different networks out there is here, just make sure to adapt the code accordingly.

After that you need to find the spot where you want to add your buttons. Personally I wanted to put them before the post, and after it. That way the visitor can find them and use them in either spot.

Since I am using the Genesis framework, I have several options to choose from, I used this great Genesis Visual Hook Guide.

To make that work you need to add the following to your functions.php file, below is the code for that.

/** add social sharing links before the content */ 
add_action('genesis_before_content', 'social_sharing_top') 
function social_sharing_top() { 
// the line below will make sure the links show only inside a post 
// if you take it out then links will appear on each post and page in your site 
if ( ! is_single( ) ) 
	return; 
require(CHILD_DIR.'/social_sharing.php'); 
}
  
/** add social sharing links after the content*/ 
add_action('genesis_after_post_content', 'social_sharing_bottom'); 
function social_sharing_bottom() { 
// the line below will make sure the links show only inside a post 
// if you take it out then links will appear on each post and page in your site 
if ( ! is_single( ) ) 
	return; 
require(CHILD_DIR.'/social_sharing.php'); 
} 

Notice that the comments in the code above mention that taking out or modifying “if ( ! is_single( ) )”, will change where the buttons show up. If you don’t understand that piece of code, it is something called conditional tags.

Styling the social share buttons

The next thing left to do is to style these links to make them look a bit more familiar. For that I wanted to use simple boxes with the main colors of the different networks that I am choosing. Go ahead and change it to your liking. Some ideas could be to use a bold capital letter plus the color background instead of the full name, or an image replacing those with graphics, but I just want simplicity.

The css for that is the following.

/* custom social sharing buttons */ 
.share_top_text{margin:0 0 5px 5px} 
.social-button-container{margin:15px 0 15px;border-bottom:none;} 
.SocialCustomMenu, .SocialCustomMenu a, SocialCustomMenu a:visited{display:inline;padding:5px;color:white;text-decoration:none;font-size:0.95em;} 
.scmTwitter{background-color:#7cd5fd;border:solid 1px #c1c1c1;} 
.scmFacebook{background-color:#45619d;border:solid 1px #c1c1c1;} 
.scmGoogleplus{background-color:#af291d;border:solid 1px #c1c1c1;} 
.scmPinterest{background-color:#cb2027;border:solid 1px #c1c1c1;}

Extras

From reading the first article I used as reference, the author found out that particularly for Twitter, when you click on the share button, the output is rather long. Since the article was written back in 2010, at the time he used Bit.ly which I also use for other things. The nice thing about using bit.ly is that you have nice analytics for each link, you might need those or not. But I didn’t use Bit.ly after all, keep reading why.

After more digging around, and instead of adding more work I found out that WordPress has it’s own built in way to create short urls. Using wp_get_shortlink. If you pay attention to the first piece of code with the links, I used it for Twitter and it seems to work fine. I added that piece of code to the rest of the links at the end, but in the spirit of customizing things, take them out if you want.

The other links don’t really need it, since you don’t have the 140 character limitation. So keep it in there or take it out, your choice.

You can also check these two articles to choose a method that works for you: “Create Automatic Short URLs for Your WordPress Posts with WP Bit.ly” the other is “Using Bitly URLs in WordPress and use them with Twitter and GooglePlus Scripts“.

Conclusion

As you can see this solution is really simple. Images are optional, and of course you don’t get the fancy count boxes, but again my goal here is to decrease loading times, if counters and images are important to you, then this article might not help much.

I had fun implementing and learning a few new things in the process, hopefully you will find it useful too. If so, please share it!!