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.
- Digg
- StumbleUpon
- Tweetmeme Retweet
- Facebook Share
- Facebook Like Button
- Njuice Google Buzz
- Sphinn
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="https://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="https://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="https://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="https://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&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.
<script type="text/javascript"> reddit_url = "<?php the_permalink(); ?>"; reddit_title = "<?php the_title(); ?>"; </script> <script type="text/javascript" src="https://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="https://button.njuice.com/buzz.js"></script>
Sphinn
<script type="text/javascript">submit_url = '<?php the_permalink(); ?>';</script> <script type="text/javascript" src="https://sphinn.com/evb/buttons.php?b=small"></script>
LinkedIn Button
<script type="text/javascript" src="https://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.
