How to Add Social Media Share Links to WordPress WITHOUT a Plugin

share link without a plugin

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.

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[a-z0-9][a-z0-9\-]{1,63}\.[a-z\.]{2,6})$/i', $domain, $regs)) { $siteurlfromsettingsgeneral = strstr( $regs['domain'], '.', true ); } if(is_single()){ // Get singular which will allow to add the shortcode on WordPress Widget OR you could just use is_single $rankya_url = urlencode( get_permalink() ); // get_the_title but add space %20 $rankya_title = str_replace( ' ', '%20', get_the_title()); // Core Web Vitals are important for shares $twitterURL = 'https://twitter.com/intent/tweet?text='.$rankya_title.'&url='.$rankya_url.'&via='.$siteurlfromsettingsgeneral.''; $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$rankya_url; $whatsappURL = 'whatsapp://send?text='.$rankya_title . ' ' . $rankya_url; $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$rankya_url.'&title='.$rankya_title; //if featured image set, use if ( has_post_thumbnail() && is_single() ) { $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id,'full', true); $pinterestNewURL = 'https://pinterest.com/pin/create/button/?url='.$rankya_url.'&media='.$thumb_url[0].'&description='.$rankya_title; } else{ $pinterestNewURL = 'https://pinterest.com/pin/create/button/?url='.$rankya_url.'&description='.$rankya_title; } // Add sharing button at the end of single posts add_filter( 'the_content', 'rankya_social_share_buttons'); OR you can also use it anywhere else, but pinterest image doesn't show in PAGES, so thus, comment pinterest line $content .= '<div class="social-share-div"><strong>Help others, share this content</strong><div class="share-buttons">'; $content .= '<a class="buttonlink share-button-profile-twitter" href="'. $twitterURL .'" target="_blank" rel="nofollow noopener">Twitter</a>'; $content .= '<a class="buttonlink share-button-profile-facebook" href="'.$facebookURL.'" target="_blank" rel="nofollow noopener">Facebook</a>'; $content .= '<a class="buttonlink share-button-profile-whatsapp" href="'.$whatsappURL.'" target="_blank" rel="nofollow noopener">WhatsApp</a>'; $content .= '<a class="buttonlink share-button-profile-pinterest" href="'.$pinterestNewURL.'" data-pin-custom="true" target="_blank" rel="nofollow noopener">Pin It</a>'; $content .= '<a class="buttonlink share-button-profile-linkedin" href="'.$linkedInURL.'" target="_blank" rel="nofollow noopener">LinkedIn</a>'; $content .= '</div></div>'; return $content; } else { // if not is_single blog posts return just the content return $content; } }; // filter below automatically will add buttons add_filter('the_content', 'rankya_social_share_buttons');

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[a-z0-9][a-z0-9\-]{1,63}\.[a-z\.]{2,6})$/i', $domain, $regs)) { $siteurlfromsettingsgeneral = strstr( $regs['domain'], '.', true ); } if(is_single()){ // Get singular which will allow to add the shortcode on WordPress Widget OR you could just use is_single $rankya_url = urlencode( get_permalink() ); // get_the_title but add space %20 $rankya_title = str_replace( ' ', '%20', get_the_title()); // Core Web Vitals are important for shares $twitterURL = 'https://twitter.com/intent/tweet?text='.$rankya_title.'&url='.$rankya_url.'&via='.$siteurlfromsettingsgeneral.''; $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$rankya_url; $whatsappURL = 'whatsapp://send?text='.$rankya_title . ' ' . $rankya_url; $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$rankya_url.'&title='.$rankya_title; //if featured image set, use if ( has_post_thumbnail() && is_single() ) { $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id,'full', true); $pinterestNewURL = 'https://pinterest.com/pin/create/button/?url='.$rankya_url.'&media='.$thumb_url[0].'&description='.$rankya_title; } else{ $pinterestNewURL = 'https://pinterest.com/pin/create/button/?url='.$rankya_url.'&description='.$rankya_title; } // Add sharing button at the end of single posts add_filter( 'the_content', 'rankya_social_share_buttons'); OR you can also use it anywhere else, but pinterest image doesn't show in PAGES, so thus, comment pinterest line $content .= '<div class="social-share-div"><strong>Help others, share this content</strong><div class="share-buttons">'; $content .= '<a class="buttonlink share-button-profile-twitter" href="'. $twitterURL .'" target="_blank" rel="nofollow noopener">Twitter</a>'; $content .= '<a class="buttonlink share-button-profile-facebook" href="'.$facebookURL.'" target="_blank" rel="nofollow noopener">Facebook</a>'; $content .= '<a class="buttonlink share-button-profile-whatsapp" href="'.$whatsappURL.'" target="_blank" rel="nofollow noopener">WhatsApp</a>'; $content .= '<a class="buttonlink share-button-profile-pinterest" href="'.$pinterestNewURL.'" data-pin-custom="true" target="_blank" rel="nofollow noopener">Pin It</a>'; $content .= '<a class="buttonlink share-button-profile-linkedin" href="'.$linkedInURL.'" target="_blank" rel="nofollow noopener">LinkedIn</a>'; $content .= '</div></div>'; return $content; } }; // Use WordPress shortcode = [insertrankyasharebuttonshortcode] add_shortcode('insertrankyasharebuttonshortcode', 'rankyasharebuttonshortcode'); 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?

Get your business website ready for 2022. Increase Google rankings and website conversions. Check out the latest

Master Class Course (Guaranteed Results)

By RankYa

RankYa is a passionate digital marketer, website optimizer, content creator, and a fully qualified web developer helping businesses of all sizes (big or small) to achieve better results online. We are a reputable and registered Australian business serving valued clients worldwide since 2008, built on hard work, honesty and providing exceptional personalized service

We love sharing our passion through freely available how to videos and courses related to business website marketing and optimization, Google (Search Console, Ads, Analytics, YouTube), SEO, HTML5, Structured Data and WordPress. Thank you for visiting our website. Rest assured that it will serve you well as well.

Leave a comment

Your email address will not be published. Required fields are marked *