How to Display Social Media Icons with counts in WordPress

Share this post:

Social Media sites are the second biggest source of traffic, more than 50% of my traffic comes from social media sites such as Facebook and Twitter. To get traffic from these sites you need to engage with your audience. While people will always find the medium to connect with your blog, but how well the social media is integrated on your website plays a great role in attracting traffic.

One of the greatest ways to build social media following is by putting the follow buttons in the sidebar of your WordPress website.

In this post, we will going to talk about adding social media icons with counts in WordPress.

One of the first steps is to get the counts, fans, followers of all the popular social media channels. There is an handy plugin available that easily lets you get counts in plain text. The plugin hasn’t been updated but I tested it on WordPress 3.5 and it just works fine.

If you want to manually get the social count, than Jonathan has a great post for you.

Add Social Media Icons with counts in Sidebar

Step 1: To add the social media buttons, you would need to edit style.css file, make sure to backup your theme before editing anything.

Social Media Icons

These icons are designed by BlueGraphic, so download the icons and upload them to your theme folder or if you want to add the exact buttons like we have here on WPKube, than download the customized buttons.

Next, Go to Dashboard > Appearance > Themes > Style.css and paste the following code:

#social-sidebar {width:300px;display:inline-block;padding:10px;margin-bottom:-17px;margin-top:-25px;}
#social-sidebar .rss-side {float: left;height: 36px;width: 124px;margin:0 14px 0 0; }
#social-sidebar .twitter-side {float: left;height: 36px;width: 124px;margin:0 10px 0 0; }
#social-sidebar .facebook-side {float: left;height: 36px;width: 124px;margin:10px 14px 0 0; }
#social-sidebar .google-side {float: left;height: 36px;width: 124px;margin:10px 10px 0 0; }

#social-sidebar .twitter-side a.social-twitter {background: url("../images/twitter_button.png") no-repeat scroll 0pt 0pt transparent;
display:block;color:#303030;height:35px;padding-left:82px;width:126px;font-size:13px;line-height:34px;}
#social-sidebar .twitter-side a.social-twitter:hover {color:#3366a5;}
#social-sidebar .facebook-side a.social-facebook {background: url("../images/facebook_button.png") no-repeat scroll 0pt 0pt transparent;color:#303030;
display:block;height:35px;padding-left:82px;width:126px;font-size:13px;line-height:34px;}
#social-sidebar .facebook-side a.social-facebook:hover {color:#3366a5;}
#social-sidebar .rss-side a.social-rss {background: url("../images/rss_button.png") no-repeat scroll 0pt 0pt transparent;color:#303030;
display:block;height:35px;padding-left:82px;width:126px;font-size:13px;line-height:34px;}
#social-sidebar .rss-side a.social-rss:hover {color:#3366a5;}
#social-sidebar .google-side a.social-google {background: url("../images/gplus_button.png") no-repeat scroll 0pt 0pt transparent;color:#303030;
display:block;height:35px;padding-left:82px;width:126px;font-size:13px;line-height:34px;}
#social-sidebar .google-side a.social-google:hover {color:#3366a5;}

Step 2: Add the following code in the widget to show the social media buttons:

<div id="social-sidebar">

<div class="rss-side">
<a class="social-rss" href="http://feeds.feedburner.com/wpkube" target="_blank" rel="external nofollow">1098</a>
</div><div class="twitter-side">
<a class="social-twitter" href="http://www.twitter.com/wpkube" target="_blank" rel="external nofollow">1285</a>
</div>
<br />
<div class="facebook-side">
<a class="social-facebook" href="http://www.facebook.com/wpkube" target="_blank" rel="external nofollow">1380</a>
</div>
<div class="google-side">
<a class="social-google" href="https://plus.google.com/100270244961423693287" target="_blank" rel="external nofollow">159</a>
</div>

</div>

You have successfully added the social media buttons in WordPress,  now change all the links to your own social media channels.

If you have any issues or couldn’t been able to make this code work, please let us know in the comments below.

About the Author: Devesh Sharma is a WordPress fanatic and loves experimenting with WordPress themes & plugins.Get more from Devesh on  and Twitter.
11 comments… add one
    • Devesh says

      haha I am not a big fan of premium plugins ;). Thanks for stopping by and sharing the post :). Appreciate your great support.

  1. Sagar Rai says

    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..

  2. Arun says

    I already have a twitter button in my WordPress template. My issue is while someone re-tweet my post it also updates into my website and the count increase. Suddenly it is not happening anymore.

    Could you guide me please regarding this …

Leave a Reply