InstagramBasicDisplayApi

[Stefanowitsch]

1 hour ago, nbcommunication said:

Thanks, can you try changing the log to $this->log(json_encode($data)); instead?

Added before line 439 this does not log anything (but also no error!):

 $this->log(json_encode($data));

This logs "false":

bd(json_encode($data));

 

[nbcommunication]

Thanks @Stefanowitsch,

That confirms that the issue is occurring when it tries to JSON encode the data. I'm happy for you to send the print_r() data via direct message if you want me to take a closer look. I also wonder whether trying to log serialize($data) would work, if so that output would be easier for me to work with.

Cheers,

Chris

[Stefanowitsch]

Tutorial Time!

So finally I was able to make fetching the Instagram data work. And here's my tutorial how to achieve this.

These are my requirements:

- Load images from an instagram account and append them into a carousel slider on a website
- To reduce loading times and file sizes I want to apply a "scrollspy" behaviour that only fetches data when the carousel is about to enter the viewport 
- I only load a certain amount of data and once the user is about to reach the end of the carousel, new data is fetched and appended automatically

Using the UIKit framework comes in handy here. I am in fact using the UIKit slider component in combination with the UIKit scrollspy component here.

Let's start:

1. This piece of code has to be implemented at the very top of your template PHP file (in my case it's the home.php)

What this code does is basically: "If the this page is requested through an ajax all then get the media from the instagram account, print it out and then stop processing the rest of the template code."

<?php

$instagram = $modules->get('InstagramBasicDisplayApi');

if($config->ajax) {
    echo $instagram->getImages('USERNAME',6); // change USERNAME to the name that is authorized in the InstagramBasicDisplayApi module settings
    die();
}
?>

2. This is the HTML markup for our slider carousel (using the UIKit slider). Put it into the same template that has the code above.

<section class="instagram-feed" uk-scrollspy="cls:uk-animation-slide-bottom">
    <div class="uk-container">
        <div class="uk-text-center">
            <h2>MY INSTAGRAM FEED</h2>
        </div>
        <div class="insta-spinner uk-text-center uk-flex uk-flex-column uk-flex-middle">
            <div uk-spinner="ratio: 2"></div>
            <p><b>Loading data...</b></p>
        </div>
        <div uk-slider>
            <div class="uk-position-relative">
                <div class="uk-slider-container uk-margin">
                    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-5@m uk-grid" uk-scrollspy="target: > li > .last-item">
                    </ul>
                </div>
                <div class="uk-visible@s">
                    <a href="#" class="slider-arrow uk-position-center-left-out uk-position-medium" uk-slider-item="previous"><img src="/site/templates/images/icons/icon-arrow-left.svg" width="30" height="30" alt="Pfeil Links" loading="lazy"></a>
                    <a href="#" class="slider-arrow uk-position-center-right-out uk-position-medium" uk-slider-item="next"><img src="/site/templates/images/icons/icon-arrow-right.svg" width="30" height="30" alt="Pfeil Rechts" loading="lazy"></a>
                </div>
            </div>
            <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
        </div>
    </div>
</section>

Note:

- I am using a loading spinner right away, this will be removed later on when data is fetched.
- We are implementing the scrollspy component for the whole markup block. So when this block enters the viewport an event is fired that allows us to then start fetching data.
- We are also implementing the scrollspy component that looks for the <li> with the "last-item" class. This will be our indicator for appending new data later on.
- There are currently no <li> elements! That is of of course what we desire. We will load images from instagram and create those <li> elements on the fly.

3. This is the script that will fetch data and append the new carousel items. Put this code below the HTML markup or in a separate JS file:

<script>

    document.addEventListener("DOMContentLoaded", () => {

        let feed = document.querySelector('.instagram-feed');
        let sliderList = document.querySelector('.uk-slider-items');
        let spinner = document.querySelector('.insta-spinner');

        // listen for the scrollspy 'inview' event and execute this function if the carousel element comes into the viewport
        feed.addEventListener('inview', () => fetchData());

        // create new carousel items and append them to the carousel
        let appendSlides = function(data) {

            data = JSON.parse(data);

            data.forEach((item) => {
                let image = document.createElement('li');
                image.innerHTML = `<a href="${item.link}" target="_blank" rel="noopener" class="uk-display-block uk-height-1-1 uk-position-relative"><img src="${item.src}" alt="${item.alt}"/></a>`;
                sliderList.appendChild(image);
            });

            // add new 'last-item' class to the second last carousel item so that new data is fetched when this element comes into the viewport
            const lastItem = sliderList.querySelector('li:nth-last-child(2) > a');
            lastItem.classList.add('last-item');

            // listen for the scrollspy 'inview' event and execute this function if the last carousel item comes into the viewport
            if (lastItem) {
                lastItem.addEventListener('inview', () => fetchData());
            }

        };

        // Make an ajax request using the fetch API 
        async function fetchData() {

            try {
                const response = await fetch(window.location.href, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                let data = await response.text();
                
                // Once data is received pass this data to our function to generate the carousel items
                appendSlides(data);
                
                // and don't forget to remove the loading spinner!
                spinner.remove();

            } catch (error) {
                console.error(error);
            }
        }

    });

</script>

 

That's it! If everything works correctly it should look like this:

[DV-JF]

Hey,

one of my feeds stopped working. I renewed the token, but it's not working - But I've noticed this message one Facebooks "Basic Display" page:

Anyone else having this problem?

This is how the module-page looks like:

@nbcommunication Any ideas?

 

[nbcommunication]

Hi @DV-JF,

Unfortunately I suspect this may mean an end to this module being able to function. The impression I'm getting here is that the Basic Display API applications now need to be submitted for review/approval. This module took advantage of FB allowing development applications if they were created 'solely for the purpose of generating access tokens with the User Token Generator'.

It really isn't clear however.

When I try to generate an access token in the User Token Generator I get an error page on the Instagram pop-up window. I don't know whether this is because there's an issue on their end, because of the permissions thing you've highlighted, or something else.

The next token renewal we have on a site using this module is in two weeks, so it'll be then before we come up against this issue.

I'm going to ask a colleague to set up an application from scratch and see if he comes up against any issues, or other information that might shed some light on this.

Will keep you updated on what we find.

Cheers,

Chris

[nbcommunication]

Hi,

Initial findings aren't positive unfortunately. In our application, whenever I try to generate a User Token I get an Error message on the Instagram popup. I got a colleague to create an application from scratch in a FB dev account not associated with our business one, and we also got the same error when trying to generate a token.

There's a message in the App Review section indicating that reviews are delayed for Instagram apps due to volume, which suggests that they've recently made it necessary to submit for App Review and there are a lot of people scrambling to get this done.

We're going to investigate further and see if we can find some more information about this, perhaps getting confirmation through developer support and/or the community help.

If this is what is going on, this module will still work for 'Live' (reviewed) applications, but my understanding is that the process is a likely a lot of jumping through hoops, and completely overkill for what the application is trying to achieve. It isn't something we'd be attempting willingly!

Cheers,

Chris

[nbcommunication]

Hi, 

Some good news: we did manage to generate a User Token without app review, after setting a new application up from scratch. It's quite possible this bug is not connected to potential changes in the App Review policy, as initially feared.

Similar issues have been reported:

https://stackoverflow.com/questions/76473468/instagram-basic-display-api-cant-generate-access-token

https://developers.facebook.com/support/bugs/185012584505063/

https://developers.facebook.com/community/threads/636065331832545/

We will keep an eye on this.

Thanks,

Mark

[nbcommunication]

Hi @DV-JF,

I've just checked in on one of our sites using this module and its token has renewed again. 

I was definitely having issues with the FB/META/IG API stuff last week, so my preferred explanation is that there have been issues on that end that's prevented token generation and renewal.

Are you still having an issue?

Cheers,

Chris