Home > ADC Services, ADC Website, AJAX, CSS, JavaScript, Open Source, Services > The Project Badge: Show The World Your GitHub and Google Code Projects On Your Blog

The Project Badge: Show The World Your GitHub and Google Code Projects On Your Blog

February 24th, 2010

The Project Badge displays your GitHub and Google Code projects in a badge that can be displayed on your site. This widget was built on the data being returned from my Open Source Service.

View this post outside your RSS reader to see it in action or view it here.

The source for the Project Badge can be found here and the source for the accompanying service can be found here. A list of all my publicly available web services can be found here.

Using The Project Badge On Your Website or Blog

1. Add The Asset References

Add the following asset references, and a reference to jQuery (if you don't have one already).

HTML:
  1. <link rel="stylesheet" type="text/css" href="http://github.com/AdamDotCom/project-badge/raw/master/project-badge.css" />
  2. <script type="text/javascript" src="http://github.com/AdamDotCom/project-badge/raw/master/projectBadge.js"></script>

2. Configure Your Accounts

Set your project accounts (it's OK if you only use one host) then optionally set the appropriate filters - in my case my Google Code projects were prefixed with adamdotcom and I had duplicate projects on both GitHub and Google Code. By specifying remove:adamdotcom,remove:duplicate-items in my filters I filter out the duplicates and removed adamdotcom from the project name.

JavaScript:
  1. <script type="text/javascript">
  2.   projectBadge.load({
  3.       gitHub: 'AdamDotCom',
  4.       googleCode: 'adam.kahtava.com'
  5.     },{
  6.       filters: 'remove:adamdotcom,duplicate-items,-,empty-items'
  7.     });
  8. </script>

3. Add The Widget Hook
Add an element to your site or blog with the id of project-badge.

HTML:
  1. <div id="project-badge">
  2.   Loading...
  3. </div>

That's it!
If you have any issues, use the the working example as a reference, or send me a message.

  1. No comments yet.
  1. No trackbacks yet.