Advertisements

Disclosure: This post contains affiliate links. If you click through and make a purchase, I’ll earn a commission, at no additional cost to you. Read my full disclosure here.

How to add Reddit to Shared Counts

Reddit is one of the largest ‘social news aggregation, web content rating, and discussion website‘ worldwide. Not just that but according to Alexa Internet, Reddit is the 17th-most-visited website in the whole wide world. You could say that a well performing article on Reddit can propel any website forward. With that in mind, it’s all the more important that you have a Share to Reddit button in your all of your article’s social share options.

For reasons described previously, I use the WordPress plugin Shared Counts to create my social share buttons (you can see them in the sidebar to the right of your screen) and suggest you do the same if you want your WordPress website to remain fast.

Unfortunately, Shared Counts doesn’t provide you with a Reddit share button on its own. But, as a very developer friendly plugin, one can be added in no time. To help you out, I’ll be sharing my setup’s full code further down, which will hopefully help you get started or possibly even provide you with a finished product.

What you need to add Reddit to Shared Counts

Firstly, you will obviously need to have Shared Counts installed. The second plugin needed to add the Reddit button to Shared Counts, which is by now hopefully installed, is called Code Snippets. If you haven’t already, install it before continuing with this guide.

While this website does specialize in GeneratePress Guides, hence the name, this specific guide will work with any WordPress theme. Though I do highly suggest you give GeneratePress a go if you like fast and developer-friendly themes. It’s the perfect companion for Shared Counts.

Creating the code snippet

You might have already discovered a tutorial on the Shared Counts website on how to add a Reddit share button. There are a few issues with the provided code though and the SVG HTML is not provided. Due to a few missing definitions, which I have added in my code snippet, you would be seeing error messages in the developer console were you to use the code from that tutorial. I have also added an SVG HTML Reddit icon taken from Simple Icons, sparing you the work of doing so.

Filters, more specifically the shared_counts_admin_services and shared_counts_link filters, are used to add new services, such as Reddit, to Shared Counts. I won’t be going through the code line by line as I have confirmed it is working on multiple websites. I also believe that if you are capable of setting up a WordPress website you should be able to roughly figure out how the code works.

In the Code Snippet plugin you will have to create a new snippet and add the following lines of code. The long string of numbers you’re seeing is the SVG HTML icon, hence why this code is much longer compared to what is shared in the tutorial mentioned above:

function be_shared_counts_reddit_admin_services( $services ) {
	$services['reddit'] = 'Reddit';
	return $services;
}
add_filter( 'shared_counts_admin_services', 'be_shared_counts_reddit_admin_services' );

function be_shared_counts_reddit_link_properties( $link ) {

	if ( 'reddit' === $link['type'] ) {
		$link['link']   = 'https://www.reddit.com/submit?url=' . $link['url'];
		$link['label']  = esc_html__( 'Share', 'shared-counts' );
		$link['attr_title']     = esc_html__( 'Share on Reddit', 'shared-counts' );
		$link['target'] = '_blank';
                $link['rel'] = 'nofollow noopener noreferrer';
		$link['icon']   = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path d="M128 320c0-17.673 14.327-32 32-32s32 14.327 32 32c0 17.673-14.327 32-32 32s-32-14.327-32-32zM320 320c0-17.673 14.327-32 32-32s32 14.327 32 32c0 17.673-14.327 32-32 32s-32-14.327-32-32zM321.556 388.389c8.241-6.493 20.188-5.077 26.682 3.166s5.076 20.189-3.167 26.683c-22.948 18.079-57.911 29.762-89.071 29.762s-66.124-11.683-89.072-29.761c-8.243-6.495-9.66-18.441-3.166-26.684 6.495-8.241 18.441-9.659 26.683-3.166 13.211 10.409 39.361 21.611 65.555 21.611s52.344-11.202 65.556-21.611zM512 256c0-35.346-28.654-64-64-64-24.058 0-44.996 13.285-55.926 32.91-32.896-17.997-72.976-29.623-116.64-32.304l38.191-85.763 73.097 21.1c6.576 18.671 24.359 32.057 45.278 32.057 26.51 0 48-21.49 48-48s-21.49-48-48-48c-18.28 0-34.171 10.221-42.277 25.257l-81.453-23.512c-9.112-2.629-18.769 1.861-22.626 10.526l-51.885 116.513c-42.569 2.998-81.631 14.511-113.818 32.118-10.932-19.625-31.883-32.902-55.941-32.902-35.346 0-64 28.654-64 64 0 26.156 15.701 48.627 38.186 58.551-4.035 12.014-6.186 24.552-6.186 37.449 0 88.365 100.288 160 224 160s224-71.635 224-160c0-12.896-2.15-25.431-6.184-37.443 22.485-9.925 38.184-32.401 38.184-58.557zM432 94c9.941 0 18 8.059 18 18s-8.059 18-18 18-18-8.059-18-18 8.059-18 18-18zM32 256c0-17.645 14.355-32 32-32 12.754 0 23.786 7.502 28.923 18.323-16.724 12.683-30.583 27.313-40.833 43.369-11.762-4.735-20.090-16.256-20.090-29.692zM256 474c-102.725 0-186-54.621-186-122s83.275-122 186-122c102.725 0 186 54.621 186 122s-83.275 122-186 122zM459.91 285.692c-10.25-16.056-24.109-30.686-40.833-43.369 5.138-10.821 16.169-18.323 28.923-18.323 17.645 0 32 14.355 32 32 0 13.436-8.328 24.957-20.090 29.692z"></path></svg>';
	}
	
	return $link;
}
add_filter( 'shared_counts_link', 'be_shared_counts_reddit_link_properties' );

With the code pasted you can click on Save Changes and Activate to enable the snippet. Nothing more has to be done in the Code Snippets plugin and you can now move on to adding the Reddit share button to your displayed social networks in Shared Counts.

Displaying the Reddit share button

You can now enter the Shared Counts settings and in the list titled ‘Shared Buttons to Display’ you should be able to select and add Reddit to your already displayed buttons. With the share button added you can save the settings and continue on.

The Reddit share button added to the Shared Counts settings

If you take a look at one of your articles or pages where Shared Counts is enabled you will see that a Reddit icon has been added but there is no background colour and no change in colour when you hover over the invisible button. If you look closely at the provided screenshot, you can see Snoo’s (the Reddit alien) head.

Luckily though, there is an easy and quick fix for this issue. All that is needed are a few lines of custom CSS.

A Reddit share button without a background

Styling the Reddit Shared Counts button with custom CSS

Before being able to style the Reddit button you’ve just added to Shared Counts, you will need to figure out which CSS classes you need to use. These will differ, depending on which style you are using. In this example I am using the rounded style.

Figuring out which CSS classes to use

The easiest way of figuring out what class you need to add to change the style of the Reddit share button is to right-click on one of the existing and correctly displayed buttons (e.g. Twitter) and selecting ‘Inspect’ from the menu. You will then want to find the correct code which should look something like <a href="https://twitter.com/share ...</a>

In the right-hand column the CSS classes which are active for that button are highlighted. In this case they are called shared-counts-wrap.style-rounded and .pinterest.shared-counts-button. Note down or copy both CSS classes as we will be needing them in the next step.

The CSS classes of a button in Shared Counts

Adding custom CSS to the Reddit share button

Now comes the part where you get to actually style your button. To start things off, insert the classes from the previous step in to the custom CSS in the WordPress Customizer. You will then have to replace twitter (or whichever social network you might have picked) with reddit.

As the background colour of my Reddit button in Shared Counts I chose the official Reddit orange (#FF5700) and whenever the mouse is hovered over the button it will change to orangered (#FF4500).

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

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

In summary

In just a few minutes you too can add a Reddit share button to Shared Counts. All you have to do is install the Code Snippets plugin, add your snippet, and style the button using a few simple lines of CSS.

Based on the code provided above you should be able to add any social share button of your liking to Shared Counts. But to make it a bit easier I am planning on publishing a guide on how to add WhatsApp sooner rather than later.

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