Recently I developed a plugin named fast social shares and after posting an article about it, many of my readers contacted me asking how to add social media sharing buttons in wordpress without using plugins.

My addon is mobile responsive and uses no JavaScript. It has clean and commented codes and is really easy to customise. In simple terms, it makes your site fast. But still, it’s a plugin.

So in this tutorial, you will learn to add social media buttons in your wordpress blog without using a plugin.

If you also have any question regarding web or wordpress development, then please feel free to contact me, and I will try my best to sort out your problem.

WordPress Social Media Share Buttons Without Plugin

Now let us get back to the topic and start with developing the PHP function. This function will help us to define the social buttons and to push them into the content area.

Step 1 – PHP function

I am requesting you please follow the step as listed below. In case you fail to follow any of the steps provided below, your site may go offline temporarily. I am not saying this to scare you.

If you are editing your live website then I will suggest keeping your FTP connected to your server and to also keep a backup of your original theme’s function.php file. If anything goes wrong, just replace the file and your site will get live instantly.

You need to copy the function provided below into your theme’s function.php file. Copy exactly the same snippet without making any changes to it unless you know what you are doing.

// Function to handle the thumbnail request function get_the_post_thumbnail_src($img) { return (preg_match('~\bsrc="([^"]++)"~', $img, $matches)) ? $matches[1] : ''; } function wpvkp_social_buttons($content) { global $post; if(is_singular() || is_home()){ // Get current page URL $sb_url = urlencode(get_permalink()); // Get current page title $sb_title = str_replace( ' ', '%20', get_the_title()); // Get Post Thumbnail for pinterest $sb_thumb = get_the_post_thumbnail_src(get_the_post_thumbnail()); // Construct sharing URL without using any script $twitterURL = 'https://twitter.com/intent/tweet?text='.$sb_title.'&url='.$sb_url.'&via=wpvkp'; $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$sb_url; $bufferURL = 'https://bufferapp.com/add?url='.$sb_url.'&text='.$sb_title; $whatsappURL = 'whatsapp://send?text='.$sb_title . ' ' . $sb_url; $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$sb_url.'&title='.$sb_title; if(!empty($sb_thumb)) { $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&media='.$sb_thumb[0].'&description='.$sb_title; } else { $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&description='.$sb_title; } // Based on popular demand added Pinterest too $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&media='.$sb_thumb[0].'&description='.$sb_title; $gplusURL ='https://plus.google.com/share?url='.$sb_title.''; // Add sharing button at the end of page/page content $content .= '<div class="social-box"><div class="social-btn">'; $content .= '<a class="col-1 sbtn s-twitter" href="'. $twitterURL .'" target="_blank" rel="nofollow"><span>Share on twitter</span></a>'; $content .= '<a class="col-1 sbtn s-facebook" href="'.$facebookURL.'" target="_blank" rel="nofollow"><span>Share on facebook</span></a>'; $content .= '<a class="col-2 sbtn s-whatsapp" href="'.$whatsappURL.'" target="_blank" rel="nofollow"><span>WhatsApp</span></a>'; $content .= '<a class="col-2 sbtn s-googleplus" href="'.$googleURL.'" target="_blank" rel="nofollow"><span>Google+</span></a>'; $content .= '<a class="col-2 sbtn s-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank" rel="nofollow"><span>Pin It</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-buffer" href="'.$bufferURL.'" target="_blank" rel="nofollow"><span>Buffer</span></a>'; $content .= '</div></div>'; return $content; }else{ // if not a post/page then don't include sharing button return $content; } }; // Enable the_content if you want to automatically show social buttons below your post. add_filter( 'the_content', 'wpvkp_social_buttons'); // This will create a wordpress shortcode [social]. // Please it in any widget and social buttons appear their. // You will need to enabled shortcode execution in widgets. add_shortcode('social','wpvkp_social_buttons');

If the code is not visible then please visit the public GitHub gist.

First you will notice a function get_the_post_thumbnail_src($img) which has $img as the parameter. I am actually performing the preg_match in order to find the thumbnail of the post.

Then you will notice that I have declared a new variable named $sb_url which I am using to store the link to the post. I am doing using urlencode(get_permalink()); function.

$sb_title is the next variable which is being used to store the post title. I have used it to dynamically generate the social share title. I am using $sb_thumb to store the information about the thumbnail of the post. I am also conditionally checking if the post thumbnail is available or not with help of if-else statement and by performing the check on!empty($sb_thumb) function.

Various other variables are used to store the URL structure of the corresponding social media sites because each of these sites has their own way to automatically generate the share links.

Finally, I have used the_content to hook this function to the content area. The complete PHP code is pretty self-explanatory and is easy to customise.

You can also use [social] shortcode anywhere on your website to show the share button. If you want to add more buttons, then you just need to add more social media named variable and proper URL parameter.

You must have noticed that not a single URL is calling any parent JavaScript file, but is still 100% functional and dynamic.

After placing these codes in your theme file, if you load any post then you will social media links at the bottom of the post. So it means that our functions are working properly. And now you just need to give some great styles to those social links.

Step 2 – Design social buttons with CSS

Add these styles to your theme’s stylesheet.css file. I am assuming that you are using font awesome fonts on your site. You will need it because the style is designed considering its font’s Unicode. You can obviously change it.

/************************* Styles for the buttons. @Vivek Kumar Poddar http://wpvkp.com *************************/ .social-box { display: block; margin: -20px 0 40px; padding: 0 6rem 0; } .social-box:last-of-type { margin: 0 0 40px; } .social-btn { display: block; width: 100%; } a.col-2.sbtn span { display: none; } a.col-1.sbtn { width: 180px; display: inline-block; text-align: center; border-radius: 50px; padding: 10px; color: #fff; margin: 0 0.5% 0 0; font-size: 15px; } a.col-1.sbtn span { margin: 0 0 0 15px; } 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'; } a.col-1.sbtn.s-facebook:hover { background: #2f409f; } .s-googleplus { background: #F44336; } .s-googleplus::before { font-family: fontawesome; content: '\f0d5'; } .s-googleplus:hover { background: #c82c21; } .s-whatsapp { background: #4CAF50; } .s-whatsapp::before { font-family: fontawesome; content: '\f232'; } a.col-2.sbtn.s-whatsapp:hover { background: #3d9440; } .s-linkedin { background: #1a7baa; } .s-linkedin::before { font-family: fontawesome; content: '\f0e1'; } a.col-2.sbtn.s-linkedin:hover { background: #136288; } .s-pinterest { background: #bd081c; } .s-pinterest::before { font-family: fontawesome; content: '\f231'; } a.col-2.sbtn.s-pinterest:hover { background: #a10718; } /*.s-buffer { background: #ced7df; } .s-buffer::before { font-family: fontawesome; content: '\e804'; } a.col-2.sbtn.s-buffer:hover { background: #c3c5c8; }*/ /******************************** ////// Important *******************************/ .social-btn a:last-of-type { margin: 0; } @media only screen and (max-width: 1200px) { a.col-1.sbtn { width: 180px; display: inline-block; text-align: center; border-radius: 50px; padding: 10px; color: #fff; margin: 0 0.5% 0 0; font-size: 15px; } } @media only screen and (max-width: 768px) { a.col-1.sbtn { width: 46px; } a.col-1.sbtn span { display: none; } }

After adding these styles clear your cache and also purge your cdn cache if you are using maxcdn, cloudflare or similar service.

Why my function is better than other plugins?

If you use any social media plugin except my fast social share, then each of them loads JavaScript files from the official website. For example, every Facebook or twitter button which loads up on your web pages, generates the request to the official query server and then gather the data and then show how many likes or tweets a specific post has received.

But since my function and my plugin don’t use any JavaScript, you will notice that they load up instantly along with your main content.

If you face any problem, then don’t forget to contact me for free support.