405 |
406 |
408 |
Example 1: Default feed styling
409 |
Don't like it? Check other examples!
410 |
411 |
412 |
Code:
413 |
<script src="jquery.instagramFeed.min.js"></script>
414 | <script>
415 | (function($){
416 | $(window).on('load', function(){
417 | $.instagramFeed({
418 | 'username': 'instagram',
419 | 'container': "#instagram-feed1",
420 | 'display_profile': true,
421 | 'display_biography': true,
422 | 'display_gallery': true,
423 | 'display_captions': true,
424 | 'max_tries': 8,
425 | 'callback': null,
426 | 'styling': true,
427 | 'items': 8,
428 | 'items_per_row': 4,
429 | 'margin': 1,
430 | 'lazy_load': true,
431 | 'on_error': console.error
432 | });
433 | });
434 | })(jQuery);
435 | </script>
436 |
437 |
438 |
439 |
440 |
442 |
Example 2: Only want images?
443 |
Disable display_profile and display_biography
444 |
445 |
446 |
Code:
447 |
<script src="jquery.instagramFeed.min.js"></script>
448 | <script>
449 | (function($){
450 | $(window).on('load', function(){
451 | $.instagramFeed({
452 | 'username': 'github',
453 | 'container': "#instagram-feed2",
454 | 'display_profile': false,
455 | 'display_biography': false,
456 | 'display_gallery': true,
457 | 'display_captions': false,
458 | 'callback': null,
459 | 'styling': true,
460 | 'items': 8,
461 | 'items_per_row': 4,
462 | 'margin': 1
463 | });
464 | });
465 | })(jQuery);
466 | </script>
467 |
468 |
469 |
470 |
471 |
473 |
Example 3: Want to load more or change the display?
474 |
Change items, items_per_row and margin
475 |
476 |
477 |
Code:
478 |
<script src="jquery.instagramFeed.min.js"></script>
479 | <script>
480 | (function($){
481 | $(window).on('load', function(){
482 | $.instagramFeed({
483 | 'username': 'zara',
484 | 'container': "#instagram-feed3",
485 | 'display_profile': false,
486 | 'display_biography': false,
487 | 'display_gallery': true,
488 | 'display_captions': false,
489 | 'callback': null,
490 | 'styling': true,
491 | 'items': 12,
492 | 'items_per_row': 6,
493 | 'margin': 0.25
494 | });
495 | });
496 | })(jQuery);
497 | </script>
498 |
499 |
500 |
501 |
502 |
504 |
Example 4: Want to fetch a TAG?
505 |
Use tag instead of username.
506 |
507 |
508 |
Code:
509 |
<script src="jquery.instagramFeed.min.js"></script>
510 | <script >
511 | (function($){
512 | $(window).on('load', function(){
513 | $.instagramFeed({
514 | 'tag': 'paradise',
515 | 'container': "#instagram-feed4",
516 | 'display_profile': true,
517 | 'display_gallery': true,
518 | 'display_captions': true,
519 | 'items': 100,
520 | 'items_per_row': 5,
521 | 'margin': 0.5
522 | });
523 | });
524 | })(jQuery);
525 | </script>
526 |
527 |
528 |
529 |
530 |
532 |
Example 5: Want to display IGTV?
533 |
Enable display_igtv. What is IGTV?
534 |
535 |
536 |
Code:
537 |
<script src="jquery.instagramFeed.min.js"></script>
538 | <script >
539 | (function($){
540 | $(window).on('load', function(){
541 | $.instagramFeed({
542 | 'username': 'fcbarcelona',
543 | 'container': "#instagram-feed5",
544 | 'display_profile': false,
545 | 'display_biography': false,
546 | 'display_gallery': false,
547 | 'display_captions': false,
548 | 'display_igtv': true,
549 | 'callback': null,
550 | 'styling': true,
551 | 'items': 8,
552 | 'items_per_row': 4,
553 | 'margin': 1
554 | });
555 | });
556 | })(jQuery);
557 | </script>
558 |
559 |
560 |
561 |
562 |
563 |
565 |
Example 6: Using GraphQL API
566 |
Use user_id to fetch data directly from Instagram GraphQL API
567 |
To find the user_id based on the username, use following URL
568 | https://www.instagram.com/web/search/topsearch/?query=<username>
569 |
The result page will contain text starting with such structure
570 | {"users":[{"position":0,"user":{"pk":"<user_id>","username":"<username>..."
571 |
Where <user_id> is the user_id we are looking for.
572 |
573 |
574 |
Code:
575 |
<script src="jquery.instagramFeed.min.js"></script>
576 | <script>
577 | (function($){
578 | $(window).on('load', function(){
579 | $.instagramFeed({
580 | 'user_id': '2220311520',
581 | 'container': "#instagram-feed6",
582 | 'display_gallery': true,
583 | 'display_captions': true,
584 | 'styling': true,
585 | 'items': 18,
586 | 'items_per_row': 3,
587 | 'margin': 1
588 | });
589 | });
590 | })(jQuery);
591 | </script>
592 |
593 |
594 |
595 |
596 |
598 |
Example 7: Don't like our styles at all?
599 |
Make your owns disabling styling
600 |
601 |
This is the html you will have (Note we have enabled profile and biography in this case).
602 |
<div class="instagram_profile">
603 | <img class="instagram_profile_image" src="..." alt="Instagram profile pic">
604 | <p class="instagram_username">@Instagram (<a href="...">@instagram</a>)</p>
605 | <p class="instagram_biography">....</p>
606 | </div>
607 | <div class="instagram_gallery">
608 | <a href="https://www.instagram.com/p/Bh-P3IoDxyB" rel="noopener" target="_blank">
609 | <img src="..." alt="instagram instagram image 0" />
610 | </a>
611 | ...
612 | </div>
613 | <div class="instagram_igtv">
614 | <a href="https://www.instagram.com/p/Bh-P3IoDxyB" rel="noopener" target="_blank">
615 | <img src="..." alt="instagram instagram image 0" />
616 | </a>
617 | ...
618 | </div>
619 |
620 |
621 |
622 |
Code:
623 |
<script src="jquery.instagramFeed.min.js"></script>
624 | <script>
625 | (function($){
626 | $(window).on('load', function(){
627 | $.instagramFeed({
628 | 'username': 'instagram',
629 | 'container': "#instagram-feed3",
630 | 'display_profile': true,
631 | 'display_biography': true,
632 | 'display_gallery': true,
633 | 'display_captions': false,
634 | 'display_igtv': true,
635 | 'callback': null,
636 | 'styling': false,
637 | 'items': 12,
638 | });
639 | });
640 | })(jQuery);
641 | </script>
642 |
643 |
644 |
645 |
646 |
648 |
Example 8: Don't either like our template?
649 |
Define a callback and do not define a container
650 |
651 |
This is the format you will get.
652 |
653 |
654 |
655 |
656 |
Code:
657 |
<script type="text/javascript" src="jquery.instagramFeed.min.js"></script>
658 | <script type="text/javascript">
659 | (function($){
660 | $(window).on('load', function(){
661 | $.instagramFeed({
662 | 'username': 'instagram',
663 | 'callback': function(data){
664 | $('#jsonHere').html(JSON.stringify(data, null, 2));
665 | }
666 | });
667 | });
668 | })(jQuery);
669 | </script>
670 |
671 |
672 |
673 |
674 |
131 |
132 |
133 |