That’s indeed how the buttons are designed to work right now. We’re considering updating the design to make the icon bigger. You can follow our progress here:
https://github.com/Automattic/jetpack/issues/2451
I’ll post again here as soon as we make progress!
Thank you, Jeremy. I hope you do match up the size of the ‘add new service’ icons soon. I’ll be keeping up with the progress. Thank you for your reply :).
Hi, Jeremy. Any updates to remedy the tiny add new service share button size, yet?
@liimi I’l afraid we haven’t made any progress yet. I’ll post again here when we do!
Any progress on this? I have an education blog and one of the big education blog ranking services bases 20% of our ranking on how much our articles are shared on Facebook, Twitter and Stumbleupon; so now having one of them is hurting my rankings.
@bdean1000 We haven’t made any progress on this issue yet.
If you’d like to add your own StumbleUpon button, you can add some custom CSS to make it look like the 2 others. If you let me know your site URL, I’ll be happy to help with that!
If you want it to remain private, you can also contact us via this contact form:
http://jetpack.me/contact-support/
Hi Jeremy. That’s exactly what I’d like to do. To add the stumbleupon icon to the rest of my share icons. My site is http://www.ifitshipitshere.com and it’d be great if you could help me with the CSS code.
Thanks in advance!
laura
Try the following:
Go to Settings > Sharing, and click on the link to “add a new service”.
Enter the following parameters, save your changes, and drag the new button you created to enable the service.
- Service name:
StumbleUpon
- Sharing URL:
http://www.stumbleupon.com/submit?url=%post_url%&title=%post_title%
- Icon URL:
https://s3.amazonaws.com/f.cl.ly/items/3o0T2p3l1U3W302p0630/stumble-logo.jpg
Add the following CSS to your theme stylesheet, or to your custom CSS editor available under Appearance > Edit CSS in your dashboard.
.sd-social-icon .sd-content ul li[class*='share-'].share-custom-stumbleupon a.sd-button {
background: #eb4823 url('https://s3.amazonaws.com/f.cl.ly/items/3o0T2p3l1U3W302p0630/stumble-logo.jpg') no-repeat center center;
background-size: 80%;
color: #fff !important;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font: 400 16px/1 Genericons;
vertical-align: top;
position: relative;
top: 0;
text-align: center;
}
.sd-social-icon .sd-content ul li[class*='share-'].share-custom-stumbleupon a.sd-button span {
background-image: none !important;
}
That should do the trick.
You Rock! That totally worked.
Thank you so much!
Laura 🙂
