Custom Social Networking Buttons

August 22, 2014 2:44pm

Some research shows that having various social networking buttons on your site increases the likelihood users will share that content. It’s a verifiable fact, however, that adding the default buttons supplied by Google, Twitter, Facebook, etc. slows down your site. Basically, they pull in scripts from their servers. The more scripts you load on one page, the slower your site. And Google says that page speed is a factor when considering your site’s ranking with the search engines (not to mention slow sites suck).

So what do we do? Well, if you like the idea of sharing buttons but don’t care about whether the numbers are there showing how many times a page has been shared, I can help you with that.

I’m using Open Sans as the font, but the CSS above will just inherit your own font.

If you’d also like to show the icons for each network, I recommend installing an icon font, especially if you’re already using one. For the purposes of this post, you can download the icon fonts I use (gathered from Icomoon). There’s a json file in there you can even upload to Icomoon to add more icons to it if you’d like. Once you’ve got those fonts where you want them on your server, use this updated CSS (change the assets/fonts/ to match your own filepath):

Sometime soon I hope to figure out the various networks APIs and look into storing share counts in a database to be used with the popup numbers, but that’s for some mythological day where I have free time and don’t want to use it to go outside…

Enjoy!

And yes, I realize the irony of this post considering I haven’t gotten around to updating the sharing buttons on this site yet… They say a good web designer never has time to update his own site, so I’m using that defense! 🙂