instafeed

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>InstagramFeed</title>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://www.sowecms.com/demos/statics/prism.js"></script> <link rel="stylesheet" type="text/css" href="https://www.sowecms.com/demos/statics/prism.css">    <style> .bg-primary-2 { background-color: #3779B3; } .bg-secondary-2 { background: #cbdbe8; } .text-underline { text-decoration: underline; } .text-bold { font-weight: 700; } .text-italic { font-style: italic; } .text-small { font-size: 0.8em; } .flex-grow-1 { flex-grow: 1; } #btn-top { position: fixed; z-index: 999; bottom: 1em; top: auto; left: auto; right: 1em; margin-left: -1.9rem; opacity: .66; display: none; } .instagram_feed { overflow: hidden; } #jsonHere { max-height: 60vh; overflow: auto; } </style> </head> <body> <header id="header" class="bg-primary-2"> <div class="container py-4"> <div class="row"> <div class="col-xs-12 col-md-8"> <h1 class="text-white m-0"> Documentation InstagramFeed </h1> <p class="text-white m-0">Instagram Feed without access token. We like Instagram but hate his API </p> <ul class="list-inline menu-navigation pt-3"> <li class="list-inline-item"><a class="text-white" href="#options">Options</a></li> <li class="list-inline-item"><a class="text-white" href="#examples">Examples</a></li> </ul> </div> <div class="col-xs-12 col-md-4"> <ul class="list-unstyled text-md-right"> <li> <a class="text-white text-underline d-flex align-items-center" target="_blank" rel="noopener" href="https://www.sowecms.com/demos/InstagramFeed/"> <span class="mr-2 flex-grow-1">Visit our repository</span> <svg class="octicon octicon-mark-github v-align-middle" fill="white" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"> <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"> </path> </svg> </a> </li> <li class="pt-2"> <a class="text-white text-underline d-flex align-items-center" target="_blank" rel="noopener" href="https://www.paypal.me/JavierSL"> <span class="mr-2 flex-grow-1">Support us</span> <svg class="octicon v-align-middle" fill="white" height="32" width="32" viewBox="0 0 32 32"> <path d="M29.41 11.535c.215 1 .192 2.215-.07 3.645-1.035 5.285-4.399 7.925-10.09 7.925h-.785a1.17 1.17 0 0 0-.785.297 1.29 1.29 0 0 0-.43.758l-.07.34-.985 6.18-.035.265a1.27 1.27 0 0 1-.437.762c-.23.195-.496.293-.793.293h-4.485a.715.715 0 0 1-.59-.27.806.806 0 0 1-.16-.64c.11-.668.266-1.668.473-3 .21-1.332.367-2.332.477-3 .105-.668.265-1.664.48-2.992.215-1.328.375-2.325.48-2.993.063-.437.317-.66.77-.66h2.34c1.582.024 2.988-.101 4.215-.375 2.082-.465 3.789-1.32 5.125-2.57 1.215-1.133 2.136-2.594 2.765-4.395.285-.832.496-1.625.625-2.375.012-.07.028-.113.047-.132a.06.06 0 0 1 .063-.016.263.263 0 0 1 .105.063c.942.699 1.524 1.664 1.75 2.89zM26.34 6.5c0 1.273-.274 2.68-.82 4.215-.954 2.773-2.75 4.648-5.395 5.625-1.344.476-2.844.726-4.5.75 0 .012-.535.015-1.605.015l-1.61-.015c-1.191 0-1.89.57-2.105 1.715-.024.093-.532 3.25-1.52 9.465-.012.117-.082.175-.215.175H3.305a.833.833 0 0 1-.653-.293.831.831 0 0 1-.207-.687L6.59 1.195c.058-.343.223-.629.492-.855C7.348.113 7.656 0 8 0h10.68c.402 0 .984.078 1.738.23.758.157 1.422.348 1.992.575 1.274.488 2.246 1.218 2.922 2.195.672.977 1.008 2.145 1.008 3.5zm0 0" /> </svg> </a> </li> <li class="pt-3"> <a class="text-white text-right" target="_blank" rel="noopener" href="https://travis-ci.com/jsanahuja/InstagramFeed"> <img src="https://travis-ci.com/jsanahuja/InstagramFeed.svg?branch=master" alt="Build Status" /> </a> </li> </ul> </div> </div> </div> </header> <section id="options"> <div class="bg-secondary-2 py-3"> <div class="container"> <h3>Options</h3> </div> </div> <div class="container py-3"> <table class="table table-striped"> <thead class="thead-light"> <tr> <th>Attribute</th> <th>Type</th> <th>Default</th> <th style="width: 40%">Description</th> </tr> </thead> <tbody> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">username</code> <span class="text-danger text-small text-italic">Required / Optional</span> </td> <td><em>String</em></td> <td><code>null</code></td> <td>Instagram username from where to retrieve the feed. Required if <span class="text-small text-italic">tag</span> is not defined.</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">tag</code> <span class="text-danger text-small text-italic">Required / Optional</span> </td> <td><em>String</em></td> <td><code>null</code></td> <td>Instagram tag from where to retrieve the feed. Required if <span class="text-small text-italic">username</span> is not defined.</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">container</code> <span class="text-danger text-small text-italic">Required / Optional</span> </td> <td><em>String</em></td> <td><code>null</code></td> <td>Selector where to place the feed. Required if callback is not defined.</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">callback</code> <span class="text-danger text-small text-italic">Required / Optional</span> </td> <td><em>function</em></td> <td><code>null</code></td> <td>Callback function with all the data fetched from instagram. Required if container is not defined. If container is defined this function is called before rendering (an on ready event)</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">display_profile</code> </td> <td><em>Boolean</em></td> <td><code>true</code></td> <td>Enables displaying the profile</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">display_biography</code> </td> <td><em>Boolean</em></td> <td><code>true</code></td> <td>Enables displaying the biography. Not compatible when loading a <span class="text-small text-italic">tag</span> feed</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">display_gallery</code> </td> <td><em>Boolean</em></td> <td><code>true</code></td> <td>Enables displaying the gallery</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">display_igtv</code> </td> <td><em>Boolean</em></td> <td><code>false</code></td> <td>Enables displaying the IGTV feed if available. Not compatible when loading a <span class="text-small text-italic">tag</span> feed</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">styling</code> </td> <td><em>Boolean</em></td> <td><code>true</code></td> <td>Enables default inline CSS styles</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">items</code> </td> <td><em>number [Int]</em></td> <td><code>8</code></td> <td>Number of items to display. Up to 12 for users, up to 72 for tags</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">items_per_row</code> </td> <td><em>number [Int]</em></td> <td><code>4</code></td> <td>Number of items that will be displayed for each row</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">lazy_load</code> </td> <td><em>Boolean</em></td> <td><code>false</code></td> <td>Enable lazy load of images using native web attribute loading="lazy" on img elements</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">margin</code> </td> <td><em>number [Float]</em></td> <td><code>0.5</code></td> <td>Margin (percentage) between items in gallery/igtv</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">image_size</code> </td> <td><em>number [Int]</em></td> <td><code>640</code></td> <td>Native resolution of the images that will be displayed in the gallery. Accepted values [150, 240, 320, 480, 640]. Does not apply to video previews.</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">host</code> </td> <td><em>String [url]</em></td> <td><code>https://www.instagram.com/</code></td> <td>URL where to fetch the data. Useful if instagram changes CORS policy</td> </tr> <tr> <td class="d-flex flex-wrap"> <code class="text-bold flex-grow-1">on_error</code> </td> <td><em>function(error_description, error_code)</em></td> <td><code>console.error</code></td> <td><p class="mb-0">Function that will be triggered when an error ocurs. Error codes:</p> <p class="mb-0"><span class="text-danger text-small text-italic">1</span>: No username nor tag defined</p> <p class="mb-0"><span class="text-danger text-small text-italic">2</span>: No container nor callback defined</p> <p class="mb-0"><span class="text-danger text-small text-italic">3</span>: Profile is age restricted</p> <p class="mb-0"><span class="text-danger text-small text-italic">4</span>: Network banned</p> <p class="mb-0"><span class="text-danger text-small text-italic">5</span>: Request error</p> </td> </tr> </tbody> </table> </div> </section> <section id="examples"> <div class="bg-secondary-2 py-3"> <div class="container"> <h3>Examples</h3> <ul class="pt-3 nav nav-tabs" id="tabExamples" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="example1-tab" href="#example1" role="tab" aria-controls="Example 1" aria-selected="true" data-toggle="tab">Example 1</a> </li> <li class="nav-item"> <a class="nav-link" id="example2-tab" href="#example2" role="tab" aria-controls="Example 2" aria-selected="false" data-toggle="tab">Example 2</a> </li> <li class="nav-item"> <a class="nav-link" id="example3-tab" href="#example3" role="tab" aria-controls="Example 3" aria-selected="false" data-toggle="tab">Example 3</a> </li> <li class="nav-item"> <a class="nav-link" id="example4-tab" href="#example4" role="tab" aria-controls="Example 4" aria-selected="false" data-toggle="tab">Example 4</a> </li> <li class="nav-item"> <a class="nav-link" id="example5-tab" href="#example5" role="tab" aria-controls="Example 5" aria-selected="false" data-toggle="tab">Example 5</a> </li> <li class="nav-item"> <a class="nav-link" id="example6-tab" href="#example6" role="tab" aria-controls="Example 6" aria-selected="false" data-toggle="tab">Example 6</a> </li> <li class="nav-item"> <a class="nav-link" id="example7-tab" href="#example7" role="tab" aria-controls="Example 7" aria-selected="false" data-toggle="tab">Example 7</a> </li> <li class="nav-item"> <a class="nav-link" id="example8-tab" href="#example8" role="tab" aria-controls="Example 8" aria-selected="false" data-toggle="tab">Example 8</a> </li> </ul> </div> </div> <div class="container pt-3"> <div class="tab-content" id="tabContentExamples"> <div class="tab-pane fade show active" id="example1" role="tabpanel" aria-labelledby="example1-tab"> <h3>Example 1: Default feed styling</h3> <p>Don't like it? Check other examples!</p> <div id="instagram-feed1" class="instagram_feed"></div> <div class="section_code py-3"> <div>Code:</div> <pre><code class="language-html"><script src="dist/InstagramFeed.min.js"></script> <script> (function(){ new InstagramFeed({ 'username': 'instagram', 'container': document.getElementById("instagram-feed1"), 'display_profile': true, 'display_biography': true, 'display_gallery': true, 'callback': null, 'styling': true, 'items': 8, 'items_per_row': 4, 'margin': 1, 'lazy_load': true, 'on_error': console.error }); })(); </script> </code></pre> </div> </div> <div class="tab-pane fade" id="example2" role="tabpanel" aria-labelledby="example2-tab"> <h3>Example 2: Only want images?</h3> <p>Disable <i>display_profile</i> and <i>display_biography</i></p> <div id="instagram-feed2" class="instagram_feed"></div> <div class="section_code py-3"> <div>Code:</div> <pre><code class="language-html"><script src="dist/InstagramFeed.min.js"></script> <script> (function(){ new InstagramFeed({ 'username': 'github', 'container': document.getElementById("instagram-feed2"), 'display_profile': false, 'display_biography': false, 'display_gallery': true, 'callback': null, 'styling': true, 'items': 8, 'items_per_row': 4, 'margin': 1 }); })(); </script> </code></pre> </div> </div> <div class="tab-pane fade" id="example3" role="tabpanel" aria-labelledby="example3-tab"> <h3>Example 3: Want to load more or change the display?</h3> <p>Change <i>items</i>, <i>items_per_row</i> and <i>margin</i></p> <div id="instagram-feed3" class="instagram_feed"></div> <div class="section_code py-3"> <div>Code:</div> <pre><code class="language-html"><script src="dist/InstagramFeed.min.js"></script> <script> (function(){ new InstagramFeed({ 'username': 'zara', 'container': document.getElementById("instagram-feed3"), 'display_profile': false, 'display_biography': false, 'display_gallery': true, 'callback': null, 'styling': true, 'items': 12, 'items_per_row': 6, 'margin': 0.25 }); })(); </script> </code></pre> </div> </div> <div class="tab-pane fade" id="example4" role="tabpanel" aria-labelledby="example4-tab"> <h3>Example 4: Want to fetch a TAG?</h3> <p>Use <i>tag</i> instead of <i>username</i>.</p> <div id="instagram-feed4" class="instagram_feed"></div> <div class="section_code py-3"> <div>Code:</div> <pre><code class="language-html"><script src="dist/InstagramFeed.min.js"></script> <script > (function(){ new InstagramFeed({ 'tag': 'paradise', 'container': document.getElementById("instagram-feed4"), 'display_profile': true, 'display_gallery': true, 'items': 100, 'items_per_row': 5, 'margin': 0.5 }); })(); </script> </code></pre> </div> </div> <div class="tab-pane fade" id="example5" role="tabpanel" aria-labelledby="example5-tab"> <h3>Example 5: Want to display IGTV?</h3> <p>Enable <i>display_igtv</i>. <a href="https://help.instagram.com/381435875695118" target="_blank" rel="noopener">What is IGTV?</a></p> <div id="instagram-feed5" class="instagram_feed"></div> <div class="section_code py-3"> <div>Code:</div> <pre><code class="language-html"><script src="dist/InstagramFeed.min.js"></script> <script> (function(){ new InstagramFeed({ 'username': 'fcbarcelona', 'container': document.getElementById("instagram-feed5"), 'display_profile': false, 'display_biography': false, 'display_gallery': false, 'display_igtv': true, 'callback': null, 'styling': true, 'items': 8, 'items_per_row': 4, 'margin': 1 }); })(); </script> </code></pre> </div> </div> <div class="tab-pane fade" id="example6" role="tabpanel" aria-labelledby="example6-tab"> <h3>Example 6: Don't like our styles at all?</h3> <p>Make your owns disabling <i>styling</i></p> <div class="instagram_feed info"> <p>This is the html you will have (Note we have enabled profile and biography in this case).</p> <pre><code class="language-html"><div class="<strong>instagram_profile</strong>"> <img class="<strong>instagram_profile_image</strong>" src="..." alt="Instagram profile pic"> <p class="<strong>instagram_username</strong>">@Instagram (<a href="...">@instagram</a>)</p> <p class="<strong>instagram_biography</strong>">....</p> </div> <div class="<strong>instagram_gallery</strong>"> <a href="https://www.instagram.com/p/Bh-P3IoDxyB" rel="noopener" target="_blank"> <img src="..." alt="instagram instagram image 0" /> </a> ... </div> <div class="<strong>instagram_igtv</strong>"> <a href="https://www.instagram.com/p/Bh-P3IoDxyB" rel="noopener" target="_blank"> <img src="..." alt="instagram instagram image 0" /> </a> ... </div> </code></pre> </div> <div class="section_code py-3"> <div>Code:</div> <pre><code class="language-html"><script src="dist/InstagramFeed.min.js"></script> <script> (function(){ new InstagramFeed({ 'username': 'instagram', 'container': document.getElementById("instagram-feed3"), 'display_profile': true, 'display_biography': true, 'display_gallery': true, 'display_igtv': true, 'callback': null, 'styling': false, 'items': 12, }); })(); </script> </code></pre> </div> </div> <div class="tab-pane fade" id="example7" role="tabpanel" aria-labelledby="example7-tab"> <h3>Example 7: Don't either like our template?</h3> <p>Define a <i>callback</i> to get all the data fetched</p> <div class="instagram_feed info"> <p>This is the format you will get.</p> <pre id="jsonHere"><code class="language-json"> </code></pre> </div> <div class="section_code py-3"> <div>Code:</div> <pre><code class="language-html"><script type="text/javascript" src="dist/InstagramFeed.min.js"></script> <script type="text/javascript"> (function(){ new InstagramFeed({ 'username': 'instagram', 'callback': function(data){ $('#jsonHere').html(JSON.stringify(data, null, 2)); } }); })(); </script> </code></pre> </div> </div> <div class="tab-pane fade" id="example8" role="tabpanel" aria-labelledby="example8-tab"> <h3>Example 8: AMD (Asynchronous module definition)</h3> <div class="section_code py-3"> <div>Code:</div> <pre><code class="language-html"> <script> // Example for RequireJS require.config({ paths:{ 'InstagramFeed': '../dist/InstagramFeed.min', } }); require(["InstagramFeed"], function(InstagramFeed){ new InstagramFeed({ 'username': 'instagram', 'container': document.getElementById("instagram-feed1"), 'display_profile': true, 'display_biography': true, 'display_gallery': true, 'get_raw_json': false, 'callback': null, 'styling': true, 'items': 8, 'items_per_row': 4, 'margin': 1 }); }); </script> </code></pre> </div> </div> </div> </div> </section> <footer id="footer" class="bg-dark"> <div class="container text-center py-4"> <h3 class="text-white">Still not enough?</h3> <a class="h3 mb-3 text-primary text-underline" target="_blank" rel="noopener" href="https://github.com/jsanahuja/InstagramFeed"> Open an issue or send a pull request! </a> </div> <a href="#header" id="btn-top" class="bg-primary px-2 py-1" title="Go top"> <span class="text-white" aria-hidden="true">^</span> </a> </footer> <script src="dist/InstagramFeed.min.js"></script> <script> (function() { new InstagramFeed({ 'username': 'instagram', 'container': document.getElementById("instagram-feed1"), 'display_profile': true, 'display_biography': true, 'display_gallery': true, 'callback': null, 'styling': true, 'items': 8, 'items_per_row': 4, 'margin': 1, 'lazy_load': true, 'on_error': console.error }); new InstagramFeed({ 'username': 'github', 'container': document.getElementById("instagram-feed2"), 'display_profile': false, 'display_biography': false, 'display_gallery': true, 'callback': null, 'styling': true, 'items': 8, 'items_per_row': 4, 'margin': 1 }); new InstagramFeed({ 'username': 'zara', 'container': document.getElementById("instagram-feed3"), 'display_profile': false, 'display_biography': false, 'display_gallery': true, 'callback': null, 'styling': true, 'items': 12, 'items_per_row': 6, 'margin': 0.25 }); new InstagramFeed({ 'tag': 'paradise', 'container': document.getElementById("instagram-feed4"), 'display_profile': true, 'display_gallery': true, 'items': 100, 'items_per_row': 5, 'margin': 0.5 }); new InstagramFeed({ 'username': 'fcbarcelona', 'container': document.getElementById("instagram-feed5"), 'display_profile': false, 'display_biography': false, 'display_gallery': false, 'display_igtv': true, 'callback': null, 'styling': true, 'items': 8, 'items_per_row': 4, 'margin': 1 }); new InstagramFeed({ 'username': 'instagram', 'callback': function(data) { document.getElementById("jsonHere").innerHTML = JSON.stringify(data, null, 2); } }); })(); (function($) { // Show back to top button if distance from top > 0 $(window).scroll(function() { var viewportTop = $(window).scrollTop() + $(window).height(); if ($(window).scrollTop() > 10) { $('#btn-top').addClass('d-block'); $('#btn-top').removeClass('d-none'); } else { $('#btn-top').addClass('d-none'); $('#btn-top').removeClass('d-block'); } }); })(jQuery); </script> </body> </html>