Introduction

In this post we will create social share links in WordPress without plugin. Clicking on such social media links or social share buttons populates a message and image (if any) that can be shared on social media. The social media link on your content minimize the time it takes to promote your content on social networks.

There are number of plugins available and you can use one of them that suits your needs but the plugin has many extra features which may not be required for your site and extra features mean extra time to load those features. Therefore it will affect your website’s performance.

This tutorial aims at reducing the number of plugins in your site and with simple few lines of code you can achieve the social share links placed on our web page with little knowledge of PHP. Even if you do not have knowledge of PHP you can simple put this piece of code in the right place to get it working

You can customize the code given in this example according to your requirements.

Prerequisites

Knowledge of WordPress CMS

Create Social Share Links

Next we will create social share links. We will create links for sharing via Facebook, Linkedin, Reddit and Twitter. We don’t include Google+ because Google+ has been shut down.

Add the below code into your theme’s function.php file. You should consider the below code into your child theme’s function.php file.

If you are not working with child theme then you should immediately create it. You should not work on parent theme because on every update your changes will be lost.

function social_share_links() {
    global $post;
    if(is_singular()) {
    
        // Get current page's URL 
        $sl_url = urlencode(get_permalink());
 
        // Get current page title - replace space by %20
        $sl_title = str_replace(' ', '%20', get_the_title());
 
        // Construct social sharing URLs
        $twitterURL = 'https://twitter.com/intent/tweet?text='.$sl_title.'&url='.$sl_url.'&via=[twitter username]';
        $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$sl_url;
        $redditURL = 'https://www.reddit.com/submit?url='.$sl_url.'&title='.$sl_title;
        $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$sl_url.'&title='.$sl_title;
 
        // Add sharing links at the end of page/page content
        $content = '<div class="social-box"><div class="social-btn">Social Share: ';
        $content .= '<a class="col-2 sbtn s-twitter" href="'. $twitterURL .'" target="_blank" rel="nofollow"><span>Twitter</span></a>';
        $content .= '<a class="col-2 sbtn s-facebook" href="'.$facebookURL.'" target="_blank" rel="nofollow"><span>Facebook</span></a>';
        $content .= '<a class="col-2 sbtn s-linkedin" href="'.$linkedInURL.'" target="_blank" rel="nofollow"><span>LinkedIn</span></a>';
        $content .= '<a class="col-2 sbtn s-reddit" href="'.$redditURL.'" target="_blank" rel="nofollow"><span>Reddit</span></a>';
        $content .= '</div></div>';
        
        return $content;
    } else {
        // if not a post/page then don't include sharing links
        return $content;
    }
}

// This will create a wordpress shortcode [social_share_links].
// Add it in any widget and social links appear their.
// You will need to enabled shortcode execution in widgets.
add_shortcode('social_share_links','social_share_links');

In the above code we first check if it is a single post/page or home page otherwise we won’t add social share links to other page.

We get the current page’s URL and replace the space in post/page’s title by %20 to avoid encoding issues.

We construct the social sharing URLs and create a div to place those social share links.

Finally we have added short code that can be used on your page/post to display social share links.

Add Style

Now we will apply some basic styles to social share links to enhance the appearance of the links.

.social-box {
    display: block;
    margin-bottom: 30px;
	font-weight: bolder;
}

.social-box:last-of-type {
    margin: 0 0 40px;
}

.social-btn {
    display: block;
    width: 100%;
}

a.col-2.sbtn span {
    display: none;
}

a.col-2.sbtn {
    width: 6%;
    display: inline-block;
    text-align: center;
    border-radius: 50px;
    padding: 10px;
    color: #fff;
    margin: 0 0.5% 0 0;
    line-height: 1.825 !important;
    max-width: 50px;
    min-width: 50px;
}

.s-twitter {
	background: #03A9F4;
}
.s-twitter::before {
    font-family: fontawesome;
    content: '\f099';
}
.s-twitter:hover {
    background: #0093d6;
}

.s-facebook {
	background: #3F51B5;
}
.s-facebook::before {
    font-family: fontawesome;
    content: '\f09a';
}

.s-linkedin {
	background: #1a7baa;
}

.s-linkedin::before {
    font-family: fontawesome;
    content: '\f0e1';
}

a.col-2.sbtn.s-linkedin:hover {
    background: #136288;
}

.s-reddit {
	background: #ff4500;
}

.s-reddit::before {
    font-family: fontawesome;
    content: '\f1a1';
}

a.col-2.sbtn.s-reddit:hover {
    background: #e60000;
}

.social-btn a:last-of-type {
    margin: 0;
}

Add Short Code

To add short code go to your child theme’s single.php file and after the content you can add the below code snippets:

<?php echo do_shortcode('[social_share_links]'); ?>

Or you can also call the function directly on the single.php page.

<?php echo social_share_links(); ?>

Testing the Application

The social share links appear on your single post look similar to the below image:

social share links in WordPress without plugin

Thanks for reading.

Leave a Reply

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