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: