Monday, May 28, 2012

Add Social media widget with count to Blogger and Wordpress blogs

Posted On 2 comments Follow us on twitter


Twitter, Facebook

You may see many social widgets around the web; we are sharing one of them. This is one of the best social media widgets (I think so) with this widget you can add link to your social profiles as well as you can show the total count of Twitter followers and Facebook like (or) fan count as a text and more to come.
This widget is not new, while browsing MOHAMMAD MUSTAFA AHMEDZAI, my blogger tricks (mbt) blog, I see this widget, but in that widget you have to manually add count and in this widget you don’t need to add manually, it will be added automatically through these social networks API. This is simple widget based on JavaScript, jQuery.

HTML:




social media widget count

First of all you need HTML and CSS, here it is:
<style>
.counter.pattern {padding:4px}
.counter.pattern .content {padding:5px}
.counter{ color:#333; display:block; float:left; line-height:14px; text-align:center; text-decoration:none; width:30px;margin:0 10px 0 5px}
.counter img{margin:2px 0 5px}
.counter .count{ font-family:CabinMedium,Calibri,sans-serif; font-size:14px; font-weight:700 }
.counter span{ font-family:CabinCondensed,Calibri,sans-serif; font-size:11px; letter-spacing:2px }
</style>


<a rel="nofollow" href="Your Facebook Page Url" class="counter pattern">
                            <div class="content">
                                <img alt="facebook icon" src="http://1.bp.blogspot.com/-st0xPasFyCo/T8MWzu4_wXI/AAAAAAAAANE/rCz1A4PaFOw/s1600/social-balloon-facebook-icon.png" /><br>
                                <span class="count"><div class="facebookFollowers"></div></span>
                                <span>fans</span>
                            </div>
                        </a>
                                  
                                                            <a rel="nofollow" href="Link to Your Twitter ID" class="counter pattern">
                            <div class="content">
                                <img alt="twitter icon" src="http://2.bp.blogspot.com/-GAMCEC5hrqw/T8MW05IzkhI/AAAAAAAAANM/5pLmmTVM0_M/s1600/social-balloon-twitter-icon.png" /><br>
                                <span class="count"><div class="twitterFollowers"></div></span>
                                <span>follows</span>
                            </div>
                        </a>
    
                      

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script>
$(document).ready(function() {
$.getJSON('https://graph.facebook.com/Your facebook page id or username', function(data) {
  $('div.facebookFollowers').text(data.likes + 1 + ' ');
});
$.getJSON("https://api.twitter.com/1/users/show.json?callback=?&screen_name=Your Twitter id", function(data) {
  $('div.twitterFollowers').text(data.followers_count + 1 + ' ');
});
});
</script>
<!-- Followers Count -->

Replace Your Facebook Page Url with your Facebook page url.
Replace Your facebook page id or username with your Facebook id or user name.
Replace Link to Your Twitter ID with link to your twitter id.
Replace Your Twitter id with your twitter id.

Now I show you step by step tutorial how to add to Blogger and Wordpress Blogs.  

Adding to Blogger / Blogspot blogs:

1. Login to your account.
2. Go to Blogger Dashboard.
3. Select layout from your blog's drop down menu.
4. Add new gadget by clicking add a gadget.
5. Select HTML / JavaScript
6. And paste html code listed above.
7. Done

Adding to Wordpress Blog:

1. Go and login to admin dashboard.
2. Select widget from appearance.
3. Add a text based widget and paste above html code.
4. Done.

2 comments:

  1. This is nice and very wonderful.
    Thank you for this tutorial I love it

    ReplyDelete
  2. Is there a way to add Google+ page followers as well?

    ReplyDelete