JobRoller Social Widget Counter

Hello everyone, today I'm going to show you how you can add an impressive looking Twitter and Facebook widget counter to your JobRoller sidebar. It will look something like this..

http://forums.appthemes.com/attachment.php?attachmentid=4194&d=1352046137&thumb=1

If you have access to the AppThemes forum, this tutorial can also be found here: http://forums.appthemes.com/jobroller-social-widget-counter-39383/

It's important to know that this was done to my websites child-theme, and that I highly don't recommend doing this to your native JobRoller files. Should you choose to go against my advise, it's important to understand that any changes you make to the JobRoller folder and any of it's files, will be overwritten by the AppThemes updater, should a new copy of JobRoller be released.

Okay, lets begin..

STEP 1: OUR FRAMEWORK
First, you will need to create a new php file.. I named mine "sidebar-social-count.php", add the following code into your file, and change the user id "jobortunity" to whatever your user name is on Twitter or Facebook. Once you've done this, save the file in the /includes/ folder.

<li class="widget widget-social-count">

<div class="counter-widget-wrapper">

<a rel="nofollow" href="https://www.facebook.com/jobortunity" class="counter ">
<span class="icon"><img alt="Facebook" src="<?php bloginfo('stylesheet_directory'); ?>/images/facebook-count-icon.png" /></span>
<span class="count facebook"></span>
<span class="title">Fans</span>
</a>

<a rel="nofollow" href="http://twitter.com/jobortunity" class="counter">
<span class="icon"><img alt="Twitter" src="<?php bloginfo('stylesheet_directory'); ?>/images/twitter-count-icon.png" /></span>
<span class="count twitter"></span>
<span class="title">Followers</span>
</a>

</div>

<script type="text/javascript">
/* <![CDATA[ */

jQuery(document).ready(function() {
jQuery.getJSON('https://graph.facebook.com/jobortunity', function(data) {
jQuery('span.facebook').text(data.likes + 1 + ' ');
});

jQuery.getJSON("https://api.twitter.com/1/users/show.json?callback=?&screen_name=jobortunity", function(data) {
jQuery('span.twitter').text(data.followers_count + 1 + ' ');
});

});

/* ]]> */

</script>
</li>

STEP 2: FETCH OUR WIDGET FILE FOR DISPLAY
Go to the root of your child-theme and find "sidebar.php", open the file and add the following code on line 4.

<?php get_template_part( 'includes/sidebar-social-count' ); ?>

Hit Save, and close this file, you're done here.

STEP 3: CSS LOVE
While still in the root of the child-theme visit the "style.css" file and add the following code in the widgets parameter.. Just search for /* =Widgets and you should be in the right place

/*-- Begin: Social Count Widget --*/
ul.widgets li.widget-social-count { padding: 0 !important; width: 260px; border-top: 0; border-bottom: 1px solid #E4E4E4; }
ul.widgets li.widget-social-count div.counter-widget-wrapper { margin: 0; padding: 10px 0 0; }

ul.widgets li.widget-social-count a { text-decoration: none !important; }
ul.widgets li.widget-social-count a.counter { float:left; text-align:center; width:33.33%; padding: 0 0 10px; }

ul.widgets li.widget-social-count a.counter span { display:block; font-style:italic; font-weight:bold; line-height: 20px; margin:0 10px; }
ul.widgets li.widget-social-count a.counter span.icon { margin: 0; padding: 0; }
ul.widgets li.widget-social-count a.counter span.count { color: #C23A3A; font-size: 15px; height: 20px; margin: 0 auto; width: 100%; }
ul.widgets li.widget-social-count a.counter span.title { color:#5C5C5C; height: 20px; }
/*-- End: Social Count Widget --*/

STEP 4: OUR ICONS!
Follow the links, and Save the following icons to your "/images/" folder inside the child-theme.. Should you want to use your own icons, you're more then welcome to do so, but for the purpose of this tutorial I'm sharing my icons.

Facebook: http://postimage.org/image/52gn7s15t/
Twitter: http://postimage.org/image/78ay2a4m9/

And that's it, you're done. Refresh your websites browser, and take a look at your new social widget counter.. Enjoy.

##### UPDATE #################################################################################

Here's an extra, I just added.. it's for "Delicious Bookmarks" should any of you use it..
STEP 1: HTML/PHP

Add the following html code under the twitter hyperlink, before "</div>"

<a rel="nofollow" href="http://delicious.com/jobortunity" class="counter">
<span class="icon"><img alt="Delicious" src="< ?php bloginfo('stylesheet_directory'); ?>/images/delicious-count-icon.png" /></span>
<span class="count delicious"></span>
<span class="title">Bookmarks</span>
</a>

STEP 2: JQUERY LOVE
Add the following code to the jQuery script before the ending "}); /* ]]> */", make sure to edit out the jobortunity url to your websites url..

jQuery.getJSON('http://feeds.delicious.com/v2/json/urlinfo/data?url=http://jobortunity.ca/&amp;callback=?', function(data) {
var count = 0; if (data.length > 0) { count = data[0].total_posts; }
jQuery('span.delicious').text(count);
});

P.S.
I'm also trying to make the FeedBurner code work, for some reason I can't seem to get it to work for my feed.. but here's the code, should anyone wish to try and make it work for their feeds.. just so you know the Awareness API has been depreciated, but it's still active, just no support from Google. But if you get it working before I do, I would appreciate a follow up post of your updated code.

jQuery.getJSON("http://feeds.feedburner.com/jobortunity?format=xml", function(count) {
jQuery('span.feedburner').text(count['xml']['feed']['entry']['attributes'].circulation);
});