Since we’re living in Google Page Experience and Core Web Vitals world, why would you burden your WordPress page load times using Social Media Share plugins? Since most social share buttons use extensive JS and CSS rules just to share your content.
Let RankYa show you how to add social share buttons to your WordPress built website without the use of WordPress plugins. Its much leaner and cleaner way to add sharing options in 2022
Although there are many ways to accomplish this task, the best way to add links to popular social media platforms such as Facebook Twitter Pinterest WhatsApp LinkedIn is either hooking in to WordPress
Video Tutorial Showing How to Add Social Share Links to WordPress Without Using Plugins
Download Sample WordPress PHP and CSS Codes by RankYa (.zip format)
As always, RankYa making your job easy for adding social share links to WordPress without plugins, simply press the links below to download sample codes for you to use on your WordPress built website.
- AUTOMATIC VERSION WordPress Function
- SHORTCODE VERSION WordPress Function
- CSS Codes for Styling Social Media Link Buttons
WordPress Specific Codes for Automatically Adding Social Share Links to WordPress Using the_content Function
You can simply use the code below to automatically insert social media share links to blog posts, after content area. All you have to do is insert the code in wp-content > themes > yourCurrentWordPressTheme > functions.php
function rankya_social_share_buttons($content) {
$siteurlfromsettingsgeneral = get_bloginfo( 'url' );
$domainparts = parse_url($siteurlfromsettingsgeneral);
$domain = isset($domainparts['host']) ? $domainparts['host'] : '';
if (preg_match('/(?P
WordPress Specific Codes for Adding Social Media Share Links to WordPress Using WordPress Shortcodes
This below code basically allows you to do the same thing but doe so using a WordPress shortcode. This will allow you to add the social media button links anywhere you want on your WordPress site. For example: in the sidebar using Widgets, or in the web page Footer section.
function rankya_social_share_buttons() {
$siteurlfromsettingsgeneral = get_bloginfo( 'url' );
$domainparts = parse_url($siteurlfromsettingsgeneral);
$domain = isset($domainparts['host']) ? $domainparts['host'] : '';
if (preg_match('/(?P
All you have to do is insert the above code in wp-content > themes > yourCurrentWordPressTheme > functions.php
Then, use the WordPress shortcode [insertrankyasharebuttonshortcode] to add social media share buttons to WordPress without using a plugin.
CSS Styling for your Button Links
Now that the WordPress functions are in place, its time to style the button links. I’ve created CSS rules to match the brand colors of major social media platforms. Simply place this inside WordPress Theme style.css
/*
Styles for adding social media share links to website built on WordPress CMS.
*/
div#content a:active,
div#content a:focus,
div#content a:hover {
color: #00f;
background-color: #f0f0f0;
}
.social-share-div a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
background:#2d2d2d
}
.social-share-div {
display: block;
width: auto;
margin: 1rem 0 1rem 0;
}
.share-buttons {
display: block;
width: 100%;
}
.share-buttons > a {
padding: .7rem .4rem;
margin-top: 1rem;
margin-right: 0.5rem;
}
a.buttonlink {
width: auto;
display: inline-block;
text-align: center;
border-radius: 7px;
color: #FFFFFF !important;
line-height: 1.6;
text-decoration:none;
font-size:16px; /*for Search Console Mobile Usability*/
position: relative;
}
.share-button-profile-twitter {
background: #03A9F4 !important;
}
.share-button-profile-twitter:active,
.share-button-profile-twitter:focus,
.share-button-profile-twitter:hover {
background: #0093d6 !important;
}
.share-button-profile-facebook {
background: #23599A !important;
}
a.buttonlink.share-button-profile-facebook:active,
a.buttonlink.share-button-profile-facebook:focus,
a.buttonlink.share-button-profile-facebook:hover {
background: #6284B6 !important;
}
.share-button-profile-whatsapp {
background: #4CAF50 !important;
}
a.buttonlink.share-button-profile-whatsapp:active,
a.buttonlink.share-button-profile-whatsapp:focus,
a.buttonlink.share-button-profile-whatsapp:hover {
background: #3d9440 !important;
}
.share-button-profile-linkedin {
background: #1a7baa !important;
}
a.buttonlink.share-button-profile-linkedin:active,
a.buttonlink.share-button-profile-linkedin:focus,
a.buttonlink.share-button-profile-linkedin:hover {
background: #136288 !important;
}
.share-button-profile-pinterest {
background: #bd081c !important;
}
a.buttonlink.share-button-profile-pinterest:active,
a.buttonlink.share-button-profile-pinterest:focus,
a.buttonlink.share-button-profile-pinterest:hover {
background: #a10718 !important;
}
Advantages of Using WordPress Social Share Plugins
- Easy to install and use
- NO coding or WordPress Theme file edits
- Customization features for share buttons (color, position)
Advantages of Using Social Share Links on WordPress Without a Plugin
- There are no heavy JS Scripts to load (that means, superfast sharing option)
- Fully customizable
- Ability to add Custom Tracking code for tracking links and shares
- Unlike using WordPress social plugins, page load times aren’t affected due to heavy WP plugins
- You’ll avoid security issues due to poor coding practises found in WordPress plugins
- You’ll avoid WordPress plugin conflicts upon each WordPress update
- No need to be stuck with a particular plugin provider (e.g. if you use WP plugins like AddtoAny, you may lose share link count data if you stop using their plugin)
What better way is there to make this code available to other WordPress site owners?
Thanks a lot.
Hello, first of all thanks for such a great script. I’ve the following problem;
I’m always getting (on PHP 8.0) : PHP Warning: preg_match(): Compilation failed: unrecognized character after (?P at offset 3 in functions.php on line 42″)
and the respective line is the one in your code starts with: if (preg_match
so any clue would be much appreciated!
Hi Andreas, first of, test to see if the code works on your server, also PHP Warning are just that, warnings (its the PHP fatal errors you need to always fix). As for your question try this
if (preg_match(‘/(?P[a-z0-9][a-z0-9-]{1,63}\.[a-z\.]{2,6})$/i’, $domain, $regs)) {
I’ve removed the escapge character from [a-z0-9-]
That was great, thanks a lot. I was needing it, since, I don’t really want to load too many plugins on my Blog.