We recently added sharing buttons to the bottom of each post by using the Sharing widget that comes with the Jetpack by WordPress.com plugin. Jetpack gives us the ability to use features from WordPress.com in sites built from WordPress.org (for the rundown of WordPress.com vs. org, click here). WordPress.com is notorious for being very basic and limited. However, it actually has some pretty sweet features including a great stats system and of course, sharing buttons!
What I love about the sharing buttons is that they are so customizable. You know how some social media icons or buttons are just distracting? There’s like a big blue “F” for Facebook and a big red “P” for Pinterest and suddenly you’re like, whoa what happened to my cute, well-branded blog design? The Jetpack sharing buttons let you use simple links or even neutral-colored icons (see the bottom of this post to check out how we used them). I’m going to walk you through an example of how one might customize these buttons, but of course change up the fonts and colors to match your own unique theme. :)
Here we go! You can install the sharing buttons by first installing Jetpack by WordPress.com. In your WordPress Dashboard, choose Jetpack > Settings. Find the “Sharing” section and activate those bad boys. You’ll be able to decide on a few details like which social media sites you want to include and how you want to format the links (icons? no icons?). Once you’ve made these decisions, you can go over to your CSS editor and add some codes to beautify your icons. You can copy and paste the CSS codes below (not the titles) and change the text I bolded to make it your own style.
Edits Title of Widget
div.sharedaddy h3.sd-title {
margin: 0 0 1em;
display: inline-block;
line-height: 1.2;
font-size: 11px;
font-weight: 400;
font-family: Trebuchet MS;
letter-spacing: 3px;
}
Controls Spacing Between Title & Buttons
.sd-content {
margin-top: 10px;
}
Removes Share Count (optional)
.sd-social .sd-button .share-count {
display: none;
}
Edits Actual Share Buttons
.sd-social-text .sd-content ul li a.sd-button {
text-decoration: none;
display: inline-block;
margin: 0 5px 5px 0;
font-size: 11px;
font-family: Trebuchet MS;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 400;
border-radius: 0; (change this to 50% for rounded edges)
color: #fff;
background: #C7B041;
border: 2px solid #C7B041;
box-shadow: none;
text-shadow: none;
line-height: 23px;
padding: 5px 10px;
}
Edits Hover State of Share Buttons
.sd-social-text .sd-content ul li a.sd-button:hover {
background: #fff;
border: 2px solid #C7B041;
}
.sd-social-text .sd-content ul li a.sd-button a:hover {
color: #fff;
}
Here is the result!
Complete with hover effects:
Note: These codes work best if they’re placed in the “Edit CSS” section under “Appearance” rather than “Editor”.
If you try out this tutorial, leave a link to your site! I love seeing how different people customize these things. Hope you’re all enjoying the week! :)
Maritza says
YAY! Thank you so much for this!!
Jennifer says
You’re so welcome Maritza! Thanks for suggesting it! :)
Maritza says
I finally customized my sharing buttons. Thanks so much again, Jennifer!!
Jennifer says
I just went over to your blog and I love how you customized them!! So perfect!
Madam ZoZo says
Thank you for a very helpful and easy to follow tutorial!
Abby says
Umm… how did I just find you?!? Thank you Twitter recommendations! I will be blogstalking for about a week! Thank you so much for the amazing info! It will be so helpful and appreciated! :)
Love finding people who like to share knowledge! They are hard to find these days!
Catherine says
I was just wondering how to customize my sharing buttons. In fact, I started a CSS/HTML class at Codecademy this week… but you explained this so well! So happy I stumbled upon your site!
Jennifer says
Oh that’s wonderful! So glad this post came in handy. :)
Ginngi says
This is PERFECT! Thank you so much for creating this.
Jennifer says
You’re so welcome, Ginngi!! :)
Aja Marie says
This worked like a charm. However, is there a way to display the share count. I saw your code for removing it. Thank you
Jennifer says
Hi Aja,
Sorry for the late reply! The share count will automatically display if you don’t add the “display: none;” code. Here’s a code snippet to get you started customizing it:
.sd-social .sd-button .share-count {
background: transparent;
color: #000;
border-radius: 10px;
display: inline-block;
text-align: center;
font-size: 10px;
padding: 1px 3px;
}
:) hope that helps!
Lily Liseno says
THANK YOU. It’s so much harder than it should be to find a way to customize sharing icons, thanks so much for making it easier!
Jennifer says
You’re so welcome Lily!! Happy this was helpful! :)
Ngoc says
I’m learning so much from all your tutorial.
I think I followed your instructions and still got the default share icons that goes with my Divine Theme from Restored 316 Designs. It also uses the Jetpack share icon buttons. I’ve included a link so you can see what I mean.
http://shabbymintchicparty.com/how-to-make-mini-bunting-from-free-paint-samples/
Also, it would be so great if you could do a tutorial on how to make a subscription box with the Name, Email and Submit button on the same line within a colored rectangle. I’ve looked everywhere and can’t find a good tutorial!
Jennifer says
Hmm interesting! Did you insert the CSS codes into the Edit CSS page?
And as it turns out, a subscription box tutorial is next on my list! Keep an eye out for it in the next week or two. :)
Ngoc says
Yes. I did include the css code in my edit Css page. Will have to play around and see what happens. Maybe I need an extra code to override the current one?
I look forward to reading your subscription box tutorial.
Jennifer says
Hmm, it might have something to do with the codes already written in your theme. If you add “!important” after each line of code (before the semi-colon) it should override the previous coding. Example – background-color: #fffff !important;
Also, I posted a subscription box tutorial today! It’s for the Jetpack subscription box only, but we’ll be doing some different variations of subscription boxes in the future. :)
Eliannah says
I just used this to style my share icons – I LOVE the tutorials you share, they’re so easy to follow along with and tweak to your own style. Thank you!
I’d like to explore styling the # of shares bubble, but until then I love the new look.
Lauren says
So, I’m trying this for my blog, but I can’t get the text colors to change to white? I changed all of the #fff to #ffffff. I’m not very savvy with this stuff, but I thought that would fix it. Where can I make it change to white? Lau
Jennifer says
Hi Lauren! Just make sure the code looks like this:
.sd-social-text .sd-content ul li a.sd-button {
color: #fff;
}
if that doesn’t work try this:
.sd-social-text .sd-content ul li a.sd-button {
color: #fff !important;
}
Email me for extra help if it’s still not working! :)
Lauren says
Thank you so much!!! That fixed it. Thank you for your quick response and for your many helpful tutorials!
Marco says
Hi, i have a problem, i can’t set the title in the center position and not even the buttons, could you tell me why? i’m getting crazy
Jennifer says
Sorry you’re having trouble! Try this code:
div.sharedaddy {
text-align: center !important;
}
ilaria biccari says
Hi Jennifer,
I am so happy to have stumbled on this post! Everything seems to work apart from adding the widget title: Share this post?
Im not sure if you would be able to assist?
Thanks so much!
Jennifer says
Hi Ilaria!
If you go to Settings > Sharing in your WP dashboard, you’ll see a section that says “Sharing Label”. There you should be able to change the widget title to whatever you’d like it to be. If that doesn’t work, send me an email and I’ll try to help more! :) hello@theblogmarket.co
Shehla says
This is great! One question though: how did you center everything?
Leah says
Yay this is awesome! Thank you!
How do you make them the same width though? Or sort of justified so they fill the whole width of the post. Anyway, I’ll keep tinkering. Thanks again! :D
Demi says
Thank you so much! I’m a beginner, this was easy to figure out and turned out perfect!!
venkatesh says
i want to change the text in the button
Jessica Walters says
This post saved me!
Thank you so much!! :)
Jennifer says
You’re so welcome!! :)
Danielle says
Thank you for all of this! Pinned it! This helped me so much :)
Kymmie says
Hi, do you know how to customize the Follow button of Jetpack? If not, just make it to the center? Thanks!
Jennifer says
Hi Kymmie! I’m not sure which follow button you mean. Feel free to email me at jennifer@earlgreycreative.com :)
Kymmie says
The color of the font isn’t working. I want to have white font because the background color I chose is dark or black.
Kim says
Thank you! Is there a way to center those buttons? I hate that they are over to the left instead of stretched out and centered. Thanks again!