Social Media Share Icons without a Plugin

There are many free WordPress plugins for adding social media sharing buttons to your posts and pages and most of them work very well. Some of them rely upon 3rd party sites which gather statistics about the pages the plugin is on or they track your viewers for their own marketing purposes. Or the plugin itself is bloated with unnecessary code and/or undesired features.

If you are like me and desire to keep things simple and efficient then using a shortcode to display social media sharing icons may be what you are looking for. Use the shortcode in the Text widget or in a Post or Page.

Shortcode: [atconet-share-icons]

To use the Font Awesome 5.x icons add this to your theme’s header.php file:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Add to your theme’s functions.php:

// social share buttons shortcode
function atconet_social_share_icons() {

	global $wp;
	$atconet_url = urlencode(home_url(add_query_arg(array(),$wp->request)) );
	// Get current page title
	$atconet_title = str_replace( ' ', '%20', wp_title( '', false ) );
	// Get Post Thumbnail for pinterest
	$atconet_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
	// Construct sharing URL without using any script
	$facebook_url = 'https://www.facebook.com/sharer/sharer.php?u='.$atconet_url;
	$twitter_url = 'https://twitter.com/intent/tweet?text='.$atconet_title.'&url='.$atconet_url.'&via=atconet';
	$linkedin_url = 'https://www.linkedin.com/shareArticle?mini=true&url='.$atconet_url.'&title='.$atconet_title;
	$pinterest_url = 'https://pinterest.com/pin/create/button/?url='.$atconet_url.'&media='.$atconet_thumb[0].'&description='.$atconet_title;
	// List of links
	$social_icons = '<!-- atconet-social-icons -->';
	$social_icons .= '<ul class="atconet-social-icons">'. PHP_EOL;
	$social_icons .= '<li><a title="Share on Facebook" href="'.$facebook_url.'" target="_blank"><i class="fab fa-facebook-square"></i>Facebook</a></li>'. PHP_EOL;
	$social_icons .= '<li><a title="Share at Twitter" href="'. $twitter_url .'" target="_blank"><i class="fab fa-twitter"></i>Twitter</a></li>'. PHP_EOL;
	$social_icons .= '<li><a title="Share at Linkedin" href="'.$linkedin_url.'" target="_blank"><i class="fab fa-linkedin-in"></i>LinkedIn</a></li>'. PHP_EOL;
	$social_icons .= '<li><a title="Share at Pinterest" href="'.$pinterest_url.'" data-pin-custom="true" target="_blank"><i class="fab fa-pinterest"></i>Pinterest</a></li>'. PHP_EOL;
	$social_icons .= '<li><a title="Share by Email" href="mailto:?subject='.$atconet_title.'&body='.$atconet_url .'"><i class="fa fa-envelope" aria-hidden="true"></i>Email</a></li>'. PHP_EOL;
	$social_icons .= '<li><a title="Share by Text" href="sms:?body='.$atconet_url .'"><i class="fas fa-sms"></i>Text Message</a></li>'. PHP_EOL;
	$social_icons .= '</ul>';	
	$social_icons .= '<!-- #atconet-social-icons -->'. PHP_EOL;

	return $social_icons;

}
add_shortcode( 'atconet-share-icons', 'atconet_social_share_icons' );

Add to your theme’s stylesheet: (can be modified to your liking)

/* remove bullets & indent from list */
.atconet-social-icons {
list-style-type: none;
padding-left: 0;
}

/* increase icon size & space next to text */
.atconet-social-icons i {
font-size: 1.3rem;
min-width: 30px;
}

/* link color */
.atconet-social-icons li a {
color: #222;
}

/* link hover color */
.atconet-social-icons li a:hover {
color: #0244be;
}