Author: | jsanahuja |
---|---|
Views Total: | 13,290 views |
Official Page: | Go to website |
Last Update: | March 5, 2021 |
License: | MIT |
Preview:

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.
This plugin is Deprecated since the latest Instagram changes. Move to an official API based plugin please.
How to use it:
1. Download and load the minified version of the instagramFeed library in the document.
<script src="dist/InstagramFeed.min.js"></script>
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. Customize the template for the Instagram gallery.
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. Determine whether to display captions. Default: true.
new InstagramFeed({ display_captions: false });
13. 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 */ }
14. Execute a callback when an error ocurs.
new InstagramFeed({ on_error: function(error_description, error_code){ // do something } });
15. Customize the Instagram response cache expiry time. Default: 360.
new InstagramFeed({ 'cache_time': 360 });
16. Determine the Instagram location ‘{id}/{slug}’ from where to retrieve the feed. Required if username, tag and user_id are not defined. Default: null.
new InstagramFeed({ 'location': '{id}/{slug}' });
17. Determine the number of tries to fetch Instagram data until throwing. Useful to avoid arbitrary CORS issues. Default: 8.
new InstagramFeed({ 'max_tries': 8 });
18. Specify the URL where to fetch the data. Useful if instagram changes CORS policy. Default: ‘https://www.instagram.com/’.
new InstagramFeed({ 'host': 'https://images' + ~~(Math.random() * 3333) + '-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/' });
Changelog:
v3.0.2 (03/05/2021)
- Bugfix
v3.0.1 (03/02/2021)
- Added support for Instagram locations using the location parameter.
- Automatically fallback to Google when the first try fails.
v2.0.2 (02/22/2021)
- Fixed Object.assign issue for IE.
v2.0.1 (02/22/2021)
- Increased default cache_time from 120 to 360 minutes.
v2.0.0 (02/22/2021)
- Client-side caching using localStorage implemented
v1.5.1 (11/16/2020)
- Fixed escape_string for IGTV captions
v1.5.1 (11/16/2020)
- Fixed escape_string for IGTV captions
v1.5.0 (11/05/2020)
- Added display_captions option.
v1.4.0 (06/23/2020)
- Removed ‘get_data’ to enable the callback. Now the callback is always called if defined. It is now also compatible with container HTML rendering so using both would make callback to act like an ‘on_ready’ event.
- Added ‘on_error’ event.
06/23/2020
- v1.3.8: Added lazy_load functionality
05/01/2020
- v1.3.7: Added age restriction check
04/07/2020
- v1.3.6: Added trailing slash to IG requests.
04/04/2020
- v1.3.5: Added network ban detection.
04/02/2020
- v1.3.4: Fixed null value accessibility_caption issue
02/08/2020
- v1.3.2: hotfix
12/14/2019
- Fixed usernames in image alt tags
When i add this to my sites template it is going down not across like the demo, its in a col-md-12
How can I add this plugin to my Joomla site?
I get this erro $.instagramFeed is not a function
new InstagramFeed({
‘username’: ‘instagram’,
‘container’: document.getElementById(“instagram-feed-demo”),
‘display_profile’: true,
‘display_biography’: true,
‘display_gallery’: true,
‘callback’: null,
‘styling’: true,
‘items’: 8,
‘items_per_row’: 4,
‘margin’: 1
});
should i put this in the instafeed.min.js file?
Thank U! Thank U! Thank U! Thank U!
Easy to customize, it took me less than 3 minutes to run that script on our website. Thank you 🙂
What about the pagination. how we can handle it
How would I go about getting the captions to display along with the photos?
Finally a native JS solution without any Instagram access token with results in seconds!!!! And extremely well done I might add: clear instructions, simple and fast to implement with excellent results. Added to that, its API is very well documented!
This is, in my sole opinion and I mean it from the bottom of my heart, by far the best pure JS Instagram plugin developed! Horns up to the developer!!!
It is out
Seems like the Instagram connection is broken. Waiting for the update from the original author.
🙂
You can try profilepageimages.usecue.com (I am the author).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.instagram.com/xxxx . (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Updated. Check the Doc for more details.
12 images are the maximum?
Good work on the plugin! I can see it works on chrome but on firefox the images do not show, are you aware of this issue or is there a fix that can be done?
Thanks!
Excuse me!
How to show slide with instagram-sidecar?
Images are not showing in your demo only text showing
Hello, I have added it to my site, but there are no pictures, can you take a look at it? http://cifttepe.com/