styles source issues

Instagramas 1.2.0

This is pretty easy:

  1. Get your Instagram access token: How to generate an Instagram Access Token
  2. Place the <script src="dist/instagramas.min.js" ></script> script tag at the bottom of your page
  3. Add the instagramas gallery tag <section class="instagramas" data-access-token="INSERT_ACCESS_TOKEN_HERE"></section> wherever you want
  4. Done!

Check this examples:

  1. Minimal
  2. Thumbnails
  3. Low Resolution
  4. Standard Resolution

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>
            ... initial code ...
            <link rel="stylesheet" href="dist/instagramas.min.css"></link>
            ... 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>

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

Notes about styles

back to top

Instagrama's markup is pretty simple and nicely nested, quite easy to personalize with CSS.

    <article class="instagramas" data-show-tags="true" data-show-likes="true" data-render-type="standard_resolution" data-count="5" data-state="ready">
        <figure class=".instagrama-image">
            <a target="_blank" class="instagrama" href="">
                <img alt="Olivier Miche #unsplash #fog #blackandwhite" src="">
                <figcaption class="instagrama-likes">1</figcaption>
                <figcaption class="instagrama-tags">
                    <span class="instagrama-tag">fog</span>
                    <span class="instagrama-tag">unsplash</span>
                    <span class="instagrama-tag">blackandwhite</span>
        <figure class=".instagrama-image">
            <a target="_blank" class="instagrama" href="">
                <img alt="Rob Bye #unsplash #sand #beach" src="">
                <figcaption class="instagrama-likes">0</figcaption>
                <figcaption class="instagrama-tags">
                    <span class="instagrama-tag">beach</span>
                    <span class="instagrama-tag">sand</span>
                    <span class="instagrama-tag">unsplash</span>

Apart from class names, the most interesting attribute for styling here is data-state. This attribute will be updated in every state change mainly to inform, but also, to allow the CSS be able to define personalized states. Currently there are 6 possible states:

You could use something like this in your CSS to add more interactivity.

    .instagramas { transform: scale(.5); }
    .instagramas figcaption { display: none; }
    .instagramas[data-state="ready"] { transform: scale(1); }
    .instagramas[data-state="ready"] figcaption { display: block; }

Found any bugs?

Please create a new issue in the project's issue tracker and describe the problem, and thank you in advance.

Want to collaborate?

Get the code from github and don't be afraid to send me a pull request.