How to Embed GitHub Contributions Chart/Calendar

Embed GitHub Contributions Chart Calendar

Remember: You must be logged in to mark articles complete. If you don't have an account yet, get a free one here.

Wouldn’t it be great to embed your GitHub contribution chart/calendar into any web page?

Well you can, and it’s very easy!

How to embed GitHub contributions on a website

First you need a web page where you can embed HTML. If you need help with setting up a website, we’ve provide more complete instructions here.

If you already have a web page ready, then embed your contributions chart by using the below HTML image code, just replace username with your GitHub username (e.g. from https://github.com/username) .

<img src="http://ghchart.rshah.org/username" alt="Name Your GitHub chart">

Here’s an example of what it’ll look like:

If you want to use a custom color for the chart use the below code with your HEX color.

<img src="http://ghchart.rshah.org/HEXCOLORCODE/username" alt="Name Your GitHub chart" />

Here’s an example of what it’ll look like:

That’s it, you’re done! Here’s a look at example charts using the code:


Resources


How Can We Make This Better?

How can we make this how-to guide better? What wasn’t clear? Please let us know in the comments!

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)

Loading...

What do you think?

Your #1 source for making money with WordPress!

Get a roundup of the most valuable articles to make more money with WordPress.

Please enter a valid email address.
Something went wrong. Please check your entries and try again.

Join  12,736  others learning to make more money with WordPress!

Get Credit for Learning
& Track Your Progress

Join ProfitPress FREE (limited time offer!) to improve your skills & earn more money with WordPress.

Your #1 source for making money with WordPress!

Join  12,736  others learning to make more money with WordPress!