Sunday, October 14, 2012

Customized Social Media Counter using Sharrre jQuery

Almost every Blog and Website these days include Social Media buttons, to let their viewers share their content over social networking websites. They do include different icons to make it look cooler. Today, in this tutorial we have used sharrre jQuery to create a customized social media counter for you. So get rid of those old buttons, and present your viewers with an all new counter to track your social popularity.

So here we have an Amazing Social Media Counter to count all included Social Networks and display the total of all. And on Mouse Hover it will show the Social Media Buttons to let viewers like, follow your website or Blog on various social networks.



It doesn't involve much of coding to do this, only we have included a new and amazing jQuery sharrre , and some CSS to provide styling to the counter.

  HTML part  

In this we have just included the tags and ids to show what javascript and CSS is doing. So very less coding is done here. 

<div id="social_sharing">
<div id="shareme" data-url="Your WebPage's URL" data-text="" data-title="We are Social"></div>
</div>


  CSS - Styling  

#social_sharing{
  float:left;
  margin:63px 33% 0 33%;
}
#shareme .box{
  float:left;
  background:#ffebf5;
  padding:20px;
  margin:5% 8% 0 8%;
  width:100%;
}
#shareme .box a{
  color:#404040;
  text-shadow: 0 1px 1px rgba(167,167,167,.4);
}
#shareme .box a:hover{
  text-decoration:none;
}
#shareme .count {   //Showing the Count of total number
  font-weight:bold;
  font-size:50px;
  float:left;
  border-right:2px solid #57b8d1;
  line-height:40px;
  padding-right:10px;
  text-decoration:none;
}
#shareme .share {   //Showing the title you add adjacent to counter
  float:left;
  text-decoration:none;
  font-family:arial,sans-sariff;
  margin-left:10px;
  font-size:18px;
  width:82px;
}
#shareme .buttons {  //Social Media Buttons
  margin-top:100px;
  margin-left:20px;
  position: absolute;
  width:230px;
}
#shareme .button {
  float:left;
  max-width:50px;
  margin:0 10px 0 0;
}
#shareme .facebook 
{
  margin:0 4px 0 0;
}


  JavaScript  

In the Script here, we have included Box type buttons, while you can change this very easily. Alter the script as per. For Facebook's like button, change layout to button_count, for Google change size to medium, for Twitter change count value to Horizontal and for delicious change it to medium.

$(function(){
$('#shareme').sharrre({
  share: {
    googlePlus: true,
    facebook: true,
    twitter: true,
    delicious: true
  },
  enableTracking: true,
  buttons: {
    googlePlus: {size: 'tall'},
    facebook: {layout: 'box_count'},
    twitter: {count: 'vertical'},
    delicious: {size: 'tall'}
  },
  hover: function(api, options){
    $(api.element).find('.buttons').show();
  },
  hide: function(api, options){
    $(api.element).find('.buttons').hide();
  }
});
});


You can very easily include this into your Blog also, be it a blogger's Blog or WordPress's. Simply add a new HTML/CSS Widget and include this file, and you will have an all new Social Media Counter.



4 comments:

  1. The CSS styling has an edge because it made my blog more readable and spacious too. Please continue to give graphic and programming tips as it could lead me to become an efficient seo in Australia.

    ReplyDelete
  2. It makes for additional information and helps empower your content for visitors to see your authority based on the number of social shares. This is the little things that makes a difference in the User Experience field.

    halifax web design
    Rooney

    ReplyDelete
  3. How do you add image to the facebook and +1 shares?

    ReplyDelete
  4. Hi, you got a great tutorial their thank you ! Have you tried to setup the pinterest button with you own button template ?

    ReplyDelete