{"id":9380,"date":"2019-08-04T19:07:12","date_gmt":"2019-08-04T23:07:12","guid":{"rendered":"https:\/\/profitpress.local\/?post_type=sfwd-topic&#038;p=9380"},"modified":"2021-01-23T23:54:09","modified_gmt":"2021-01-24T04:54:09","slug":"how-to-embed-github-contributions-chart-calendar","status":"publish","type":"post","link":"https:\/\/profitpress.local\/how-to-embed-github-contributions-chart-calendar\/","title":{"rendered":"How to Embed GitHub Contributions Chart\/Calendar"},"content":{"rendered":"\n<p class=\"has-drop-cap\">Wouldn&#8217;t it be great to embed your GitHub contribution chart\/calendar into any web page?  <br><br>Well you can, and it&#8217;s <strong><em>very easy!<\/em><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to embed GitHub contributions on a website<\/h2>\n\n\n\n<p>First you need a web page where you can embed HTML.  If you need help with setting up a website, we&#8217;ve provide more complete <a href=\"https:\/\/profitpress.local\/articles\/how-to-create-a-progress-tracker-with-wordpress-github-for-free-guide\/\">instructions here<\/a>.<\/p>\n\n\n\n<p>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 <em>(e.g. from https:\/\/github.com\/username)<\/em> .<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"http:\/\/ghchart.rshah.org\/username\" alt=\"Name Your GitHub chart\"><\/code><\/pre>\n\n\n\n<p><em>Here&#8217;s an example of what it&#8217;ll look like:<\/em><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"http:\/\/ghchart.rshah.org\/gmays\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p>If you want to use a custom color for the chart use the below code with your HEX color.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"http:\/\/ghchart.rshah.org\/HEXCOLORCODE\/username\" alt=\"Name Your GitHub chart\" \/><\/code><\/pre>\n\n\n\n<p><em>Here&#8217;s an example of what it&#8217;ll look like:<\/em><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"http:\/\/ghchart.rshah.org\/1e62a1\/gmays\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p>That&#8217;s it, you&#8217;re done!  Here&#8217;s a look at example charts using the code:<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Resources<\/h2>\n\n\n\n<ul><li>The GitHub repo: <a href=\"https:\/\/github.com\/2016rshah\/githubchart-api\">https:\/\/github.com\/2016rshah\/githubchart-api<\/a><\/li><li>The site for this project: <a href=\"https:\/\/ghchart.rshah.org\">https:\/\/ghchart.rshah.org<\/a> <\/li><li>The Ruby gem: <a href=\"https:\/\/github.com\/akerl\/githubchart\">https:\/\/github.com\/akerl\/githubchart<\/a><\/li><li>Need hosting to host this?  Get discounted Hosting here: <a href=\"https:\/\/profitpress.local\/tools\/#products\">https:\/\/profitpress.local\/tools\/#products<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">How Can We Make This Better?<\/h2>\n\n\n\n<p>How can we make this how-to guide better?  What wasn&#8217;t clear?  Please let us know in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wouldn&#8217;t it be great to embed your GitHub contribution chart\/calendar into any web page? Well you can, and it&#8217;s very easy!<\/p>\n","protected":false},"author":1,"featured_media":9384,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[2645],"tags":[],"_links":{"self":[{"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/posts\/9380"}],"collection":[{"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/comments?post=9380"}],"version-history":[{"count":1,"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/posts\/9380\/revisions"}],"predecessor-version":[{"id":11968,"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/posts\/9380\/revisions\/11968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/media\/9384"}],"wp:attachment":[{"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/media?parent=9380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/categories?post=9380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/profitpress.local\/wp-json\/wp\/v2\/tags?post=9380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}