Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Social Media Share Count Widgets in WordPress

Last updated on by
Follow WPBeginner on YouTube
How to Add Social Media Share Count Widgets in WordPress

Earlier on this blog, we created a Social Media Cheat Sheet for WordPress, but that only showed you how to add social media buttons. As social media grows and the web matures, we are seeing less and less of the simple social media buttons. Social media buttons are being replaced by the share count widgets such as tweetmeme retweet widget, digg counter, facebook share and more. In this article, we will show you how you can add different social media share count buttons in WordPress.

Grab the Original Widget

Most of the share counts are a piece of JavaScript that you must retrieve from the social media service. This article is also meant to serve as a one stop shop. You can come here to find the location for top social media services because a lot of them makes it really hard to find on their sites. The goal of this article is to avoid using as many plugins as possible, so when you are picking the type choose site: Normal.

Customizing the Codes

Because we chose the code for a Normal Site, we may need to modify it to make it compatible with WordPress. We are also going to be showing just the Compact Share Count Buttons. You can ofcourse use the codes as a guide to get different sizes.

Note: You must paste all of these codes inside a loop, most likely in your single.php file.

Digg

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

<a class="DiggThisButton DiggCompact" href="http://digg.com/submit?url=<?php the_permalink(); ?>"></a>

Normally, you should not have to add the href part of the link area. But if you don’t, and you have paginated comments or posts, then your digg button will not work on all pages. So if the main page was submitted, the second page will show a submit URL allowing users to submit duplicate content to digg.

StumbleUpon

<script src="http://www.stumbleupon.com/hostedbadge.php?s=1&r=<?php the_permalink(); ?>"></script>

Tweetmeme Retweet

<script type="text/javascript">
tweetmeme_source = 'wpbeginner'; tweetmeme_service = 'bit.ly'; tweetmeme_style = 'compact'; tweetmeme_url = '<?php the_permalink() ?>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Make sure that you change the Tweetmeme_source variable to your twitter handle. Right now it is @wpbeginner. So whenever someone clicks it will show RT @wpbeginner Post Title – Link. We are using bit.ly as the link shortening service, you can change it to others that tweetmeme offers, but bit.ly is the best one.

Facebook Share

<a name="fb_share" type="button_count" share_url="<?php the_permalink(); ?>" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Facebook Like Button

Facebook Like Button is a phonemonal tool for traffic. Syed has shown how it has helped in our WordPress Newsletter in the past.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;"></iframe>

To see more options see How to Add Facebook Like button in WordPress.

Reddit

<script type="text/javascript">
reddit_url = "<?php the_permalink(); ?>";
reddit_title = "<?php the_title(); ?>";
</script>
<script type="text/javascript" src="http://reddit.com/static/button/button1.js"></script>

Njuice Google Buzz Count

Google Buzz do not have an active API that allows to keep track of count. There are a few ways to work around that which gives you some what of a misguided count. But for those users, who want to have a Google Buzz Count, then here is how you can add it.

<script type="text/javascript">
var njuice_buzz_size = 'small';
var njuice_buzz_title = '<?php the_title(); ?>';
var njuice_buzz_url = '<?php the_permalink(); ?>';
</script>
<script type="text/javascript" src="http://button.njuice.com/buzz.js"></script>

Sphinn

<script type="text/javascript">submit_url = '<?php the_permalink(); ?>';</script>
<script type="text/javascript" src="http://sphinn.com/evb/buttons.php?b=small"></script>

LinkedIn Button

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="top"></script>

Source: How to Add Official LinkedIn Button in WordPress

That is all the customizing we need to make each of these widgets work with WordPress perfectly. Now, you may have to customize the styling for it to work with your theme design. You are better of putting these codes above <?php the_content(); ?> code. You can also use our Smart Sharing Plugin, to display a floating icon down your window.

Do you have any other social media widgets that you would like to add? Let us know, and we can get the codes here. If you are using another widget and have the code ready, then please submit it to us, so others can benefit from it as well.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Lawrence Abiodun

    Thank you!
    This is what I have been looking, at least this will reduce accumulation of plugins on my admin.
    Nice work!

  • dchabot3

    Ok, so I can experiment with that. But, can you share your setting?

  • wpbeginner

    @dchabot3 you would need to enter a negative value which will vary on each design. For example -150

  • dchabot3

    Me again,

    I mean your alignment to the left, duh!

  • dchabot3

    Hi,

    I just put in all code and going to give a whirl. Sounds promising, and I like the avoidance of yet another widget plugin. After installing the Smart Sharing widget it messed up my site alignment. If I can ask what settings did you use to align everything to the right <- here?

    Thanks

  • ericsavina

    Hello,

    This tutorial is great and I was able to install the buttons that I needed. Unfortunately, it seems that I have a problem with the permalinks and, after hours of looking for what went wrong, I still can not figure out where the problem is coming from.

    Facebook is telling me that : “The page at http:// could not be reached.”

    Tweetmeme is sending me to this page: http://tweetmeme.com/about/fail_invalid

    Linkedin: There was a problem performing this action, please try again later. 9with the following URL: http://www.linkedin.com/cws/share?url=%3C%3Fphp+the_permalink%28%29%3B+%3F%3E&original_referer=http%3A%2F%2Fwww.saas-app.fr%2Fallcat%2Ffinance%2Flogiciel-auto-entrepreneur%2F

    Stumbleupon: same as linkedin (with URL: http://www.stumbleupon.com/submit?url=%3C%3Fphpthe_permalink%28%29%3B%3F%3E)

    I guess the %3C%3F and %28%29%3B%3F%3E have something to do with my problem.

    Any idea?

    Thanks in advance,

    Eric

  • anandy385

    if i add this codes to smart sharing widget it gets out of phase please check and help

    http://rapidtechreview.com/android/adwlauncher-ex-an-awesome-launcher.html/

  • anandy385

    hey in my site the like button is out of the box border how to fix it?

    my site is http://www.rapidtechreview.com please help

  • Choq

    Was a very nice expression. Congratulations. worked for me too ..

  • http://bizzbeginnings.com Sean Sweeney

    Hi there,

    Great post. Quite honestly, if people just spent a little time learning how easy adding features manually really is, they would see a substantial increase in their sites speed should they use a lot of plugins. This post was exactly what I was looking for (and I’ve been searching for sometime).

    I noticed the other day that LinkedIn released their own share button. Would you consider adding that to your examples above? It would be greatly appreciated.

    Thank you and keep up the great work!

    • http://www.wpbeginner.com Editorial Staff

      Yes, code added :)

      • http://bizzbeginnings.com Sean Sweeney

        Amazing. Thank you for the quick response. Great website.

        S

  • http://simplyjaime.com Jaime

    Great info! You guys rock!

    Is there ever a time when you would recommend using plugins instead of modifying the php? Also, you mention putting this code in single.php – when do you think it would make sense to “clutter” index.php with these counters?

    –Jaime

    • http://www.wpbeginner.com Editorial Staff

      You should avoid using plugins, if it is adding additional HTTP queries such as loading additional CSS files, JS etc. A lot of sharing plugins tend to add their own CSS to have the customizations. You do not need to have multiple CSS files being loaded when you can combine those… Same goes with JS…

      All of this can be done manually. It won’t be efficient to add these in your index.php unless you have some caching scripts in place to increase load time. You can add this with Lazy Load if you want in your index.php. The reason why we don’t recommend it is because it adds additional scripts being loaded for each post on the index page.