Add branded social sharing icons to your WordPress site

Install Jetpack on your site

First things first, you’ll need to install Jetpack on your site. (If you already have it installed — check by going to Plugins > Installed Plugins — you can skip to the next step.)
I use + recommend Jetpack for a number of reasons. One, it’s built by a great team + constantly being updated. Two, it offers a variety of useful features meaning you can install one plugin + likely remove 3 others that were single purpose. (Need to spring clean your site?) And three, it’s super easy to use.
Head to Plugins > Add New in your WordPress dashboard + click “Install Now” on the Jetpack by WordPress.com badge. If it’s not showing up on the page, you can search for it.
install jetpack on your WordPress site // tiny blue orange
Once it’s done running the installer, click “Activate Plugin.” Then you’ll see a large “Connect to WordPress.com” badge at the top of your screen, which is the last step in installing the plugin. If you have a WordPress.com account, you can enter those details + be done. (Note: this is not the same as your website login, it is specific to wordpress.com.) If you don’t have an account, click “Need an account?” to get one created.

Get Jetpack configured

As tempting as it can be to click “jump start”, I recommend that you skip that step to manually set up your new Jetpack plugin. The reason being that they will automatically activate a number of add-ons, including more than a few you may not want. It’s not that they are bad, you are the boss of your site, so why not pick + choose what add-ons you use?
To do so, head to Jetpack > Settings where you’ll see a long list of available add-ons. If there are a number that are active, start by checking the highlighted ones + clicking “Deactivate” under the “Bulk Actions dropdown + click Apply.
install jetpack on your WordPress site // tiny blue orange
For this tutorial, the only ones you’ll need active are Custom CSS + Sharing. If they aren’t already highlighted, hover over them + click “Activate”.

Custom CSS

There’s no configuration necessary for this one, so you’re all set once you activate it. This add-on gives you an editor where you can add custom styles to your theme, which is how we will set the colors of your icons on your new social sharing setup.
If you are comfortable editing your own CSS + know exactly where to do it, you can skip this add-on completely.

Sharing

Once the sharing add-on has been activated, head to Settings > Sharing to get it configured. Under “Sharing Buttons” you can click + drag any of the available services into the enabled services area to add them to your site. You can also click + drag to get them in the order that you want them to be in. Spend a minute or two getting these ready to go, but know that you can come to this same spot to change them if you ever change your mind.
For the button style, you’ll want to set it to “Icon only.” This will give you round buttons that have a colored background we will be changing in the next step. You can add a sharing label or delete the default text to leave it blank.
I like to only show the buttons on Posts, so I check that checkbox. If you want to show these buttons elsewhere, you are the boss! But again, you can come back here + change it whenever you want to.

Custom CSS code

Now you need to grab your brand hex colors for the normal button state + the hover state (when a user puts their mouse/cursor over the button). If you know your brand hex values already, you can skip the next paragraph + get right to the code.
If you aren’t familiar with your hex values, the easiest way to grab them is to open up your website in Firefox or Chrome. Then highlight text that is the color you want to use + right click to hit “inspect.”
install jetpack on your WordPress site // tiny blue orange
That will open up the code that builds your site + you’ll see a field labeled “color” with a 7 digit code starting with #. That # is mandatory, but the following 6 characters are the specific details of the color. Grab 2 from your site so that you can have a default + hover state.
Does the inspector tool overwhelm you? Head to stylifyme.com + enter your URL to get the hex values without needing to look at source code.
Now that you have your colors, go to Appearance > Edit CSS (or your area for custom CSS if you skipped the jetpack version) + paste the following code in after hitting enter/return a few times after the last */ — the text that is in the file already is something that’s best to leave as is.

.sd-social-icon .sd-content ul li[class*=share-] a.sd-button {
 background: #6ab2fc !important;
 color: #fff !important;
 }
 .sd-social-icon .sd-content ul li[class*=share-]:hover a.sd-button {
 background: #2c91f9 !important;
 opacity: 1 !important;
 }

The only code you need to change is the 2 background hex values — and maybe the color if your colors are really light. The first one (#6ab2fc) is the default icon background color, while the second (#2c91f9) is the hover color. And if your colors are really light, you can change color: #fff !important; to something like color: #000 !important; to make the icons black instead. Or get bonus points for grabbing a third brand hex value + setting the icon colors to that instead.
install jetpack on your WordPress site // tiny blue orange
Now you can head to your latest blog post, refresh the page + check out your awesome code in action!

Other Jetpack features

Since your new plugin has a bundle of awesome add-ons, it’s worth spending a little bit of time checking out all of the options. Some of the other ones that I recommend to clients, based on their individual needs, are Extra Sidebar Widgets, Omnisearch, Site Stats, Sitemaps + Widget Visibility.

Disclaimer: this tutorial will work for most WordPress sites, however each theme is unique + may have settings/styles that make adding social sharing this way an issue. If so, simply deactivate Jetpack + contact the theme creator for advice on what to do.
on your keyboard hit enter to search or esc to close