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

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.


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:

share buttons without plugin

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:

Please make sure you replace WPCrumbs with your Twitter username in
<a class="share-twitter" href="" target="_blank">
<ul class="share-buttons">
        <a class="share-twitter" href="<?php echo $title; ?>&amp;url=<?php echo $url; ?>&amp;via=WPCrumbs" target="_blank">
            <svg id="twitter" data-name="twitter" xmlns="" viewBox="0 0 58.1 47.2">
                <path d="M54.86,20.19v1.55c0,15.74-12,33.88-33.88,33.88A33.64,33.64,0,0,1,2.74,50.27a24.55,24.55,0,0,0,2.88.15A23.84,23.84,0,0,0,20.4,45.33,11.93,11.93,0,0,1,9.27,37.07a15,15,0,0,0,2.25.18,12.58,12.58,0,0,0,3.13-.41A11.91,11.91,0,0,1,5.1,25.17V25a12,12,0,0,0,5.38,1.51A11.92,11.92,0,0,1,6.8,10.61,33.84,33.84,0,0,0,31.35,23.06a13.44,13.44,0,0,1-.29-2.73,11.92,11.92,0,0,1,20.61-8.15,23.43,23.43,0,0,0,7.56-2.87A11.87,11.87,0,0,1,54,15.88,23.87,23.87,0,0,0,60.84,14,25.59,25.59,0,0,1,54.86,20.19Z" transform="translate(-2.74 -8.42)"/>
        <a class="share-facebook" href="<?php echo $url; ?>" target="_blank">
            <svg id="facebook" data-name="facebook" xmlns="" viewBox="0 0 30.61 59.03">
                <path d="M47.2,12.76H41.63c-4.36,0-5.18,2.09-5.18,5.11v6.71h10.4l-1.38,10.5h-9V62H25.59V35.07h-9V24.57h9V16.84c0-9,5.5-13.87,13.52-13.87a69.4,69.4,0,0,1,8.09.43Z" transform="translate(-16.59 -2.97)"/>
        <a class="share-googleplus" href="<?php echo $url; ?>" target="_blank">
            <svg id="googleplus" data-name="googleplus" xmlns="" viewBox="0 0 59.45 37.8">
                <path d="M21.65,53.45a18.9,18.9,0,0,1,0-37.8,18.05,18.05,0,0,1,12.66,5l-5.13,4.93a10.61,10.61,0,0,0-7.53-2.91,11.94,11.94,0,0,0,0,23.88c7.48,0,10.29-5.39,10.73-8.15H21.65V31.9H39.49A16,16,0,0,1,39.8,35C39.8,45.79,32.55,53.45,21.65,53.45Zm40.51-16.2H56.77v5.39H51.35V37.25H46V31.84h5.39V26.45h5.42v5.39H62.2Z" transform="translate(-2.75 -15.65)"/>
        <a class="share-pinterest" href="<?php echo $url; ?>&amp;media=<?php echo $media;   ?>&amp;description=<?php echo $title; ?>" target="_blank">
            <svg id="pinterest" data-name="pinterest" xmlns="" viewBox="0 0 61.48 61.48">
                <path d="M31.78,63a30.1,30.1,0,0,1-8.73-1.28,25.52,25.52,0,0,0,3.12-6.56s.36-1.36,2.16-8.45c1,2,4.16,3.84,7.48,3.84,9.89,0,16.61-9,16.61-21.09,0-9.09-7.72-17.61-19.49-17.61C18.37,11.83,11,22.32,11,31c0,5.28,2,10,6.28,11.77a1.06,1.06,0,0,0,1.52-.8c.16-.52.48-1.88.64-2.44A1.51,1.51,0,0,0,19,37.85a8.93,8.93,0,0,1-2-6C17,24,22.77,17.07,32.1,17.07c8.24,0,12.81,5,12.81,11.81,0,8.85-3.92,16.33-9.77,16.33a4.76,4.76,0,0,1-4.84-5.92C31.22,35.41,33,31.2,33,28.4c0-2.52-1.36-4.64-4.16-4.64-3.28,0-5.92,3.4-5.92,8a12.81,12.81,0,0,0,1,4.88c-3.36,14.25-4,16.73-4,16.73a26.94,26.94,0,0,0-.52,7.08A30.77,30.77,0,1,1,31.78,63Z" transform="translate(-1.04 -1.5)"/>

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.

<?php wcr_share_buttons(); ?>
  • OKOYE H.p.C

    I tried it but its not working

  • Mr Henry

    Ity’s no longer working for generatepress theme latest version

  • Jahangir

    Hi Dear,

    thanks for sharing this article is very useful, how can i add whats app button also only for mobile?


  • Mark

    Works on my local server but none of the styles are being applied on the live server.

  • The Staunch

    Thanks , but it’s not working on generatepress themes anymore

  • Roman

    Thank you very much. It really works, I put it on my site, but with some modifications. At first, all four buttons didn’t fit the width of the page, so I used width: calc (25% – 25px); in .share-buttons li, it made them smaller. Also I heard google+ will soon be closed, so this button can be prepared to delete…

Leave a Reply

Get our Wordpress
freebies to your inbox