How to add social media sharing buttons to your blog without plugins

Social media sharing buttons are a must have, especially for a blog. Sure, the first solution that comes to mind for adding such buttons is a plugin, and there are plenty of free and premium plugins to choose from.

But if you are picky like us, you want both aesthetics and optimization, good looks without compromising performance. So what do you do when you don’t want to install a plugin full of javascript files, additional css files, bloated iconfonts and such? You make your own sharing buttons :)

We’ll show you how to easily do that.

Intro

Being an important part of a website, sharing buttons should not be underestimated and just slapped-on. They should be attractive, and encourage the reader to share your awesome content. We carefully pondered all the details, to come up with the perfect buttons both aesthetically and performance-wise.

This is what the buttons will look like:

Inline svg icons

Inline svgs are awesome: versatile, pretty and most importantly scalable (which means they won’t look pixelated on Retina/HiDPI displays), style-able from css (for example you can change their color with fill) and they don’t generate requests on your server.

There really is no downside, so the share buttons in this tutorial use inline svgs for the icons.

Adding the buttons in 3 steps

Step 1 · add this code in functions.php
(NOTE: if you are using a child theme, add the code to the child theme’s functions.php file)

/**
 * Social media share buttons
 */
function wcr_share_buttons() {
    $url = urlencode(get_the_permalink());
    $title = urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8'));
    $media = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));

    include( locate_template('share-template.php', false, false) );
}

Step 2 · create a file named share-template.php and add this content:

[panel type=”info”]Please make sure you replace WPCrumbs with your Twitter username in
[/panel]

    

        
            
            Tweet
        
    
    

        
            
            Share
        
    
    

        
            
            Recommend
        
    
    

        
            
            Pin
        
    

Step 3 · Add this code to style.css
(NOTE: if you are using a child theme, add the code to the child theme’s style.css file)

.share-buttons {
    font-size: 0.7rem;
    line-height: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 60px;
    z-index: 2;
    position: relative;
    text-align: center;
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: flex-start;
}

.share-buttons li {
    height: auto;
    flex: 0 1 auto;
    width: calc(25% - 1px);
    margin-right: 1px;
}

.share-buttons li:last-child {
    width: 25%;
    margin-right: 0;
}

.share-buttons svg {
    fill: #fff;
    margin-right: 5px;
    width: 16px;
    height: 16px;
}

.share-googleplus svg {
    width: 20px;
    height: 16px;
}

.share-buttons a {
    display: block;
    padding: 12px 12px 9px;
    text-align: center;
}

.share-buttons li:first-child a {
    border-radius: 3px 0 0 3px;
}

.share-buttons li:last-child a {
    border-radius: 0 3px 3px 0;
}

.share-twitter	{
    background: #1da1f2;
}

.share-facebook	{
    background: #3b5998;
}

.share-googleplus	{
    background: #db4437;
}

.share-pinterest	{
    background: #b5071a;
}

Displaying the buttons

To display the buttons, call the wcr_share_buttons() function in single.php and/or page.php of your theme.