ShareDaddy Genericons

I have a sneaky feeling that after I publicize this, it may end up as an option in Jetpack. After all, they already include Genericons.

jetpackI’m using Sharing (from Jetpack) on a couple sites, and it works fairly well (the metrics were surprising that one one site they excel and on others they’re never used). That said, I didn’t like the images loaded for ShareDaddy, and it was a real Golidlocks moment. The ‘icon’ buttons were buttons within buttons, and with or without the text, that didn’t make me smile. The official buttons were too large and not matchy enough since everyone has their own design.

sharing-buttons1

So what’s a girl to to but fall back on her favorite toy in all the world, Genericons!

There are only three steps, and the third is to have a drink. You ready?

Change Sharing Links to “Text Only”

It’s easier to do this via text only, though I’m sure you can do it with the others. I switched to Text. One click. Done.

Edit your CSS

Now I want to hide the text, put a Genericon before the link, and set the colors to ‘true’ for each item (that is, use Twitter Blue for Twitter, Facebook Blue for Facebook, Google Orange for Google+ etc). I picked silvery-grey for email. Also I think it’s correct to use display:none to hide the text, since screenreaders will still read it, and that’s okay. Could be wrong. CSS is not my super-power.

div.sharedaddy a.sd-button {
    padding: 2px!important;
}

div.sharedaddy .sd-content li a::before {
    font-family: 'Genericons';
	font-size: 16px;
	color: #fff;
}

div.sharedaddy a.sd-button>span {
    display: none;
}

div.sharedaddy .sd-content li.share-twitter a::before {
    content: '\f202';
    color: #4099FF;
}
div.sharedaddy .sd-content li.share-facebook a::before {
    content: '\f204';
    color: #3B5998;
}
div.sharedaddy .sd-content li.share-google-plus-1 a::before {
    content: '\f218';
    color: #DD4B39;
}
div.sharedaddy .sd-content li.share-tumblr a::before {
    content: '\f214';
    color: #2C4762;
}
div.sharedaddy .sd-content li.share-email a::before {
    content: '\f410';
    color: #666666;
}

This isn’t perfect, since there’s no Genericon for Printing, Digg, Reddit, StumbleUpon, or Pocket at this time. I’ll be suggesting it to Joen soon. Interestingly, Font Awesome (which could also be used for this) doesn’t have Reddit or the other social networks either, but it does have a print icon. Me? I don’t need them for this site, so it’s okay.

myshare

Looks great, scales well on high-def devices, and it pleases me. By the way Pinterest’s red is #C92228 from what I can tell.

Have a drink

Like I said, step three to was to have a drink. You’re done!

About these ads
StudioPress Theme of the Month
Half-Elf? Try Half OFF WordPress ebooks!