This is pretty easy:
- Get your Instagram access token: How to generate an Instagram Access Token
- Place the
<script src="dist/instagramas.min.js" ></script>script tag at the bottom of your page - Add the instagramas gallery tag
<section class="instagramas" data-access-token="INSERT_ACCESS_TOKEN_HERE"></section>wherever you want - Done!
Check this examples:
Let's start!
First go and get a valid access token from Instagram, if you are not so sure how to do it, you can find all you need in Instagram's API Documentation, or follow this article How to generate an Instagram Access Token. Got it? Cool, let's continue.
To render a gallery the trick is to add <script src="dist/instagramas.min.js" ></script> script at the end of your document and add the class name "instagramas" to any element you want to be the container of the gallery, you can add as many as you want. The script will ask the DOM to find all the "instagramas" and will create a Instagram gallery using the data-access-token provided for each match.
To illustrate the implementation, please take a look at this simple example:
<!doctype html>
<html>
<head>
... initial code ...
<link rel="stylesheet" href="dist/instagramas.min.css"></link>
</head>
<body>
... your awesome code ...
<div id="my-brand" class="instagramas" data-access-token="INSERT_ACCESS_TOKEN_HERE"></div>
... more stuff ...
<section id="my-product" class="instagramas" data-access-token="INSERT_ACCESS_TOKEN_HERE"></section>
... final code ...
<script src="dist/instagramas.min.js" ></script>
</body>
</html>
Available properties
The only mandatory property is the access token, get more information about access tokens at Instagram's API Documentation page.
- data-access-token* string
- Mandatory Instagram API Access Token
How to generate an Instagram Access Token - data-show-tags bool
- Optional when data-show-tags is true will render a list of tags
- Default value false
- data-show-tags-count int
- Optional integer that defines how many tags will render
- Default value all
- data-show-likes bool
- Optional when show-likes is true will render likes counter
- Default value false
- data-render-type string
- Optional render type defines the size of the Instagram
- Allowed values: thumbnail | low_resolution | standard_resolution
- Default value thumbnail
- data-count int
- Optional how many Instagram will show
- Default value 5
- Max value 20