Black & White Notes

How to Add Social Media Share Count Widgets in WordPress

Posted in WORDPRESS by dimazgyba on July 28, 2010

Facebook like button, twitter, dig is the biggest social mediua ever known, here you can increase your trafic 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&#8217;;
s1.parentNode.insertBefore(s, s1);
})();
</script>

<a href=”http://digg.com/submit?url=&lt;?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=&lt;?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&gt;

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&#8221; 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=&lt;?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&gt;

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&gt;

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&gt;

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.

2 Responses

Subscribe to comments with RSS.

  1. Betty said, on February 8, 2011 at 3:43 am

    i found a self contain sharing button on technonsense
    freely downloadable
    it is some more complete than your method
    here’s the link
    http://www.technonsense.com/2011/02/addmeto-my-own-social-sharing-button/
    Not necessarily spam, i think it’s very useful, also for your blog


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: