Easy Way to Add Social Media Count Button in WordPress

In this tutorial, we will learn how to add manually social media count widget button on wordpress site. Yes, there are plenty of social button plugin available for WordPress, but for reasons of optimization we must minimize the use of plugin also why install a plugin when you can do it with few lines of code.

You may be interested in other customized twentyten theme tutorial:

Step 1. Got the widget code

We found these code from WPBeginner article, here.
Twitter widget:

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

Other button style: TweetMeme Retweet button

Facebook like widget:

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

Other button style: Facebook like button

Stumble Upon widget:

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

Other button style: Stumble Upon button

Digg widget:

<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 DiggMedium" href="http://digg.com/submit?url=<?php the_permalink(); ?>"></a>

Other button style: Digg button

LinkedIn widget:

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

Other button style: LinkedIn

For other social media widget, you can find on wpbeginner article, here.

Step 2. Edit the single.php

In this tutorial we’ll use TwentyTen theme as a case study.
First, let’s create the framework :

<div class="twitter_button">
</div>
<div class="facebook_button">
</div>
<div class="stumbleupon_button">
</div>
<div class="digg_button">
</div>
<div class="linkedin_button">
</div>
<div class="clear"></div>

Then, please input all of social media code above on that framework like this:

<div class="twitter_button">
<script type="text/javascript">
tweetmeme_url = '<?php the_permalink() ?>';
tweetmeme_source = 'your twitter id';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

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

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

<div class="digg_button">
<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 DiggMedium" href="http://digg.com/submit?url=<?php the_permalink(); ?>"></a>
</div>

<div class="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>
</div>

<div class="clear"></div>

Add the code above on the class “entry-utility” on twentyten theme single.php file, start from line 54.

<div class="entry-utility">
	<?php twentyten_posted_in(); ?>
	<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
	
	Please add the code above here

</div><!-- .entry-utility -->

Step 3. The styling

Now we will style the CSS. Open the style.css and at the very bottom add:

.clear {clear: both;}
.twitter_button, .facebook_button, .linkedin_button, .digg_button, .stumbleupon_button { 
width: 70px; 
height: 70px; 
float: left; 
margin: 20px 0px; 
background-color: #DFDFDF; 
padding: 10px; 
margin-right: 20px; 
text-align: center;
}

The Result

If this all goes according to plan, it should look rather nice, something similar to this:

That’s All. Hope it useful. And when it comes to adding more style on our social media button, your own creativity is the only limit! Feel free to share your ideas in the comments!

15 Comments to “Easy Way to Add Social Media Count Button in WordPress”

Add Comments (+)

  1. Ratesman says:

    Great post, very nice tutorial, thankx :)

  2. Purush says:

    Great post! thanx a ton!

  3. Rob says:

    Thanks for sharing!

  4. Biju Subhash says:

    Thank you for the great tutorial..

  5. Awesome. Just what I was looking for and implemented on my website within minutes.

  6. Savina Eric says:

    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.

    Anye idea?

    Thanks in advance,

    Eric

  7. Indobisnis says:

    Great Post. Thx for sharing this tutorial very usefull +1

  8. For not so techy people like my grandma I prefer using the plugins. But thanks for the post though..

  9. Shaina Tim says:

    I am dependent on plugins but this is also cool. Thank you for the tips. Great job.

  10. Roel Yap says:

    Nice job, easy to follow and understand. You have written a great post. Keep on posting!

  11. Jaybee says:

    Hi,

    This is really a great post. It works perfectly on my site. However, does anybody knows how to unify the tweets and fb likes?

    I have an infographic postings which I made a WordPress template for its wide views. The problem is, the posting has 10 fb likes while the wide view page has 1K fb likes. My question is, is there a code for this to unify the post and wide view page social media counts?

    I look forward to hearing back from you guys to resolve my problem.

    Thanks!

Trackbacks/Pingbacks

  1. Easy Way to Add Social Media Count in WordPress | The best Tutorials
  2. Easy Way to Add Social Media Count in WordPress | WebDevKungfu
  3. 50+ Best WordPress Tips and Tutorials of February 2011

Leave a Reply

 

Amazingly Beautiful WordPress Themes