Instagram Scrapper Images

instaGrabJquery.js

function instagramFeed(username, container = ".instagram-feed", numOfImages = 6) {
    const host         = 'https://www.instagram.com/';
    const url          = host + username;
    const hostImageUrl = host + 'p/';

    let userFeed = {};

    // request data
    $.get(url, function (data) {
        // get content from script tag
        data = data.split("window._sharedData = ")[1].split("<\/script>")[0];
        data = JSON.parse(data.substr(0, data.length - 1));
        data = data.entry_data.ProfilePage;
        data = data[0].graphql.user;

        userFeed = {
            fullName   : data.full_name,
            username   : data.username,
            biography  : data.biography,
            follow     : data.edge_follow,
            followed   : data.edge_followed_by,
            id         : data.id,
            externalUrl: data.external_url,
            medias     : []
        };

        const medias = data.edge_owner_to_timeline_media.edges;
        medias.forEach(element => {
            const imagesImgUrl   = element.node.thumbnail_resources[3].src;
            const imagesUrl      = element.node.shortcode;
            const imagesCaption  = element.node.edge_media_to_caption.edges[0].node.text;
            const imagesLike     = element.node.edge_media_preview_like.count;
            const imagesComments = element.node.edge_media_to_comment.count;

            userFeed.medias.push({
                urlImage: imagesImgUrl,
                url     : hostImageUrl + imagesUrl,
                caption : imagesCaption,
                likes   : imagesLike,
                comments: imagesComments,
            });
        });

    }).then(r => {
        let htmlFeed = "";
        userFeed.medias.forEach(media => {
            htmlFeed += `<div class="instagram-images__item">
            <a href="${media.url}" class="instagram-images__item-image">
                <span class="instagram-images__item-image-absolute">
                    <span class="instagram-images__item-cmt">${media.comments}</span>
                    <span class="instagram-images__item-likes">${media.likes}</span>
                </span>
                <img src="${media.urlImage}">
            </a>

            <a href="${media.url}" class="instagram-images__item-title">
                ${media.caption}
            </a>
        </div>`;
        });

        $(container).html(htmlFeed).hide().fadeIn(400);
    });
}

instagramFeed('iluminandooamor', '.instagram-images', 6);

instaGrabJs.js

function instagramFeed(container = ".instagram-feed") {
    const wrapper      = document.querySelector(container);
    const username     = wrapper.getAttribute('data-username');
    const count        = wrapper.getAttribute('data-count');
    const host         = 'https://www.instagram.com/';
    const url          = host + username;
    const hostImageUrl = host + 'p/';

    let userFeed = {};

    fetch(url)
        .then(function (response) {
            return response.text()
        })
        .then(function (data) {
            // get content from script tag
            data = data.split("window._sharedData = ")[1].split("<\/script>")[0];
            data = JSON.parse(data.substr(0, data.length - 1));
            data = data.entry_data.ProfilePage;
            data = data[0].graphql.user;

            userFeed = {
                fullName   : data.full_name,
                username   : data.username,
                biography  : data.biography,
                follow     : data.edge_follow,
                followed   : data.edge_followed_by,
                id         : data.id,
                externalUrl: data.external_url,
                medias     : []
            };

            const medias = data.edge_owner_to_timeline_media.edges;
            medias.forEach(element => {
                const imagesImgUrl   = element.node.thumbnail_src;
                const imagesUrl      = element.node.shortcode;
                const imagesCaption  = element.node.edge_media_to_caption.edges[0].node.text;
                const imagesLike     = element.node.edge_media_preview_like.count;
                const imagesComments = element.node.edge_media_to_comment.count;

                userFeed.medias.push({
                    urlImage: imagesImgUrl,
                    url     : hostImageUrl + imagesUrl,
                    caption : imagesCaption,
                    likes   : imagesLike,
                    comments: imagesComments,
                });
            });

            return userFeed;
        })
        .then(userFeed => {
            let htmlFeed = "";
            for (let i = 0; i < count; i++) {
                const media = userFeed.medias[i];

                htmlFeed += `<div class="instagram-images__item">
                    <a href="${media.url}" class="instagram-images__item-image">
                        <img src="${media.urlImage}">
                    </a>
                    <span class="instagram-images__item-image-absolute">
                        <span class="instagram-images__item-like"><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 3.532 10 7.874 0 4.162-3.627 6.72-7.893 7.721l-2.107 2.958-2.107-2.958c-4.304-1.011-7.893-3.617-7.893-7.721 0-4.342 4.486-7.874 10-7.874zm0-2c-6.627 0-12 4.42-12 9.874 0 4.512 3.678 8.317 8.701 9.496l3.299 4.63 3.299-4.63c5.023-1.18 8.701-4.985 8.701-9.496 0-5.454-5.373-9.874-12-9.874z"/></svg> ${media.comments}</span>
                        <span class="instagram-images__item-like"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/></svg> ${media.likes}</span>
                    </span>
                    <a href="${media.url}" class="instagram-images__item-title">
                        ${media.caption}
                    </a>
                </div>`;
            }

            wrapper.innerHTML = htmlFeed;
        });
}

instagramFeed('.instagram-images');