Blog

Where we discuss our work, thoughts, and process

A Beautiful jQuery GitHub Widget

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.

 

Comments

's avatar
hubeRsen
Cool thing mate!

But, the "Read More" link leads to a 404.
's avatar
Joel Sutherland NMC team member
Good catch! Fixed.
's avatar
Milan Felix Sulc
Best thing ever. That's excatly what i have looking for :) Thx man
's avatar
lovelucy
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)
's avatar
Svante
Would be awesome if the "Download as zip" could be turned into a "Download as tar.gz" (or similar) by changing some config option!
's avatar
alex
Very great widget! I'm using it in my blog, cheers and thanks!
's avatar
Kaiyuan
Can not work in jquery 1.9, may I ask whether it will continue to develop?
'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!
'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.
'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:

https://github.com/bonny/jQuery-WordPress-Plugin-Widget

I have included your original license and everything, but please let me know if I did something wrong while crediting you.
's avatar
Paden
Perfect. Used it at my Github page: http://paden.github.io

Leave a comment

Real Time Web Analytics