JSFiddle - React, Tailwind, and code Playground

by kspr

HTML

<div id="form">
    <div>
        <label for="url_id">
            facebook access_token:
            <a class="legend" target="_blank" href="https://developers.facebook.com/tools/explorer/">click para obtener uno</a>
        </label>
        <input type="text" id="access_token" placeholder="EAACEdEose0cBANDeAUuXUaX6PJ3zShR2deGVZBquIDOk9cvI3POxIG6BpoZBJjTZAeidB7gbIF3jDr9rfcyxH8r3sZAof1R4ZBJ25SLuqebe...">
    </div>
    <div>
        <label for="url_id">facebook comments url:</label>
        <input type="text" id="url_id" value="https://animeflv.net/ver/48226/koi-wa-ameagari-no-you-ni-5">
    </div>
    <div>
        <button id="loadCommentsBtn">Ver imagenes en comentarios</button>
    </div>
</div>
<div id="images">
    <h3>
        Imagenes encontradas en los comentarios de:
        <span></span>
    </h3>
    <div class="list"></div>
</div>

<div class="fb-comments" data-numposts="15" data-href="https://animeflv.net/ver/48226/koi-wa-ameagari-no-you-ni-5"></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Inconsolata');
body {
    font-family: 'Inconsolata';
}

ul,
li {
    list-style-type: none;
}

#form>div {
    margin-bottom: 10px;
    padding: 7px;
}

#form>div>label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

#form>div>label>.legend {
    display: block;
    font-size: 11px;
    margin-top: 5px;
}

#form>div>input {
    width: 100%;
}

#images {
    padding: 15px;
    display: none;
}

#images>.list {
    max-height: 400px;
    overflow-y: scroll;
}

#images>.list>img {
    margin: 15px;
}

JavaScript

window.fbAsyncInit = function () {
    FB.init({
        appId: 156149244424100,
        xfbml: true,
        version: 'v2.10'
    });

    document
        .querySelector('#loadCommentsBtn')
        .addEventListener('click', () => loadCommentPictures.apply(null, [
            document.querySelector('#access_token').value,
            document.querySelector('#url_id').value
        ]));
};

function loadCommentPictures(access_token, id) {
    FB.api(
        '/',
        'GET', {
            "fields": "og_object{comments}",
            "id": id,
            "access_token": access_token
        },
        function (response) {
            if ('error' in response) {
                alert(response.error.message);
                return;
            }
            
            const imagesDIV = document.querySelector('#images');
            const comments = response.og_object.comments.data;
            const users = comments.map(comment => comment.from);

            users.forEach((user) => {
                getUserProfile(user.id, (picture) => {
                    const img = document.createElement('img');

                    img.src = picture;
                    imagesDIV.querySelector('.list').appendChild(img);
                });
            });

            imagesDIV.style.display = 'block';
        }
    );
}

function getUserProfile(userID, callback) {
    FB.api(
        `/${userID}/picture`,
        'GET', {
            'width': 120,
            //'height': 240
        },
        (response) => ('error' in response) ? alert(response.error.message) : callback.call(null, response.data.url)
    );
}

(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/es_LA/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));