Customizing JetPack Share Buttons
First, thanks to Ruben Alamina for a bulk of the CSS code in this tutorial. I’ve modified the styling to my liking and to also make it a bit cleaner and account for a few priority issues I had when using it, such as the background-image importance included in the JetPack CSS. I’ve also removed a few of the share buttons Ruben styled in his code since I don’t use those buttons (the code below is the CSS code I use for EngageWP).
Install & Configure JetPack
The first step in the process is to obviously install JetPack. I’m assuming that you already have JetPack installed and setup, else you probably wouldn’t be looking for ways to customize the sharing buttons.
Customize the JetPack Share Buttons CSS
You can copy and paste the code below into your style.css. If you aren’t already, make sure you’re using a child theme so your styling won’t be erased when you update your theme. If you aren’t using a child theme, at least use any built-in custom CSS editor your theme provides (or use the CSS Editor in JetPack).
UPDATE (May 14, 2014): I updated the Jetpack Social Buttons CSS to include the “More” button that displays additional buttons. It was a lot smaller than the primary buttons and I wanted to make everything even. I also included a link to the raw code to make it easier to copy.
UPDATE (June 1, 2014): After a recent JetPack update, some of the CSS stopped working and some things didn’t look right. I’ve updated the CSS to account for these changes and return everything to as it was before the update.
Hello, Ren
This has been greatly helpful but I need to go a bit deeper. When a user sends an email via the email share button – we want to change who the email came from and what the email says (and hey pop in some HTML design in the email if possible). What do you suggest?
Just awesome CSS tricks to style simple jetpack sharing buttons into attractive look
Great tutorial! Thanks!
I’d like to know how can I change the edges ? I’d like to delete the rounded effect….
Look into the border-radius property in CSS.
Hi there! Thanks for this, it works perfectly! What if I want to change the icon images to my own. I know I can change them in the jetpack images folder but is there maybe instead a way I can connect them to my child theme images folder. I’m sure it’s basic coding but I just cant figure it out.
Try setting a background image and emptying the content property on the ::before pseudo-element for each link.
li.share-facebook a.sd-button::before
li.share-google-plus-1 a.sd-button::before
li.share-tumblr a.sd-button::before
li.share-pinterest a.sd-button::before
li.share-twitter a.sd-button::before
li.share-pocket a.sd-button::before
I’m very new to editing CSS code, so please forgive the silly question. I’d like to change the text that’s displayed when the cursor hovers over one of the sharing buttons. For instance, I’d like to change “Click to share on Pinterest” with simply “Pinterest”. Can you please tell me what that code would look like? Many thanks for your help!
After looking at the code, there doesn’t appear to be any way to do this without modifying the source. Unfortunately, if you do this, your modifications will be erased when JetPack is updated. For your Pinterest example, the code you need to look at is in /modules/sharedaddy/sharing-sources.php on line 1157. To change it, just edit the text. The text for the other buttons is in the same file but spread out (do a search and replace). Hopefully that helps.
Ren, thanks for your response! After I submitted my comment here yesterday, I found an interesting alternative elsewhere – use the gettext function in my child theme to replace specific strings. It works like a champion, but I don’t know if it has negative effects on the performance of my site. Performance hasn’t been an issue for me thus far, but it’s nice to know whether or not the code hacks I’m implementing are good practice or not!
Awesome. Researching and testing different things is how you learn. Glad to hear you got it working.
Hey Ren!
What sharing buttons are you using right now? I keep trying to use your CSS styling but I’m not getting anywhere near good as your buttons. I really REALLY like them 🙂
Hey, Miguel. I’m using a free plugin called Genesis Simple Share. I like it a lot because it’s lightweight, looks nice and is easy to use. However, it does require the Genesis Framework.
http://briangardner.com/genesis-simple-share/
Hi Ren!
Thanks for the tutorial! I have been looking everywhere for a tutorial on how to create that hover effect where the buttons widens, like yours do on this very page.
Any chance you could point me in the right direction? If so I would be eternally grateful!
Cheers!
Hi, Martin. My social sharing buttons are actually powered by the Genesis Simple Share plugin. If you use Genesis, this plugin is free to download.
Thanks, Ren!
Did you simply style them via the widget setting, or via custom css? If so, may I ask in what style sheet? (style.css?)
Thanks for replying so quickly, much appreciated!!!
No custom CSS on my end, just the default styling of the plugin.
Hey Ren,
Just wanted to let you know that I’ve used your latest code over at http://cityslick.in/post-formats/post-format-standard/ and it looks great after a bit of tweaking!!
Thanks a ton for that…yours is the only tut which takes into account the latest plugin updates.
A question: how do I knock off the ugly default (Share this: with a bar) and replace it with what you have?
Hi, Avinash, The
h3.sd-title::before { border-top: none !important; }is what removes the border above the title. You can change the text under the Jetpack Sharing settings. Hopefully this answers your question.Awesome!!! But, how do I make the boxes even bigger, like say Upworthy size???
Currently they appear about 130x40px on my site. I’d like to get them to about double that size.
Hey Carlos. You can set a width and height property to the CSS or just mess with the padding.
Hey Ren,
How would you add the shares count to this?
Avinash,
The last part of the CSS can be edited/removed to show the post counts because it’s currently set to NOT display them.
.sd-button span.share-count {
display: none; /** This is what needs to be changed **/
}
You’ll need to style this selector if you want the share count to appear in a certain way.