JAVASCRIPT: Add Instagram Photos To Your Website Without API – instagramFeed by cssscript.com

fuente: https://www.cssscript.com/instagram-photos-feed/

Buenas a todos

la verdad es que funciona bien y no hay necesidad de hacer tokens ni nada, muy rapidamente lo implementais en vuestra web

En el enlace de la fuente que os dejo podreis ver la demo y descargar las librerias necesarias pero os explico lo que tuve que hacer:

 


<div class="container">
<h1>jQuery instagramFeed: Instagram Gallery Plugin</h1>
<div id="instagram-feed-demo" class="instagram_feed"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="jquery.instagramFeed.js"></script>
<script>
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'instagram',
'container': "#instagram-feed-demo",
'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
});
});
})(jQuery);
</script>
</div>

Os dejo el articulo completo, algunos me acusaran de plagiador, pero como veis en el titulo del blog y en la primera linea del post siempre indico la fuente. No intento apropiarme del conocimiento de otros xDD

 

Description:

This is the Vanilla JavaScript version of the jQuery instagramFeed plugin, which helps you create a gallery fetching and displaying Instagram photos from any user (or any tag you provide) on your webpage.

Without the need of the Instagram access token.

How to use it:

1. Download and load the minified version of the instagramFeed library in the document.

http://dist/InstagramFeed.min.js

2. Create a placeholder element for the Instagram gallery.

<div id="instagram-feed-demo" class="instagram_feed"></div>

3. Initialize the instagramFeed library and specify the Instagram user (or tag) and container element as follows:

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo" 
});

4. Decide whether to display the profile, biography, gallery, and IGTV.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'display_profile': true,
    'display_biography': true,
    'display_gallery': true,
    'display_igtv': false,
});

5. Determine the max number of items to display. Default: 8.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'items': 10
});

6. Determine the number of items per row. Default: 4.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'items_per_row': 3
});

7. Set the space between photos. Default: 0.5.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'margin': 0.5
});

8. Customize the image size. Default: 640(px).

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'image_size': 480
});

9. Get raw data with the callback function.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'get_data': true,
    'callback': function(data) {
      // ...
    }
});

10. Enable the lazy load functionality. Default: false.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'lazy_load': true
});

11. Retrieve data by tags. Default: false.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'tag': 'tags here'
});

12. Disable the default styling and apply your own CSS to the Instagram gallery.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'styling': false
});
.instagram_profile {
  /* custom styles here */
}

.instagram_profile_image {
  /* custom styles here */
}

.instagram_gallery {
  /* custom styles here */
}

.instagram_igtv {
  /* custom styles here */
}

13. Execute a callback when an error ocurs.

new InstagramFeed({
    on_error: function(error_description, error_code){
      // do something
    }
});

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s