Add Social Buttons To Your Pages

Since releasing the Foobar WordPress plugin, a lot of people have been asking how I implemented the social buttons that show in the Foobar on the main plugin page. So I am going to walk you through doing it. Credit must go to Joost for starting this off. I just tweaked his code a bit, so that it is mostly done with javascript.

Some Ground Rules

My goal with adding the social buttons was page speed. I have noticed that some websites that include social buttons are very slow to load, and didn’t want that. I wanted my content to load first and foremost, and as quickly as possible. Let’s be honest, you only like or tweet something AFTER you have read it, so I don’t care that the buttons load a little after the content. Maybe it even makes more sense for them to load a little later. So the buttons must load AFTER the page has finished loading. I also wanted the following buttons to show:

• Facebook’s like button
• Twitter’s tweet button
• Google’s +1 button
• LinkedIn’s share button
• StumbleUpon’s stumble button

Here is a quick pic of the end result :

And here is a live demo.

Some jQuery Code

The only way to get the buttons to be injected into the page after the page has loaded is by using javascript, so here is some jQuery goodness to tie it all together:

Don’t forget to replace the URL and the Facebook app ID with your own. You can also set the URL to window.location if you want it to use the current URL.

Add This jQuery In WordPress

There is an easy way to add this to your WordPress page or post, by using a plugin to include scripts and CSS into your posts or pages. I have gone through quite a few of these plugins, and have settled on this gem coded by Daniel Imhoff called Specific Files. It allows you to easily add your own custom javascript and CSS stylesheets.

Add Some CSS

Using the Specific Files plugin, add some custom CSS to the page like so :

ul.socialbuttons { height: 30px; padding: 0 !important; margin: 0 auto; }
ul.socialbuttons li { padding: 0 9px 0 0 !important; float: left; list-style: none !important; }


Adding Social Buttons To Your Foobar

I don’t think this tutorial would be complete if I did not outline how to add the social buttons to your Foobar, seeing that so many people have been asking for it, so here are the steps:

1. Add this custom HTML to your Foobar (in either the left or the right hand side) :
   

   <div id="social_target"></div>

2. Set the width of the left or right side to be 500px (depending on which side you added it to)
3. Include the above jQuery script in your page. Remember to replace the URL variable with your own. And don’t forget your facebook app ID
4. Include the above CSS in your page to style the buttons all in a row.
5. Include some custom CSS in your page to position the buttons nicely within the Foobar:
   #social_target { margin-top: 5px; margin-left: 5px; }
   (Either add the above code to an existing stylesheet, or add it using the Specific Files WordPress plugin mentioned above.)

Check out the demo, where I followed the above steps exactly. Enjoy your social buttons!