A Beautiful jQuery GitHub Widget

April 2, 2012
Front End

Github Widget

At New Media Campaigns, we love GitHub. For those that aren't familiar, Git is version control software for programmers. GitHub is a service that provides Git hosting and related services. The developers here all use GitHub for their personal and open source projects and as a company we use it for our custom development projects.

Since we are website builders, we tend to build separate websites or write blog posts about our projects. (An example is Josh's Slim PHP Framework). We thought it would be great to be able to embed a snapshot of the project using GitHub's API, much like it is possible to pull in latest tweets from Twitter's API.

We couldn't find a good widget that we liked, so we built our own.  It's really easy to use. You just add the following html anywhere you want it to appear:

<div class="github-widget" data-repo="JoelSutherland/GitHub-jQuery-Repo-Widget"></div>

Then you include the script file somewhere after you've included jQuery:

<script type="text/javascript" src="jquery.githubRepoWidget.min.js"></script>

This automatically handles the CSS styling as well by adding a script tag into the head of the document. This makes it really easy to add to page since there are no other dependencies. Also, the container is fluid so it fills whatever width is available.

Feel free to use and improve it! At the top of the post is a screenshot of the widget, but here at the bottom is the real thing.  Click through to get to the GitHub project.



Eddie Dinkz's avatar
Eddie Dinkz
Thank you, Joel. That's a great work. :) :)
hustcc's avatar
I hava rewrite it to no jQuery version, and issue to you. https://github.com/hustcc/GitHub-Repo-Widget.js
hustcc's avatar
why need jquery?
Anish Sneh's avatar
Anish Sneh
Thanks mate, really helpful...
Anish Sneh
Manish's avatar
Thanks a ton !! I was looking for exactly same thing. Will use it on my web site: http://www.dev-utils.net.
Brian Etherington's avatar
Brian Etherington
Perfect for me too. Great work. Used it on my site http://www.jade4php.com
Paden's avatar
Perfect. Used it at my Github page: http://paden.github.io
Pär Thernström's avatar
Pär Thernström
Hi! Love this plugin and it's ease of use. I liked it so much that I created a version to show info about WordPress plugins:


I have included your original license and everything, but please let me know if I did something wrong while crediting you.
Christian Hanne's avatar
Christian Hanne
I just found your awesome widget and am now using it on my site. Also I wrote a short blog entry about it to spread the word.
Rodolfo Ferreira's avatar
Rodolfo Ferreira
You nailed the GitHub look 'n' feel so much that, when I first saw it, I tried searching for a GitHub-provided widget. Turns out this was a third-party after all.

Great work, using it in my blog!
Kaiyuan's avatar
Can not work in jquery 1.9, may I ask whether it will continue to develop?
alex's avatar
Very great widget! I'm using it in my blog, cheers and thanks!
Svante's avatar
Would be awesome if the "Download as zip" could be turned into a "Download as tar.gz" (or similar) by changing some config option!
lovelucy's avatar
GET https://a248.e.akamai.net/assets.github.com/images/icons/public.png 404 (Not Found)

GET https://a248.e.akamai.net/assets.github.com/images/modules/pagehead/repostat.png 404 (Not Found)
Milan Felix Sulc's avatar
Milan Felix Sulc
Best thing ever. That's excatly what i have looking for :) Thx man
Joel Sutherland's avatar
Joel Sutherland NMC team member
Good catch! Fixed.
hubeRsen's avatar
Cool thing mate!

But, the "Read More" link leads to a 404.

Leave a comment