Social Share Buttons to WP Page Without Plugin Javascript

In this tutorial, you will learn to add social media buttons in your WordPress blog without using a plugin.
This is mobile responsive and uses no JavaScript. It has clean and commented codes and is really easy to customize. In simple terms, it makes your site fast. But still, it’s a plugin.

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
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 .= ‘

‘;

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’);

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.
*************************/

.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.