<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>InstagramFeed</title>
<!-- InstagramFeed HAS NO DEPENDENCIES. You don't need any of those, it's just for documentation!! -->
<!-- InstagramFeed HAS NO DEPENDENCIES. You don't need any of those, it's just for documentation!! -->
<!-- InstagramFeed HAS NO DEPENDENCIES. You don't need any of those, it's just for documentation!! -->
<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">
<!-- InstagramFeed HAS NO DEPENDENCIES. You don't need any of those, it's just for documentation!! -->
<!-- InstagramFeed HAS NO DEPENDENCIES. You don't need any of those, it's just for documentation!! -->
<!-- InstagramFeed HAS NO DEPENDENCIES. You don't need any of those, it's just for documentation!! -->
<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>