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:

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.

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:

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.

Keep in mind that WordPress has tons of plugins for you to implement this functionality, so if you’d rather try another solution, check out our guide on how to Add a Horizontal Floating Social Bar in WordPress.

Now it’s your turn to tell us about how you utilize social media icons on your WordPress site. Does your online presence include social icons? Do these icons have follower counts for credibility?

Share your thoughts in the comments sections below, and let us know if you have any questions about how to add social media icons to a WordPress website.