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:
- abrir la demo – https://www.jqueryscript.net/demo/Instagram-Photos-Without-API-instagramFeed/
- descargar la libreria que ellos usan, porque la que me daban para descargar no me funcionaba – https://www.jqueryscript.net/demo/Instagram-Photos-Without-API-instagramFeed/jquery.instagramFeed.js
- por ultimo en vuestro html incluis este bloque, y a correr
<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
}
});
www.coudlain.com 