How to Display Social Media Buttons with count in WordPress

The social media icon is a beautiful part of any WordPress website, since it combines style, simplicity, and functionality to bring more people into your community without distracting them from the rest of the content on your site.

If you take a look at your website(s) right now, where are your social media icons? Do you have any? Are they visible and branded to fit the current look and feel of your website?

These are all questions worth considering, since social icons are the driving force to expanding your online presence and helping you bring in more followers on social networks.

Jeff Bullas has a wonderful blog post outlining the seven questions you need to ask yourself before adding social media buttons to your blog, and these points are worth checking out before implementing your own icons:

Which social networks would you like to link to?

What type of social media buttons do you want? Sharing buttons or links to your platforms?

I would recommend examining the tips provided by Mr. Bullas to understand exactly how to use your social media icons, but once you’ve established a decent strategy, you must implement social icons on your site.

Keep reading to learn how to add social media buttons to your WordPress page using a plugin called Social Count Plus.

The Benefits of Having Social Media Icons on Your Website

I’ve stumbled upon a few blog and business owners who have mentioned that they eventually removed social media icons from their sites since it didn’t seem to have much difference on the amount of people following them. Therefore, they felt that the icons cluttered the interface and took focus away from the blog content. This is a huge mistake, considering social media icons have plenty of benefits.

Social icons push more people to your social accounts, even if it’s only one or two per month.

If you include follower counts with your social icons, this may convince users that you are worth listening to.

Social icons expand the presence of your brand.

They are a much better way to link to your social accounts, compared to simple text links or standalone buttons without much branding involved.

Some social icons tell people that you encourage community and sharing.

Step 1: Install and Activate the Social Count Plus Plugin

Start the process by going to the Social Count Plus Plugin page and downloading the file to install it on your WordPress dashboard. I personally recommend simply navigating to your WordPress backend, going to Plugins > Add New, and typing the name of this plugin into the search bar to find it yourself.

After that, click on the Install Now button and press the Activate Plugin link to complete the first step. This automatically activates the plugin on your WordPress site.

Step 2: Specify Which Social Accounts You Want to Use

Navigate to Settings > Social Count Plus on the left hand side of your WordPress dashboard. For this example, I’m going to use Facebook and Twitter. The initial Settings page asks for you to Activate the social icons you’d like to reveal on your website.

For example, we can click on the checkboxes to activate both Facebook and Twitter to reveal what information is required to implement the social icons.

Step 3: Insert Your Social Account Information

Each social account requires different information, but generally, you’ll need your username and some sort of account key, token or secret.

Let’s start with the Twitter icon. To make a Twitter icon and counter popup on my website, you must paste in the Twitter username ID. This is the page slug or numeric ID towards the end of your Twitter URL.

After that, the system asks for the Twitter Consumer Key, Consumer Secret, Access Token and Access Token Secret. It sounds tough, but the process is rather simple. Click on the link that reads, “Create an App on Twitter in http://dev.twitter.com/apps and get this information”.”

Click on the Create New App Button on the Twitter website.

Fill in infomration like your app name, website and app description. Agree to the terms and conditions and click on the Create Your Twitter Application button.

Keep in mind that you must have a phone number in your Twitter profile to create an app.

Once the app is created, it will bring you to a main app homepage. Click on the tab called Keys and Access Tokens. Copy and paste the following items into the respective WordPress fields:

Consumer Key

Consumer Secret

Access Token (You must scroll down on the Twitter app page and generate this to reveal the number.)

Access Token Secret

Scroll down to the Save Changes button in your WordPress dashboard to complete this process. Keep in mind that Social Content Plus requires varying information from all social accounts, but each one provides handy links to walk you through how to acquire them from each social network.

Step 4: Complete Your General Settings

Before revealing your social media icons on your website, scroll down on the primary Settings page we have been looking at. At the very bottom, you’ll notice two options for making the interface a little cleaner. The first is a checkbox for opening URLs in a new window. The second is for making your links nofollow. Each are recommended, so go ahead and check both of those off.

Once again, save your changes.

Step 5: Design the Social Media Icons

Select the Design tab at the top of the Social Content Plus page. This is where you can specify what you’d like your social icons to look like, and which order you’d like them to be displayed.

As you can see in the screenshots, the Social Content Plus plugin offers visuals for choosing your ideal match. The plugin has four formats, so scroll through those to select the one that works best for your business or blog. You can also scroll down to the bottom of the page and specify what color you’d like the text to show up as. This is simply the text that tells visitors about the follower counts.

You’ll also see an Order header which allows you to drag around your elements. For example, you may want the Facebook icon to show up before Twitter. In that case, drag Facebook all the way over to the left. Comments and posts are included by default, but if you’d like to remove those, go back to the primary Settings page to uncheck those options. Push the Save Changes button to complete your design.

Step 6: Display Your Icons on a WordPress Site

Now that we’ve implemented and designed the social icons, it’s time to place them somewhere on your site for people to see them and click on them. Go to the Shortcodes and Functions tab.

Copy any of the shortcodes to distribute them throughout the site. These are just fine, but I would recommend the following method for implementing the best format with the proper design changes.

That method is completed with a widget. Go to Appearance > Widgets in your WordPress dashboard.

Locate the Social Count Plus widget and drag it into a sidebar, header or footer. Punch in a title if needed, then click on the Save button for the social icons to show up on the frontend of your site.

I placed the widget in my left sidebar, so when I open up the frontend of my site, you’ll be able to see that the designated social icons come up with their respective counts.

If someone clicks on one of the icons, it brings them to the social page for them to follow you or check out your most recent posts.

Over to You…

Having social media icons with counts on your WordPress site is as important as the content your share to your followers. Social media networks are distribution outlets for getting more people to come to your site and for reaching out to new users who may not know exactly what your site is all about.

With the “count” feature, you take it a step further, since users are more willing to click on your social icons when they know that lots of other people are doing it as well.

Devesh thanks for it. I have implemented it on my new blog, http://www.bloggingslogan.com/ BUT there is some error. Can you check my link on Chrome & Mozilla, Mozilla displays properly whereas Chrome hides some of the parts.

Should I play with Margin-Tip:5px something?? Give the me correct code please..

Participate in this conversation via emailGet only replies to your comment, the best of the rest, as well as a daily recap of all comments on this post. No more than a few emails daily, which you can reply to/unsubscribe from directly from your inbox.

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

Exclusive deals

WPEngine: 50% OFF Deal

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.