The Easiest Way To Add Custom Sharing Buttons To Your Site

tech
tech

Social sharing buttons that match your site is becoming all the rage but it's not exactly a straightforward thing to accomplish. Up until now you only 2 options:

  1. Have a developer spend time building integrations into each social network's API so you can use custom buttons for sharing.
  2. Give up on completely custom sharing buttons and use either the default sharing buttons provided by each network or decide between which 3rd party buttons you like the most (AddShoppers/AddThis/ShareThis/etc).

However, we've created a third option that's both easier AND more powerful than legacy methods.

Option #3: Customize AddShoppers Sharing Buttons using your own images/icons using the quick guide below. All you need is one image containing your sharing buttons and some code that you can copy/paste from below (and a FREE AddShoppers account, if you don't already have one).

So, that's easier, but why is it more powerful? Because not only do you get custom sharing buttons, you ALSO get powerful analytics in one dashboard that track your sharing activity to conversions, identify influencers, and more. Plus, you can easily plug into any of our other apps to add even more social integrations to your site and put your data to work.

Examples: We've prepared some flat-designed sharing buttons as an example (by the way, you are free to use them if you want). See the example standard buttons below and the floating buttons on the left (they're different from the normal ones across our site, in case you haven't noticed yet).

Choose size:

Here's what you need:

1. Icon Sprite Image

Make an image sprite with your social icons following this example (you are free to use this image if you want). MAKE SURE YOU MAKE YOUR ICONS IN THE SAME ORDER AS THIS IMAGE. If there are any icons you don't plan to use, you can just leave a blank space of the correct size.

Each icon should be 32x32px and the entire sprite image should be 512x32px.

Each icon should be 24x24px and the entire sprite image should be 384x24px.

Each icon should be 18x18px and the entire sprite image should be 288x18px.

2. CSS

Add this to your CSS, making sure to add the URL to your custom icon sprite image.

.share-buttons .s24 {
   /* update the URL on the next line to your custom icon sprite image */
   background: url('custom-icons-24.png') !important;
   font-size: 0 !important;
}
.share-buttons .less.s24 { background-position: 0 0 !important; }
.share-buttons .more.s24 { background-position: -24px 0 !important; }
.share-buttons .addshoppers.s24 { background-position: -48px 0 !important; }
.share-buttons .email.s24 { background-position: -72px 0 !important; }
.share-buttons .facebook.s24 { background-position: -96px 0 !important; }
.share-buttons .google.s24 { background-position: -120px 0 !important; }
.share-buttons .twitter.s24 { background-position: -144px 0 !important; }
.share-buttons .kaboodle.s24 { background-position: -168px 0 !important; }
.share-buttons .pinterest.s24 { background-position: -192px 0 !important; }
.share-buttons .polyvore.s24 { background-position: -216px 0 !important; }
.share-buttons .stumbleupon.s24 { background-position: -240px 0 !important; }
.share-buttons .tumblr.s24 { background-position: -264px 0 !important; }
.share-buttons .wishpot.s24 { background-position: -288px 0 !important; }
.share-buttons .linkedin.s24 { background-position: -312px 0 !important; }
.share-buttons .paypal.s24 { background-position: -336px 0 !important; }
.share-buttons .wanelo.s24 { background-position: -360px 0 !important; }
.share-buttons .social-icon { vertical-align: top; }

3. Sharing Button Code

Copy and paste the following code depending on which type of buttons you want (floating or standard). These include all networks by default, but you can remove ones you don't want from the "data-buttons" attribute.

Floating:

<div class="share-buttons share-buttons-tab" data-buttons="twitter,facebook,google,email,pinterest,stumbleupon,kaboodle,tumblr,polyvore,wanelo" data-style="big" data-counter="true" data-hover="true" data-promo-callout="true" data-float="left"></div>
<div class="share-buttons share-buttons-tab" data-buttons="twitter,facebook,google,email,pinterest,stumbleupon,kaboodle,tumblr,polyvore,wanelo" data-style="medium" data-counter="true" data-hover="true" data-promo-callout="true" data-float="left"></div>
<div class="share-buttons share-buttons-tab" data-buttons="twitter,facebook,google,email,pinterest,stumbleupon,kaboodle,tumblr,polyvore,wanelo" data-style="small" data-counter="true" data-hover="true" data-promo-callout="true" data-float="left"></div>

Standard:

<div class="share-buttons share-buttons-panel" data-style="big" data-counter="true" data-oauth="true" data-hover="true" data-promo-callout="left" data-buttons="twitter,facebook,google,email,pinterest,stumbleupon,kaboodle,tumblr,polyvore,wanelo"></div>
<div class="share-buttons share-buttons-panel" data-style="medium" data-counter="true" data-oauth="true" data-hover="true" data-promo-callout="left" data-buttons="twitter,facebook,google,email,pinterest,stumbleupon,kaboodle,tumblr,polyvore,wanelo"></div>
<div class="share-buttons share-buttons-panel" data-style="small" data-counter="true" data-oauth="true" data-hover="true" data-promo-callout="left" data-buttons="twitter,facebook,google,email,pinterest,stumbleupon,kaboodle,tumblr,polyvore,wanelo"></div>

Also, don't forget that you need your Social Analytics code on all pages as well (you can get this from your AddShoppers dashboard).

4. Let us know what you did!

We'd love to see your custom sharing buttons! If you add some custom sharing buttons to your site, let us know in the comments.