How to add more share links in blog posts and product pages

Adding social share in blog posts

Simply access Customizer > Blog > Blog posts and you should be able to find the options related to the social icons eg: https://d.pr/i/TjVtF2 . You can disable them or add/remove other icons.

Adding social share in product pages

Please access Customizer > WooCommerce > Product page – Components and look for the Social Sharing icons eg: https://d.pr/i/p61307 .

Adding through code

Before getting started, you will need to install a child theme.

Open rey-child/functions.php with your favorite code editor and add:

add_filter( 'reycore/post/social_share', function( $social_items, $title, $url ){
	// add WhatsApp
	$social_items[] = 'whatsapp';
	// example removing Twitter
	$to_remove = [
		'twitter'
	];
	foreach ($social_items as $key => $value) {
		if( in_array($value, $to_remove, true) ){
			unset($social_items[$key]);
		}
	}
	return $social_items;
}, 10, 3);

In the example above, we’re filtering the current list and adding a WhatsApp sharing link and removing Twitter link.

The reycore/post/social_share filter hook passes 3 arguments – the icons list, page title and page url (encoded).

For each sharing link you want to add please remember you need to know the sharing URL of each social platform or app.

Please let me know if you want more icons possibilities to be added (not necessarily enabled by default), but more icons.

These icons are available in the social icons SVG sprite:

Rss, Envelope, 500px, Youtube, Yelp, Xing, WordPress, Whatsapp, Weixin, Weibo, Vk, Vimeo-v, Vimeo, Viber, Twitter, Twitch, Tumblr, Tripadvisor, Telegram, Stumbleupon, Steam, Stack-overflow, Spotify, Soundcloud, Snapchat, Slideshare, Skype, Reddit, Product-hunt, Pinterest-p, Pinterest, Odnoklassniki, Mixcloud, Meetup, Medium, Linkedin, Jsfiddle, Instagram, Houzz, Google-plus, Gitlab, Github, Free-code-camp, Foursquare, Flickr, Facebook, Facebook-f, Dribbble, Digg, Deviantart, Delicious, Codepen, Bitbucket, Android, Apple, Behance .

Adding a floating WhatsApp icon

I was recently asked how to implement a floating WhatsApp icon in the site. For example https://codepen.io/demoonkevin/pen/MvPEpV .

To add it, please copy the code below and paste it into the child theme’s functions.php and make sure to replace the phone number and text.

add_action('wp_footer', function(){
	if( ! function_exists('reycore__get_svg_social_icon') ){
		return;
	}
	// Edit the phone number
	$phone = '51955081075';
	// Edit the text you want to share
	$text = 'The custom text you want to share';
	?>
	<style>
		.whatsapp-float{
			position: fixed;
			width: 2em;
			height: 2em;
			bottom: 1.3em;
			right: 1.3em;
			background-color: #25d366;
			color: #FFF;
			border-radius: 50px;
			font-size: 30px;
			box-shadow: 2px 2px 3px #999;
			z-index: 100;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.whatsapp-float:hover {
			color:#FFF;
			background-color: #30ea76;
		}
		.whatsapp-float svg {
			font-size: inherit;
		}
	</style>
	<a href="https://api.whatsapp.com/send?phone=<?php echo $phone ?>&text=<?php echo urlencode( html_entity_decode( $text, ENT_COMPAT, 'UTF-8') ) ?>" class="whatsapp-float" target="_blank">
		<?php echo reycore__get_svg_social_icon( ['id' => 'whatsapp' ] ); ?>
	</a>
	<?php
}, 0);