Easy Way to Add Social Media Count Button in WordPress

24th Feb 2011 | Posted by Eko S. | 18 Comments

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 (+)

Ratesman says:

February 25, 2011 at 08:59

Great post, very nice tutorial, thankx

Reply
- Eko S. says:
  
  February 25, 2011 at 18:34
  
  Hi, thanks for comment…glad you like this tutorial.
  You can subscribe our RSS feed to get exclusive update
  
  Reply
Purush says:

February 27, 2011 at 05:03

Great post! thanx a ton!

Reply
Rob says:

March 8, 2011 at 10:01

Thanks for sharing!

Reply
Biju Subhash says:

March 11, 2011 at 23:11

Thank you for the great tutorial..

Reply
The Shirt List says:

June 2, 2011 at 00:07

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

Reply
Savina Eric says:

July 3, 2011 at 08:37

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

Reply
- Eric Savina says:
  
  July 5, 2011 at 20:38
  
  Hi,
  
  Sorry it was just a problem with my theme. Got it fixed.
  
  Eric
  
  Reply
  - Eko S. says:
    
    July 8, 2011 at 23:43
    
    HI Eric,
    
    I apologize for my late response, glad it fixed now
Indobisnis says:

July 21, 2011 at 16:20

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

Reply
GraceArreza Katre says:

September 22, 2011 at 03:24

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

Reply
Shaina Tim says:

September 28, 2011 at 04:34

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

Reply
Roel Yap says:

October 3, 2011 at 23:56

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

Reply
- Fleta says:
  
  October 25, 2011 at 05:49
  
  Appreciation for this ionfrtmaion is over 9000thank you!
  
  Reply
Jaybee says:

January 25, 2012 at 06:04

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!

Reply