Skip to content
This repository was archived by the owner on May 3, 2021. It is now read-only.

Commit ae833e5

Browse files
jsanahujajsanahuja
committed
GraphQL API & Request retries
1 parent 840ef93 commit ae833e5

File tree

4 files changed

+351
-173
lines changed

4 files changed

+351
-173
lines changed

‎index.html

Lines changed: 81 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -157,35 +157,44 @@ <h3>Options</h3>
157157
</thead>
158158
<tbody>
159159
<tr>
160-
<td class="d-flex flex-wrap">
161-
<code class="text-bold flex-grow-1">username</code>
160+
<td>
161+
<code class="text-bold flex-grow-1">username</code><br/>
162162
<span class="text-danger text-small text-italic">Required / Optional</span>
163163
</td>
164164
<td><em>String</em></td>
165165
<td><code>null</code></td>
166-
<td>Instagram username from where to retrieve the feed. Required if <span class="text-small text-italic">tag</span> is not defined.</td>
166+
<td>Instagram username from where to retrieve the feed. Required if <span class="text-small text-italic">tag</span> and <span class="text-small text-italic">user_id</span> are not defined.</td>
167167
</tr>
168168
<tr>
169-
<td class="d-flex flex-wrap">
170-
<code class="text-bold flex-grow-1">tag</code>
169+
<td>
170+
<code class="text-bold flex-grow-1">tag</code><br/>
171171
<span class="text-danger text-small text-italic">Required / Optional</span>
172172
</td>
173173
<td><em>String</em></td>
174174
<td><code>null</code></td>
175-
<td>Instagram tag from where to retrieve the feed. Required if <span class="text-small text-italic">username</span> is not defined.</td>
175+
<td>Instagram tag from where to retrieve the feed. Required if <span class="text-small text-italic">username</span> and <span class="text-small text-italic">user_id</span> are not defined.</td>
176176
</tr>
177177
<tr>
178-
<td class="d-flex flex-wrap">
179-
<code class="text-bold flex-grow-1">container</code>
178+
<td>
179+
<code class="text-bold flex-grow-1">user_id</code><br/>
180+
<span class="text-danger text-small text-italic">Required / Optional</span>
181+
</td>
182+
<td><em>String</em></td>
183+
<td><code>null</code></td>
184+
<td>Instagram user ID for GraphQL API. Required if <span class="text-small text-italic">username</span> and <span class="text-small text-italic">tag</span> are not defined.</td>
185+
</tr>
186+
<tr>
187+
<td>
188+
<code class="text-bold flex-grow-1">container</code><br/>
180189
<span class="text-danger text-small text-italic">Required / Optional</span>
181190
</td>
182191
<td><em>String</em></td>
183192
<td><code>null</code></td>
184193
<td>Selector where to place the feed. Required if callback is not defined.</td>
185194
</tr>
186195
<tr>
187-
<td class="d-flex flex-wrap">
188-
<code class="text-bold flex-grow-1">callback</code>
196+
<td>
197+
<code class="text-bold flex-grow-1">callback</code><br/>
189198
<span class="text-danger text-small text-italic">Required / Optional</span>
190199
</td>
191200
<td><em>function(data)</em></td>
@@ -198,15 +207,15 @@ <h3>Options</h3>
198207
</td>
199208
<td><em>Boolean</em></td>
200209
<td><code>true</code></td>
201-
<td>Enables displaying the profile</td>
210+
<td>Enables displaying the profile. Not compatible when loading from GraphQL API with <span class="text-small text-italic">user_id</span></td>
202211
</tr>
203212
<tr>
204213
<td class="d-flex flex-wrap">
205214
<code class="text-bold flex-grow-1">display_biography</code>
206215
</td>
207216
<td><em>Boolean</em></td>
208217
<td><code>true</code></td>
209-
<td>Enables displaying the biography. Not compatible when loading a <span class="text-small text-italic">tag</span> feed</td>
218+
<td>Enables displaying the biography. Not compatible when loading a <span class="text-small text-italic">tag</span> or from GraphQL API with <span class="text-small text-italic">user_id</span></td>
210219
</tr>
211220
<tr>
212221
<td class="d-flex flex-wrap">
@@ -230,7 +239,15 @@ <h3>Options</h3>
230239
</td>
231240
<td><em>Boolean</em></td>
232241
<td><code>false</code></td>
233-
<td>Enables displaying the IGTV feed if available. Only for users</td>
242+
<td>Enables displaying the IGTV feed if available. Not compatible when loading a <span class="text-small text-italic">tag</span> or from GraphQL API with <span class="text-small text-italic">user_id</span></td>
243+
</tr>
244+
<tr>
245+
<td class="d-flex flex-wrap">
246+
<code class="text-bold flex-grow-1">max_tries</code>
247+
</td>
248+
<td><em>number [Int]</em></td>
249+
<td><code>8</code></td>
250+
<td>Number of tries to fetch Instagram data until throwing. Useful to avoid arbitrary CORS issues.</td>
234251
</tr>
235252
<tr>
236253
<td class="d-flex flex-wrap">
@@ -362,6 +379,12 @@ <h3>Examples</h3>
362379
aria-controls="example7" aria-selected="false"
363380
data-toggle="tab">Example 7</a>
364381
</li>
382+
<li class="nav-item">
383+
<a class="nav-link" id="example8-tab"
384+
href="#example8" role="tab"
385+
aria-controls="example8" aria-selected="false"
386+
data-toggle="tab">Example 8</a>
387+
</li>
365388
</ul>
366389
</div>
367390
</div>
@@ -386,6 +409,7 @@ <h3>Example 1: Default feed styling</h3>
386409
'display_biography': true,
387410
'display_gallery': true,
388411
'display_captions': true,
412+
'max_tries': 8,
389413
'callback': null,
390414
'styling': true,
391415
'items': 8,
@@ -523,9 +547,38 @@ <h3>Example 5: Want to display IGTV?</h3>
523547
</div>
524548
</div>
525549

550+
526551
<div class="tab-pane fade" id="example6"
527552
role="tabpanel" aria-labelledby="example6-tab">
528-
<h3>Example 6: Don't like our styles at all?</h3>
553+
<h3>Example 6: Using GraphQL API</h3>
554+
<p>Use <i>user_id</i> to fetch data directly from Instagram GraphQL API</p>
555+
<div id="instagram-feed6" class="instagram_feed"></div>
556+
<div class="section_code py-3">
557+
<div>Code:</div>
558+
<pre><code class="language-html">&lt;script src="jquery.instagramFeed.min.js"&gt;&lt;/script&gt;
559+
&lt;script&gt;
560+
(function($){
561+
$(window).on('load', function(){
562+
$.instagramFeed({
563+
'user_id': '2220311520',
564+
'container': "#instagram-feed6",
565+
'display_gallery': true,
566+
'display_captions': true,
567+
'styling': true,
568+
'items': 18,
569+
'items_per_row': 3,
570+
'margin': 1
571+
});
572+
});
573+
})(jQuery);
574+
&lt;/script&gt;
575+
</code></pre>
576+
</div>
577+
</div>
578+
579+
<div class="tab-pane fade" id="example7"
580+
role="tabpanel" aria-labelledby="example7-tab">
581+
<h3>Example 7: Don't like our styles at all?</h3>
529582
<p>Make your owns disabling <i>styling</i></p>
530583
<div class="instagram_feed info">
531584
<p>This is the html you will have (Note we have enabled profile and biography in this case).</p>
@@ -573,9 +626,9 @@ <h3>Example 6: Don't like our styles at all?</h3>
573626
</div>
574627
</div>
575628

576-
<div class="tab-pane fade" id="example7"
577-
role="tabpanel" aria-labelledby="example7-tab">
578-
<h3>Example 7: Don't either like our template?</h3>
629+
<div class="tab-pane fade" id="example8"
630+
role="tabpanel" aria-labelledby="example8-tab">
631+
<h3>Example 8: Don't either like our template?</h3>
579632
<p>Define a <i>callback</i> and do not define a <i>container</i></p>
580633
<div class="instagram_feed info">
581634
<p>This is the format you will get.</p>
@@ -632,6 +685,7 @@ <h3 class="text-white">Still not enough?</h3>
632685
'display_biography': true,
633686
'display_gallery': true,
634687
'display_captions': true,
688+
'max_tries': 8,
635689
'callback': null,
636690
'styling': true,
637691
'items': 8,
@@ -691,6 +745,16 @@ <h3 class="text-white">Still not enough?</h3>
691745
'items_per_row': 4,
692746
'margin': 1
693747
});
748+
$.instagramFeed({
749+
'user_id': '20311520',
750+
'container': "#instagram-feed6",
751+
'display_gallery': true,
752+
'display_captions': true,
753+
'styling': true,
754+
'items': 18,
755+
'items_per_row': 3,
756+
'margin': 1
757+
});
694758

695759
//example 7
696760
$.instagramFeed({

0 commit comments

Comments
 (0)