You can easily add social share buttons from plugin in WordPress. There are lots of plugins they offer you to do that. But to add social share buttons without using any of the plugin is the good choice if you want your site load faster.

It is because, installed plugin may load unnecessary JavaScript and CSS, which may lead your website to be slow.

So, in this tutorial, I’m gonna show you the simple 2 Steps to add social share buttons in WordPress. The one is “Opening in new tab” and another “Pop-up tab”.

Add Social Share Buttons (Opens in new tab)

For this, we must have basic HTML, CSS knowledge. If you know the basics of HTML and CSS, then you can easily create the social share buttons.

Creating the Buttons

<ul class="social-share-container">
   <li><a target="_blank" href="#" class="sharebtn facebook-btn">
      <i class="fab fa-facebook"></i>
      </a>
   </li>
   <li><a target="_blank" href="#" class="sharebtn twitter-btn">
      <i class="fab fa-twitter"></i>
      </a>
   </li>
   <li> <a target="_blank" href="#" class="sharebtn linkedin-btn">
      <i class="fab fa-linkedin"></i>
      </a>
   </li>
   <li> <a target="_blank" href="#" class="sharebtn pinterest-btn">
      <i class="fab fa-pinterest"></i>
      </a>
   </li>
</ul>

I wrapped the buttons inside className “social-share-container”. Then, I used 4 anchor tags for 4 buttons. And place Idiomatic element <i></i> inside each <a></a> anchor tags for the respected fonts. Here I’m using Font Awesome icons.

The target attribute is set to “_blank” to open the link in new tab.

Also Read : Install WordPress Plugins in 3 Ways

Adding CSS

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";

ul.social-share-container {
    display: flex;
    list-style: none;
    font-size: 12px;
}

.social-share-container li:not(:last-child) {
    margin-right: 4px;
}

.social-share-container .sharebtn {
    text-decoration: navajowhite;
}

.social-share-container .facebook-btn {
    color: #4267b2;
}

.social-share-container .twitter-btn {
    color: #1c9cea;
}

.social-share-container .linkedin-btn {
    color: #0074af;
}

.social-share-container .pinterest-btn {
    color: #b80214;
}

Adding links

Creating the buttons is not enough. Now we need to replace “#” with the Share POST URL of Facebook, twitter, Linkedin and Pinterest by concatenating with our post URL

<?php 
$postURL = urlencode(get_the_permalink());
$postTitle = get_the_title();
$postIMG = urlencode(get_the_post_thumbnail_url());
$facebookURL = 'https://www.facebook.com/sharer.php?u=';
$twitterURL = 'https://twitter.com/share?url=';
$linkedinURL = "https://www.linkedin.com/sharing/share-offsite/?url=";
$pinterestURL = "https://pinterest.com/pin/create/bookmarklet/?media=";
?>

Look the above PHP script. I used $postURL, $postTitle and $postIMG to store encoded URL, title and encoded thumbnail link of the current post.

And also stored Share URL of Facebook, Twitter, Linkedin and Pinterest in variables.

<ul class="social-share-container">
    <li>
        <a target="_blank" href="<?php echo $facebookURL . $postURL; ?>" class="sharebtn facebook-btn">
            <i class="fab fa-facebook"></i>
            <span class="facebook-share-btn-text">Share</span>
        </a>
    </li>
    <li>
        <a target="_blank" href="<?php echo $twitterURL . $postURL . '&text' . '=' . $postTitle; ?>"
            class="sharebtn twitter-btn">
            <i class="fab fa-twitter"></i>
            <span class="twitter-tweet-btn-text">Tweet</span>
        </a>
    </li>
    <li>
        <a target="_blank" href="<?php echo $linkedinURL . $postURL?>" class="sharebtn linkedin-btn">
            <i class="fab fa-linkedin"></i>
        </a>
    </li>
    <li>
        <a target="_blank"
            href="<?php echo $pinterestURL . $postIMG . '&url=' . $postURL . '&description=' . $postTitle; ?>"
            class="sharebtn pinterest-btn">
            <i class="fab fa-pinterest"></i>
        </a>
    </li>
</ul>

Now look the above code and see how I concatenate Share Post URL with postURL. You can insert such links dynamically also by using JavaScript. But I’m just trying to make it simple.

Also read : Simple way to reset WordPress

Final code looks like this.

<?php 
$postURL = urlencode(get_the_permalink());
$postTitle = get_the_title();
$postIMG = urlencode(get_the_post_thumbnail_url());
$facebookURL = 'https://www.facebook.com/sharer.php?u=';
$twitterURL = 'https://twitter.com/share?url=';
$linkedinURL = "https://www.linkedin.com/sharing/share-offsite/?url=";
$pinterestURL = "https://pinterest.com/pin/create/bookmarklet/?media=";
?>
<ul class="social-share-container">
    <li>
        <a target="_blank" href="<?php echo $facebookURL . $postURL; ?>" class="sharebtn facebook-btn">
            <i class="fab fa-facebook"></i>
            <span class="facebook-share-btn-text">Share</span>
        </a>
    </li>
    <li>
        <a target="_blank" href="<?php echo $twitterURL . $postURL . '&text' . '=' . $postTitle; ?>"
            class="sharebtn twitter-btn">
            <i class="fab fa-twitter"></i>
            <span class="twitter-tweet-btn-text">Tweet</span>
        </a>
    </li>
    <li>
        <a target="_blank" href="<?php echo $linkedinURL . $postURL?>" class="sharebtn linkedin-btn">
            <i class="fab fa-linkedin"></i>
        </a>
    </li>
    <li>
        <a target="_blank"
            href="<?php echo $pinterestURL . $postIMG . '&url=' . $postURL . '&description=' . $postTitle; ?>"
            class="sharebtn pinterest-btn">
            <i class="fab fa-pinterest"></i>
        </a>
    </li>
</ul>

Add Social Share Buttons (Pop-Up Window Method)

This method is similar to the above method. But here we need to add a little bit of JavaScript onclick event. We need to make pop-up window open, when we click the share button. And also we need to set the height and width of the new window.

To understand this method, first you have to understand the above method.

Code For (Pop-Up Method)

<ul class="social-share-container">
    <li>
        <a target="popup" href="<?php echo $facebookURL . $postURL; ?>" class="sharebtn facebook-btn"
            onclick="window.open('<?php echo $facebookURL . $postURL; ?>','popup','width=600,height=600'); return false;">
            <i class="fab fa-facebook"></i>
        </a>
    </li>
    <li>
        <a target="popup" href="<?php echo $twitterURL . $postURL . '&text' . '=' . $postTitle; ?>"
            class="sharebtn twitter-btn"
            onclick="window.open('<?php echo $twitterURL . $postURL . '&text' . '=' . $postTitle; ?>','popup','width=600,height=600'); return false;">
            <i class="fab fa-twitter"></i>
        </a>
    </li>
    <li>
        <a target="popup" href="<?php echo $linkedinURL . $postURL?>" class="sharebtn linkedin-btn"
            onclick="window.open('<?php echo $linkedinURL . $postURL?>','popup','width=600,height=600'); return false;">
            <i class="fab fa-linkedin"></i>
        </a>
    </li>
    <li>
        <a target="popup"
            href="<?php echo $pinterestURL . $postIMG . '&url=' . $postURL . '&description=' . $postTitle; ?>"
            class="sharebtn pinterest-btn"
            onclick="window.open('<?php echo $pinterestURL . $postIMG . '&url=' . $postURL . '&description=' . $postTitle; ?>','popup','width=600,height=600'); return false;">
            <i class="fab fa-pinterest"></i>
        </a>
    </li>
</ul>

In this method, only the difference is, the same href=” ” URL is placed inside onclick=”” attributes along with Pop-Up window size. Moreover , you can use the same CSS code and same PHP variables.

The Sum UP

If this is your first time playing with PHP and if you are unaware of placing template file, then probably this process might be complicated for you. And if you are beginner developer, I’m sure that this tutorial gonna help you to add social share buttons without using plugin. You can also check this GitHub Repository for the necessary template files and CSS.

If you like this tutorial, don’t forget the leave a comment down below and share the post to your developer friends as well.

Keep learning …!! See you in the next WordPress tutorials.

Sakar Aryal is a Computer Application student from beautiful town Tilottama, Nepal. He loves coding and blogging. He provides problem solving technique specially related to WordPress, HTML, CSS, php and more other web and tech related things through on his blog , blogietech.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.