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.
Update 2024: Please use the code at the end of the post.
// 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.
Update May 2024
We’ve updated the code which should fix the issue of the code returning the word Array.
function get_the_post_thumbnail_src($img) { if (preg_match('~\bsrc="([^"]++)"~', $img, $matches)) { return $matches[1]; // Return only the URL part of the match } return ''; } 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; $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&media='.$sb_thumb.'&description='.$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-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 { return $content; } } add_filter('the_content', 'wpvkp_social_buttons'); add_shortcode('social', 'wpvkp_social_buttons');
Bunly says
i copy all your code past to my function and style, but nothing happen, why?
Vivek Kumar says
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.
Emmanuel says
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?
Vivek Kumar says
Please check the post again, I have added the required codes.
Joe says
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
Vivek Kumar says
My support team has emailed you with detailed steps. How it will help you.
Harpreet Kumar says
Thanks for your awesome trick to add social widget without plugin buddy
Gopinath says
Thanks for the code, been looking to put them without plugin. Will try them.
hardhik says
Can you also give me the code for whatsapp, telegram sharing. It will be helpful
Danny says
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!
Vivek Kumar says
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.
Als Prasad says
Tried with your code awesome man it works perfectly. But i want to add those icons on the top of the post also. can you please suggest me what to do for that one
Editorial Team says
Hi,
“You can also use [social] shortcode anywhere on your website to show the share button.”
Just put that wherever you want and it will work.
Akash Talele says
i want only on post not on page . how to do?
Editorial Team says
Change
is_singular( );
intois_singular( 'post' );
Mike says
Hi, could you probably share code to create contact form that display in a page – contact us, in wordpress twenty seventeen theme.
My current code is not displaying the form.
Editorial Team says
In twenty seventeen you need a contact form plugin such as “Contact form 7”. Use that to create an actual form and use the shortcode on the contact page to show it.
Chandra says
any idea how o display this social media button on index.php or home page?
Editorial Team says
This should work on homepage. You can try changing
is_home()
intois_front_page()
instead but they should both work.Sergiu says
Hi, i tried your code, but is not working well, on FB share i get the answer ‘Parameter ‘href’ should represent a valid URL’, where is the problem?
Thx.
Editorial Team says
What is the full Facebook share URL?
hemant bhardwaj says
use this if you tying to go with template –
Asir says
Here which function is responsible for adding button at the bottom of the post?
Editorial Team says
add_filter( 'the_content', 'wpvkp_social_buttons');
esmail says
hello
i think you defiend wrong variable $gplusURL, because you didn’t use it anywhere .
instead $googleURL required .
or reverse it
thanks
Editorial Team says
It seems you are correct.
The code was updated.
Andrew says
I added this short code [social] to single-product.php but it is not showing the sharing icons. Instead its text [social] is showing.
How can I fix this issue?
Editorial Team says
It sounds like you didn’t add the rest of the code to functions.php
If so, did you do or just put it into the HTML?
Mel says
hello Vivek Kumar, thank you very much for your post! That was exactly what I was looking for.
I could now implant your code into my Post 🙂 many thx
eu-rights.com/news/ — same Post is now your code ! 🙂
Mel
Marine says
Hi there,
I wanted to use them also on Custom post. How can I adapt the code to it ?
Many thanks !
Editorial Team says
Same way anywhere you want.
Just use the shortcode.
Pradeep says
Thank You..!
It works perfectly.
Rozard says
I copied pasted the code in functions.php and css. I can see the tabs, but it is not showing the icons, like facebook f, twitter bird, Pinterest p, etc instead it is showing square boxes and inside of boxes there are some laters and numbers like fo99, F132, F232. What will be the reason? My website is not in english language, it is Arabic kind of language. Is it becasue of language or something else, can you help me please. Thank you
Editorial Team says
It sounds like you don’t have fontawesome loaded. Check that out.
Chris Mozart says
HI
I wanna show up social buttons only on woocommerce single product page after tha tags, i.e to woocommerce_share hook, how can i do that?
Editorial Team says
Did you try putting the shortcode there?
Karl Henderson says
Hi, thanks for the code. It works great but I have one very strange problem. The buttons at the bottom of posts have the icon/text centered but they are not centered when using the shortcode. Then they are near the right edge. I can’t fix one using css without messing up the other. How is this possible? Is there a way to use different css for the shortcode?
Oddly the icons are centered if the shortcode is inside a gutenberg block. But if it’s in the content of a page or in the sidebar the icons are not centered. How can I fix this?
Editorial Team says
You should still be able to point to the specific area using CSS, but if not – just wrap the shortcode with a div with a unique ID and it will be easier…
Karl Henderson says
Hi, I fixed the problem by putting making another class for the ones that are shifted. So I have two sets of css but it works. It\’s probably not worth posting.
bhagyashree says
how to create follow us url for follow us buttons like you have created for sharing.I dont want my follw button onsidebar or widget .i want them after the feature image of my post
bhagyashree says
how to create follow us url for follow us buttons like you have created for sharing.I dont want my follw button onsidebar or widget .i want them after the feature image of my post
xavier says
Whatsapp sharing is not working
Maiko says
i’ ve added your wonderful script but i see the word that works properly bat there isn’t any space between them,i hav added also the css script but i don’t see any difference……………. Sorry for my english,i’m italian
Maiko says
now is all ok
cache problems
Andrea says
First of all, thank you for the code!
I can get the buttons, but they have only a little square inside, not even the logos.
Can I do something to avoid this issue?
Thank you for your kind response.
Editorial Team says
Take a look at your console. Something is not loading correctly.
Ilori Olaitan Adedapo says
Hi, it doesn’t work for my website
I had to use jetpack plugin for now… I put the PHP function to my function.php accordingly and the stylish in my style.css… but nothing happens..
akbar shakir says
Hi,
thanks for your code.
I have applied your code, and CSS but the shapes are not the same. How to make all icons the same width.
Editorial Team says
Sounds like you have some other CSS overriding the icon CSS.
hiren says
Hii
I have copy this code and use shortcode. but display to more then time work this code.first defualt this code every page,and secound i have use shortcode and work shortcode.
Alex says
Hi there I added your code by snippets plugin everything works great (thank you for your code) but this code adds share buttons above footer almost on all pages but I want to add them only on single post page. How can I fix it? Thanks.
Editorial Team says
You would need to add some rule that would check what the post/page you are viewing is, and only if it fits what you want, add the code.
Alex says
I added “post” here – > if(is_singular(‘post’) and it worked. Thanks
Mofizul says
Hi,
I’ve used your code here- XXXXXX But when I click on the Twitter share I see a long URL
Again if you visit the website (it’s using another plugin) XXXXX and click on the Twitter share you’ll see a short URL
How I can do it with your code?
Thanks
Editorial Team says
This is because your URLs are using non English characters. You can change “urlencode” to “urldecode” and that should fox it for you.
Amber Jones says
the content moves like 10px to the right inline with the social buttons and I hate it, How do you make it not to add any padding? I mean the content moves literally to the right
Editorial Team says
It sounds like that has something to do specifically with the layout and CSS on your site…
I would check what causes that on your end.
Raj says
Added and have no clue where to add the [social] shortcode
Which file to add this?
Srikanth r says
Hi, Your guide is too good for activating the share button without using the plugin, are any ways to implement give a share option for images inside the posts. If you have any suggestions please share me
TayDel says
Hey, thanx for the code. Sharing\’s caring.
if anyone wants to add hashtags to the tweet msg, you can add the following line of codes.
// 1- Create a hashtag variable first and assign it to a list of your hashtags separated with comma:
$hashtag_list = \’photography,color,photoart,streetphotography,nft,nftart\’;
// 2- Add the hashtag variable to the twitter URL
$twitterURL = \’https://twitter.com/intent/tweet?text=\’.$sb_title.\’&url=\’.$sb_url.\’&via=wpvkp\’.\’&hashtags=\’.$hashtag_list;
That\’s it. Very simple.
Cheers
TayDel says
Upps’ sorry… the code is massed up with php escape thing… Maybe you guys can clean it up when you publish the post.
thanks
shadhin says
How to automatic so that the social icons do not work on all pages, social icons will work only where i use the shortcode.
shadhin says
Social icons will not show on all pages, social icons will show only where the shortcode is used. How to do it ?
Jim says
How can I exclude the share section on certain pages? I do not want it to show on my WooCommerce shopping cart and payment pages. Thanks, Jim
Artem says
Thank you, it`s really useful and simple widget!
olGerva says
Great post and code, implemented smoothly.
I wanted to ask if you can give me a minimum of guidance on how to add mailto sharing.
Thanks
Dhritimoy Gopgarai says
Hi,
How can we change Twitter’s new logo here?
Editorial Team says
It seems that fontawesome does not have the new logo, at least not on the version we use here unfortunately.
Satsok says
I don’t know how old this post is but I wanted to say a big thanks.
Due to this awesome function, I could remove this AddToAny plugin and reduce the DOM by 60 elements, without mentioning the javascript benefits.
It worked at once, I only had to do my minor CSS mods and use vitrue_icons and its codes as a font family for the icons.
Thanks again.
Satsok says
Something will drive me crazy today.
As I said, it worked a tread, but…
I have a multisite with 3 sites in subfolders and each represents a language, so en/…de/ etc.
I have 3 child themes with their corresponding functions.php each and the main theme is virtual premium.
The sites settings are identical and everything if working fine, the style.css on each child theme folder are identical(except some languages strings if they exist), and the functions.php are identical, checked all day with notepad++.
Cache plugin WP Rocket, cleared 100 times today.
So, what is the problem?
All buttons work fine in two of the sites, but in /de/ site only the Pinterest button doesn’t create the sharer url.
No matter the hours I spend I cannot spot where the hell is the problem, why Pinterest button is present but not working?.
I checked functions.php, style.css, all sites settings again, cleared many many times the cache, and the cloudflare cache, my browsers cache, everything humanly possible.
Nothing, it doesn’t work, I just write it because I never met again such a strange problem.
Any idea?
Satsok says
I found the troublemaker! Discovered by accident.
assets.pinterest.com/js/pinit.js script file was inside my /de/ children’s theme footer.php
Who put it there and why? Probably me, I was doing some testing with the pin button some time ago, but I can’t remember.
Now it works.
Benny says
Hey,
I’m using the code for a few years now and it worked perfectly. But recently I have this weird thing happening. There is the word “Array” showing before the icons. Have looked everywhere to see what could causing this issue, but can’t find anything.
Editorial Team says
Please check out the update at the bottom of the page and let us know if it worked.
Myranda Klosterman says
Hello,
For some reason the word ” ARRAY” is showing before the html for this shortcode. It wasn’t always like this but I’m not sure how i would go about fixing it. The rest of the html after that text is behaving okay.
Any ideas why this could be happenning?
Editorial Team says
Please check out the update at the bottom of the page and let us know if it worked.
Myranda Klosterman says
Hello,
So “ARRAY” is still showing up when I use the shortcode, otherwise it works when it is automatically to the end of the post. Does the code need to be adjusted for the shortcode usage?
Editorial Team says
Hi, did you use the updated code we posted in May? That should fix your issue.