Advertisements

How to add WhatsApp to Shared Counts

In my opinion, Shared Counts is missing two large players in the social media game from their selection of preconfigured buttons. In a previous guide I showed you how to add Reddit to Shared Counts and with that, one of the two missing services was added. But perhaps even more important than a Reddit share button is one for the popular messaging app from Facebook, WhatsApp.

WhatsApp has all but replaced SMS and other messaging services in Europe (where I come from), Latin America, India, and Africa. It has over 2 billion users worldwide and is available for both iOS and Android. You can use WhatsApp on a desktop-class device via a web app and my WhatsApp share button for Shared Counts should work for every type of device just mentioned. While nobody liked Facebook taking over and controlling WhatsApp, it doesn’t appear to have stopped anyone from using it. Perhaps that will change when ads are added to the app.

Creating the WhatsApp snippet for Shared Counts

As with the Reddit share button, this one will be added using just a few lines of quite understandable code. As I did with the Reddit share button, I will be providing you with the full code which will work without any modifications on your behalf. You won’t even have to insert a WhatsApp logo.

To be able to activate the WhatsApp snippet you have to install and activate the Code Snippets WordPress plugin. Once done, select the option to add a new code snippet in the menu and paste the following code:

function shared_counts_whatsapp_admin_services( $services ) {

	$services['whatsapp'] = 'WhatsApp';
	return $services;
}
add_filter( 'shared_counts_admin_services', 'shared_counts_whatsapp_admin_services' );

function shared_counts_whatsapp_link_properties( $link ) {

	if ( 'whatsapp' === $link['type'] ) {
		$link['link'] = 'https://wa.me/?text=' . $link['url'];
		$link['target'] = '_blank';
		$link['label']  = esc_html__( 'Share', 'shared-counts' );
		$link['rel'] = 'nofollow noopener noreferrer';
		$link['attr_title']     = esc_html__( 'Mit WhatsApp teilen', 'shared-counts' );
		$link['icon'] = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="22.84375" height="32" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"></path></svg>';
	}

	return $link;
}
add_filter( 'shared_counts_link', 'shared_counts_whatsapp_link_properties' );

You can then save and activate the snippet to complete the first part. Next, you will want to enter the Shared Counts settings and add the WhatsApp share button which should now be added to the list.

Share buttons in Shared Counts

Styling the WhatsApp share button for Shared Counts

The WhatsApp button won’t display quite correctly yet. For it to do so, you will have to add a few lines of custom CSS in the WordPress Customizer. You can find out which CSS classes you need to adjust using the method described in my previous article. I went with the official WhatsApp green as my standard colour and a slightly darker variant when the cursor is hovered over it.

.shared-counts-wrap.style-rounded .reddit.shared-counts-button {
background-color: #25D366;
}

.shared-counts-wrap.style-rounded .reddit.shared-counts-button:hover {
background-color: #2ab55e;
}

With the CSS added your WhatsApp social share button for Shared Counts should be displayed as you’d expect it to and there is further work to be done.

About Liam Alexander Colman

Liam Alexander Colman has been working with GeneratePress for over two years and has built countless WordPress websites using it. In his personal setting, Liam maintains six websites. While not a developer, he has created innumerable GeneratePress Elements and is well versed in customizing the theme to his liking. Visit this link for more information and a showcase of his work.

Leave a comment

Advertisements