Add Social Media Sharing Buttons To WordPress Without Plugin – Updated

elegant themes affiliate

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.

[full bg=”#1e2d33″]add-social-media-buttons-to-wordpress-without-plugin[/full]

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

add-codes-in-function.php-file

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 can also try this method locally on your system. You can follow this guide on how to install wordpress locally.

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.

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-adding-funtion-without-css

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.

11 thoughts on “Add Social Media Sharing Buttons To WordPress Without Plugin – Updated

    • Ok, 1st :: where you have placed the .php code. It should be placed at the bottom of your theme’s function.php file.

      2nd :: you must add your css to bottom of your style.css file ( so that it override all your content’s css style ).

      If you are using any cache plugin, then please clear your cache.

  1. Couldn’t copy the php codes because it’s an image file. Please, kindly check. More so, what if i want to manually include the share buttons at a particular location and not automatically?

  2. Hey man,

    I really like your social media buttons and the way it is set up. I have copied the code into my functions and css files but nothing happens. I am absolutely positive I did it correctly.

    I use the Genesis Showcase Theme which is in some ways a bit quirky.

    Regards and tnx

  3. Hey. Do I need to add anything to the single.php in order to get the sharing icons to show? Also will this have any issues if I place this in a child theme functions.php?

    For whatever reason I am unable to get the icons to show following the instructions step by step .

    Maybe I need to add something to the child theme functions.php to pull in the parent themes functions.php?

    Thanks!

    • Ok you can do something like this.

      Create a new php file and name it as socialmediabtn.php

      Now place all the codes which I have shared above into it ( INCLUDING the starting php tag ).

      Now just copy the code provided below in your functions.php file.

      // Load Social Media Buttons
      include_once( get_stylesheet_directory() . '/includes/socialmediabtn.php' );

      Now use [social] anywhere on your website and you must be able to see the social media links.

Leave a Comment