Having trouble with Instafeed JS loading?

I am currently experimenting with instafeed.js, but I am encountering difficulties getting it to load on a basic bootstrap page.

While everything else on my page loads successfully, this particular container remains empty without any Instagram code present.

I have downloaded the instafeed js folder and placed it in my root directory. The working file is located in the same folder as the instafeed folder, and the min.js file can be found inside.

Other than omitting my client ID for security reasons, what could potentially be causing this issue?

Below is the relevant code block:

<head>
<script type="text/javascript" src="instafeed.js-master/instafeed.min.js"></script>
</head>

<div class="container">
    <div id="instafeed"></div>  
</div>


<script type="text/javascript">
$(document).ready(function() {
  var feed = new Instafeed({
    clientId: 'myclientid',
    limit: '4'
    });
  feed.run();
});
</script>

Answer №1

Make sure to include your access token when setting up the Instafeed API. Access tokens can be obtained from this link:

Below is a sample implementation:

if ($instafeed.length) {
            var feed = new Instafeed({
                get: 'user',
                limit: 8,
                userId: userId,
                accessToken: accessToken,
                template: '<a target="_blank" href="{{link}}"><img src="{{image}}" /><div class="instagram-post-stats"><div class="likes">{{likes}}</div><div class="comments">{{comments}}</div></div><i class="fa fa-instagram"></i></a>',
                resolution: 'standard_resolution',
                sortBy: 'most-recent',
            });
        }
            feed.run();
        });
    }
        feed.run();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with floating date and time not functioning properly in ICS file for Yahoo Calendar

I have set up a calendar event in Google, Apple, and Yahoo calendars for each individual customer. The event is scheduled based on the customer's address at a specific time, so there should be no need for timezone conversion. However, I encountered an ...

Activate the Select List to Appear Only When a Search is Conducted

Currently, I have implemented the react-select API in order to provide language options for selection. <Select isMulti name="langs" options={langOptions} defaultValue={{ value: "English", label: "English", nativeNam ...

The SmoothShading feature of THREE does not alter the geometry

I am having trouble with smooth shading on my model - the polygons are still clearly visible and switching between smooth and flat shading in the three.js inspector isn't making a difference. The OBJ file contains vertex normal data, so I don't t ...

Creating a Button with Icon and Text in TypeScript: A step-by-step guide

I attempted to create a button with both text and an icon. Initially, I tried doing it in HTML. <button> <img src="img/favicon.png" alt="Image" width="30px" height="30px" > Button Text ...

What is the method for formatting within the <textarea> element?

While working on developing a comment system, I recently made the discovery that text areas cannot be formatted to retain paragraphs, line breaks, etc. This was particularly noticeable when comparing sites like StackOverflow, which uses a text editor inste ...

items within the grid container are positioned without being constrained to rows and columns

After using the Container element, I noticed that all my grid items are displaying in columns instead of rows. How can I correct this layout issue? https://i.stack.imgur.com/9BjOA.png Click here to access the project link. ...

Exploring the capabilities of Vue.js, including the use of Vue.set()

Just starting out with Vuejs and I have a query regarding the correct approach to achieve what I want. My Objective I aim to have some dates stored in an array and be able to update them upon an event trigger. Initially, I attempted using Vue.set, which ...

Switch out the image source and add attributions until the AJAX call is complete

<div id="fbAdsIconDiv" class="social_icon"> <img src="~/Content/images/fbAdsAddOn_1.png" onclick="toggleImage(this)" id="fbAdsAddOn" data-toggle="tooltip" title="click to enable" class="confirmBox f ...

jQuery ajaxSetup: handling error retries for ajax calls is not possible

When using $.ajaxSetup(), I am faced with the challenge of making an AJAX request after refreshing a valid token in case the previous token has expired. The issue arises when attempting to execute $.ajax(this) within the error callback. $.ajax({ url: ...

Prevent automatic jumping to input fields

Can someone help me with a problem related to the html input tag or primefaces p:input? I am facing an issue where the cursor always automatically jumps into the input field. The height of my page is such that scrolling is required, and the input field i ...

Enhancing the Performance of jQuery Scripts

My jQuery function called textfill is utilized on numerous div elements. Essentially, it resizes the text inside each div to perfectly fit the container so that longer texts are made smaller than shorter ones while maintaining the maximum font size without ...

Express JS backend causing CSS file to fail to load in React project

After doing some research on Stack Overflow, I came across a few solutions but none of them seemed to work for my specific situation. I am currently attempting to serve my React website from an Express backend server. Here is the layout of my folders: cli ...

Repairing the Performance of the 'Save' Feature

Can the 'Save' button in my code save team assignments for players selected using drag and drop? I'm considering using localStorage, but unsure about implementation. Note: To run the code properly, copy it as an HTML file on your computer. ...

Get a single object from an array with .single method provided by @ngrx

Seeking to retrieve an Observable containing a single object from an array of objects in my store. I aim to utilize the .single operator, which should throw an exception if there is not exactly 1 object present. However, I'm struggling with this as my ...

What is the reason behind the failure of executing "this.$refs.inputField.focus()"?

I've set up an input field with a ref="inputField" as shown below: <input ref="inputField"> <button @click="btn">Click</button> When the button is clicked, I want the input field to receive focus. Here& ...

Store the image URL in cache during AJAX loading

I have implemented an ajax slider to display images, and it is functioning perfectly. However, I am facing an issue with image caching. Since the images change dynamically using ajax, there is no cache available which causes a delay in displaying the new i ...

Positioning elements to the right inside a Bootstrap 4 thumbnail behaves in a unique way when compared to Bootstrap

<div class='img-thumbnail'> <img src="a.jpg" class='img-fluid'> </div> This particular code snippet is from an HTML file using Bootstrap 4 CSS. It displays an image inside a styled box. Adding an h4 heading places ...

Welcome to the JavaScript NodeJs Open Library!

I am trying to open multiple images simultaneously in the default Windows Photo Viewer that I have stored in my folder using the npm open library: let files = ['Dog.gif', 'Cat.jpeg']; for(let i=0; i<files.length; i++){ open(`${file ...

Use jquery and json to automatically populate select fields based on specific threshold values when they are changed

Looking for guidance on using jQuery to dynamically populate four select fields based on a four-level JSON array for a webshop, depending on threshold values. I'm seeking help with dynamically changing the selects only if the given value is greater t ...

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...