Themergency fooplugins.com

Add Social Buttons To Your Pages

| 14 Comments

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!

11 comments
terraling
terraling

Hi

 

I found your article after searching for solutions to problems I was having with social buttons, but you seem to be having similar problems.

 

Your demo page doesn't work at all in Firefox (Mac), works correctly in Safari (minus the SU button), and in Chrome only shows the google and linked in buttons.

 

I reproduced your code with a very simple test page that has very little else on it, and uses only the facebook, twitter and google buttons.

 

When I open the file on my local hard drive it works fine in Chrome but shows only the google button on my server.

 

In firefox it works fine both locally and on my server.

 

In Safari it works fine.

 

I daren't look what happens in IE.

 

Any thoughts as to what is causing the wide discrepancy in browser behaviour?

 

(You can see the test file at www.escondrijo.com/test.html)

 

Thanks

themergency
themergency moderator

I just updated the post - I had forgotten to include the CSS that styles the social buttons all in a nice row

wpstudio
wpstudio

Love this tweak for foobar. Thanks for writing this up.

daclements
daclements

Brad, did you notice much of an increase in page load speed? I used to have buttons like this on my blog, but removed them in favour of a faster page load? Did you notice any difference?

humanv3
humanv3

So, only add <div id="social_target"></div> into the html for the left side? When I do that only the small icons are still visible. Am I missing something?

impukax
impukax

argh, i'm tired, don't know how to add the social button. I have tried with Specific FIles plugin or just insert the script manually in header file however the button doesn't display.

rikardjr
rikardjr

I tried this and unfortunately it only added the facebook like button. Could you tell me what I might be doing wrong? The site is thebathbusiness.com. Thanks.

Melbourne Local SEO
Melbourne Local SEO

Looks good, I want it on all my sites! Ive implemented the JS code alright, but seem to be having problems with the html code to place the buttons. Any hints? Additionally i have noticed that chrome and FF display the demo ok, however IE7 only shows the linknin button Cheers Steve

tranite
tranite

The custom HTML to use?

themergency
themergency moderator

@daclements using this jquery method increases the page load speed dramatically, as it only starts downloading the social javascript files (and then rendering the buttons) AFTER the page has finished loading. So your users do not see a decrease in page load times at all, but can still share your content