{"_id":"5912369465888319004e5563","category":{"_id":"5912369465888319004e5561","version":"5912369265888319004e555f","project":"542c6f8dddd3190e00228898","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-05-24T17:56:23.855Z","from_sync":false,"order":1,"slug":"tutorials","title":"Tutorials"},"user":"5474d5e859fade080004ca6c","project":"542c6f8dddd3190e00228898","version":{"_id":"5912369265888319004e555f","__v":1,"project":"542c6f8dddd3190e00228898","createdAt":"2017-05-09T21:37:22.992Z","releaseDate":"2017-05-09T21:37:22.992Z","categories":["5912369465888319004e5560","5912369465888319004e5561","5912369465888319004e5562"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2"},"__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-05-24T18:08:15.476Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"Today we're going to take a look at how to quickly get started with the Indiegogo API. In this short tutorial we'll be showcasing a simple implementation that will allow you to pull some data from your Indiegogo campaign and display it on your website. You can make use of this tutorial with basic working knowledge of HTML and CSS. If you'd like to take things further and have some Javascript knowledge as well this example should be a great starting point to building out your own basic integration that showcases your campaign data on your site!\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Building the HTML\"\n}\n[/block]\nFor this example we want to showcase some campaign stats on a web page. We're going to display how much the campaign has raised and how many people have contributed to it. In the code below we set up two boxes that will hold these numbers once we call them from the API. Copy this code into the body of your HTML.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\t<div class=\\\"igg-wrapper\\\">\\n\\t   <div class=\\\"igg-boxes\\\" id=\\\"igg-funds\\\">\\n\\t   \\t\\t<h3>Raised so far</h3>\\n\\t   </div>\\n\\t   <div class=\\\"igg-boxes\\\" id=\\\"igg-contributions\\\">\\n\\t   \\t\\t<h3>People have contributed</h3>\\n\\t   </div>\\n\\t</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ltYnXwfRSW2taaZynyAA_001.jpg\",\n        \"001.jpg\",\n        \"632\",\n        \"176\",\n        \"#cbcbcb\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nGreat! We've now got a place to show our stats, but as you can see above - it's not pretty. Let's add some really basic styling to it using CSS. Open up your CSS file and copy the code below into it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".igg-wrapper {\\n\\theight: 300px;\\n\\twidth: 900px;\\n\\tmargin: 0 auto;\\n}\\n\\n.igg-boxes {\\n\\theight: 90%;\\n\\twidth: 290px;\\n\\tfloat: left;\\n\\tbackground-color: #2E2E1F;\\n\\tmargin: 5px 5px 5px 5px;\\n\\topacity: 0.8;\\n\\tborder-radius: 30px;\\n}\\n\\n.igg-boxes h2 {\\n\\tcolor: #FFFFFF;\\n\\topacity: 1.0;\\n\\ttext-align: center;\\n\\tfont-size: 35px;\\n}\\n\\n.igg-boxes h3 {\\n\\tcolor: #FFFFFF;\\n\\topacity: 1.0;\\n\\ttext-align: center;\\n\\tfont-size: 25px;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ErFu46mShSzDGKMbA61s_002.jpg\",\n        \"002.jpg\",\n        \"397\",\n        \"201\",\n        \"#53534b\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThat's a little better! You'll of course want to change the styling to fit with your site design, but for this example all we need is the basics. Now that that's out of the way, let's move on to the good part and start pulling some data.\n[block:api-header]\n{\n  \"type\": \"get\",\n  \"title\": \"Grabbing the Data\"\n}\n[/block]\nHere's where all the work is done. We're going to put some javascript into our HTML that will make a call using the API to get the data we need to populate the boxes we built up above. The first thing we need to do is set the page up to use the JQuery library. Paste the code below into the <head> of your HTML file. We'll be using JQuery to build up the javascript function that's going to get us our data.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nFor the sake of simplicity, we're going to put our javascript into the HTML as well. One thing to note is that anything you write into the HTML is going to be easily viewable by anyone - this includes your api_token. You'll typically want to hide your api_token but that's outside the scope of this example. If you end up building something out based off of this, don't ever expose your access_token in the HTML!\n\nThe code below makes a call the contributions endpoint of the API for a specified campaign. It then takes that data and looks for the **collected_funds** and **goal**. Those three responses are then inserted into the DOM using JQuery to place the numbers where we want them. You'll also see a function at the end of the code that adds commas to our results to make them a bit more readable. \n\nPaste the code below into the <head> of your HTML. Be sure to replace the [YOUR API TOKEN] and [YOUR CAMPAIGN ID] with your corresponding info!\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" language=\\\"javascript\\\">\\n   $(document).ready(function() {\\n      $.getJSON(\\\"https://api.indiegogo.com/1/campaigns/[YOUR CAMPAIGN ID].json?api_token=[YOUR API TOKEN]\\\", function(gogodata) {\\n        $(\\\"#igg-funds\\\").prepend('<h2>$' + numberWithCommas(gogodata.response.collected_funds) + '<br> out of <br>$' + numberWithCommas(gogodata.response.goal) + '</h2>');\\n        $(\\\"#igg-contributions\\\").prepend('<h2>' + numberWithCommas(gogodata.response.contributions_count) + '</h2>');\\n          });\\n   });\\n\\n   function numberWithCommas(x) {\\n    return x.toString().replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, \\\",\\\");\\n}\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nAnd that's it! You now have a working example of how to pull your campaign data using the Indiegogo API and show it on your own website! \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/kypRslRRQsSdwClweyf6_003.jpg\",\n        \"003.jpg\",\n        \"397\",\n        \"201\",\n        \"#53534a\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"displaying-campaign-stats-with-the-api","type":"basic","title":"Displaying Campaign Stats with the API"}

Displaying Campaign Stats with the API


Today we're going to take a look at how to quickly get started with the Indiegogo API. In this short tutorial we'll be showcasing a simple implementation that will allow you to pull some data from your Indiegogo campaign and display it on your website. You can make use of this tutorial with basic working knowledge of HTML and CSS. If you'd like to take things further and have some Javascript knowledge as well this example should be a great starting point to building out your own basic integration that showcases your campaign data on your site! [block:api-header] { "type": "basic", "title": "Building the HTML" } [/block] For this example we want to showcase some campaign stats on a web page. We're going to display how much the campaign has raised and how many people have contributed to it. In the code below we set up two boxes that will hold these numbers once we call them from the API. Copy this code into the body of your HTML. [block:code] { "codes": [ { "code": "\t<div class=\"igg-wrapper\">\n\t <div class=\"igg-boxes\" id=\"igg-funds\">\n\t \t\t<h3>Raised so far</h3>\n\t </div>\n\t <div class=\"igg-boxes\" id=\"igg-contributions\">\n\t \t\t<h3>People have contributed</h3>\n\t </div>\n\t</div>", "language": "html" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/ltYnXwfRSW2taaZynyAA_001.jpg", "001.jpg", "632", "176", "#cbcbcb", "" ] } ] } [/block] Great! We've now got a place to show our stats, but as you can see above - it's not pretty. Let's add some really basic styling to it using CSS. Open up your CSS file and copy the code below into it. [block:code] { "codes": [ { "code": ".igg-wrapper {\n\theight: 300px;\n\twidth: 900px;\n\tmargin: 0 auto;\n}\n\n.igg-boxes {\n\theight: 90%;\n\twidth: 290px;\n\tfloat: left;\n\tbackground-color: #2E2E1F;\n\tmargin: 5px 5px 5px 5px;\n\topacity: 0.8;\n\tborder-radius: 30px;\n}\n\n.igg-boxes h2 {\n\tcolor: #FFFFFF;\n\topacity: 1.0;\n\ttext-align: center;\n\tfont-size: 35px;\n}\n\n.igg-boxes h3 {\n\tcolor: #FFFFFF;\n\topacity: 1.0;\n\ttext-align: center;\n\tfont-size: 25px;\n}", "language": "css" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/ErFu46mShSzDGKMbA61s_002.jpg", "002.jpg", "397", "201", "#53534b", "" ] } ] } [/block] That's a little better! You'll of course want to change the styling to fit with your site design, but for this example all we need is the basics. Now that that's out of the way, let's move on to the good part and start pulling some data. [block:api-header] { "type": "get", "title": "Grabbing the Data" } [/block] Here's where all the work is done. We're going to put some javascript into our HTML that will make a call using the API to get the data we need to populate the boxes we built up above. The first thing we need to do is set the page up to use the JQuery library. Paste the code below into the <head> of your HTML file. We'll be using JQuery to build up the javascript function that's going to get us our data. [block:code] { "codes": [ { "code": "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>", "language": "html" } ] } [/block] For the sake of simplicity, we're going to put our javascript into the HTML as well. One thing to note is that anything you write into the HTML is going to be easily viewable by anyone - this includes your api_token. You'll typically want to hide your api_token but that's outside the scope of this example. If you end up building something out based off of this, don't ever expose your access_token in the HTML! The code below makes a call the contributions endpoint of the API for a specified campaign. It then takes that data and looks for the **collected_funds** and **goal**. Those three responses are then inserted into the DOM using JQuery to place the numbers where we want them. You'll also see a function at the end of the code that adds commas to our results to make them a bit more readable. Paste the code below into the <head> of your HTML. Be sure to replace the [YOUR API TOKEN] and [YOUR CAMPAIGN ID] with your corresponding info! [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" language=\"javascript\">\n $(document).ready(function() {\n $.getJSON(\"https://api.indiegogo.com/1/campaigns/[YOUR CAMPAIGN ID].json?api_token=[YOUR API TOKEN]\", function(gogodata) {\n $(\"#igg-funds\").prepend('<h2>$' + numberWithCommas(gogodata.response.collected_funds) + '<br> out of <br>$' + numberWithCommas(gogodata.response.goal) + '</h2>');\n $(\"#igg-contributions\").prepend('<h2>' + numberWithCommas(gogodata.response.contributions_count) + '</h2>');\n });\n });\n\n function numberWithCommas(x) {\n return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}\n</script>", "language": "html" } ] } [/block] And that's it! You now have a working example of how to pull your campaign data using the Indiegogo API and show it on your own website! [block:image] { "images": [ { "image": [ "https://files.readme.io/kypRslRRQsSdwClweyf6_003.jpg", "003.jpg", "397", "201", "#53534a", "" ] } ] } [/block]