API Graph Facebook - лента Instragram не отображается при добавлении пользовательского jQuery на Raspberry - PullRequest
Новая
       12

API Graph Facebook - лента Instragram не отображается при добавлении пользовательского jQuery на Raspberry

0 голосов
/ 14 сентября 2018

У меня действительно странная ситуация, поэтому я собираюсь объяснить это как можно лучше.

Мой проект отображает то, что мы называем "динамическими сетями" для клиентов. Они создают обычный веб-сайт с некоторыми специальными атрибутами тегов , такими как data-dynamic-id. Эти атрибуты заменяются через jQuery при вызове сети. Например:

index.html 

<html>
    <head>
        <title>Dynamic web</title>
    </head>
    <body>
        <span dynamic-data-id="span1">This text will be replaced</span>
        <label dynamic-data-id="label1">This text will be replaced</label>
        <img src="this will be replaced" data-dynamic-id="img1" />

        <script src="customjQuery.js"></script>
    </body>
</html>

customjQuery.js 

var spans = $('span[data-dynamic-id]');
var labels = $('label[data-dynamic-id]');
var images = $('img[data-dynamic-id]');

$.each(images, function(ix, it){
    var newSrc = replace_data[$(it).data('dynamic-id')];

    if(newSrc == null || newSrc.length == 0) return;

    $(it).attr("src", newSrc);
});

$.each(spans, function(ix, it){
    var newText = replace_data[$(it).data('dynamic-id')];

    if(newText == null || newText.length == 0) return;

    if(newText.includes("</")) {
        $(it).empty();
        $(it).append( newText );
    }
    else {
        $(it).text(newText);
    }   
});

$.each(labels, function(ix, it){
    var newText = replace_data[$(it).data('dynamic-id')];

    if(newText == null || newText.length == 0) return;

    if(newText.includes("</")) {
        $(it).empty();
        $(it).append( newText );
    }
    else {
        $(it).text(newText);
    }
});

На данный момент все работает правильно.

Затем я должен был добавить каналы социальных сетей динамически . Итак, я создал несколько новых специальных атрибутов тега , чтобы справиться с этим:

index.html 

<html>
    <head>
        <title>Dynamic web with RRSS</title>
    </head>
    <body>
        <!-- The previous stuff... -->

        <div data-dynamic-sn="facebook"></div>
        <div data-dynamic-sn="twitter"></div>

        <div id="ig-posts">
            <div data-dynamic-sn="instagram"></div>
        </div>

        <script src="customjQuery.js"></script>
    </body>
</html>

customjQuery.js 

// The previous stuff...

var ssnn= jquery_signagetec('div[data-dynamic-sn]');

// The previous stuff...    

$.each(ssnn, function(ix, it){
    var html = '';

    var network = $(it).data('dynamic-sn');

    if (network == null || network.length == 0) return;

    id = replace_data[$(it).data('dynamic-sn')];

    if(id == null || id.length == 0) return;

    switch(network) {
        case 'facebook':
            // Do something...
            break;
        case 'twitter':
            // Do something...
            break;
        case 'instagram':
            // Do something...
            break;
        default:
            html = '';
    }

    if (html != '') {
        $(it).replaceWith(html);
    }
});

Поскольку у Facebook и Twitter были свои социальные плагины, было нетрудно встраивать эти каналы.

Но Instagram не был таким простым, в основном потому, что он проходит через Facebook Graph API, и это ад на земле. Хотя мне удалось добиться этого с помощью:

customjQuery.js 

// The previous stuff...

switch(network) {
    case 'facebook':
        // Do something...
        break;
    case 'twitter':
        // Do something...
        break;
    case 'instagram':
        html = '<script async src="https://connect.facebook.net/es_ES/sdk.js"></script>\n' +
               '<script src="../insta.js"></script>\n' + // <-- Here's an important thing
               '<script async defer src="https://www.instagram.com/embed.js"></script>' +
               '<script>\n'+
               '    setInterval(() => {\n' +
               '        if (document.readyState === "complete") {\n' +
               '            window.instgrm.Embeds.process();\n' +
               '        }\n' +
               '    }, 100);\n' +
               '    setInterval(() => {\n' +
               '        fbAsyncInit()\n' +
               '    }, 5 * 60 * 1000);\n'
               '</script>';
        break;
    default:
        html = '';
}

// The previous stuff...

insta.js 

window.fbAsyncInit = function () {
    var html = '';
    document.getElementById("ig-posts").innerHTML = '';

    FB.init({
        appId: replace_data['appId'],
        autoLogAppEvents: true,
        xfbml: true,
        version: "v3.1"
    });

    FB.getLoginStatus(function (response) {
        if (response.status === "connected") {
        FB.api(
            "/" + id + "/",
            "GET", { "fields": "instagram_business_account" },
            function (response) {
            if (response.error && response.error !== '') {
                console.log("Error recovering 'instagram_business_account': " + response.error.message);
            } else {
                FB.api(
                "/" + response.instagram_business_account.id + "/media",
                "GET", { "fields": "shortcode" },
                function (response) {
                    for (var i = 0; i < response.data.length; i++) {
                    var xhttp = new XMLHttpRequest();

                    xhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                        html = JSON.parse(this.response).html.replace('<script async defer src="//www.instagram.com/embed.js"></script>', '');
                        document.getElementById("ig-posts").innerHTML += html;
                        }
                    };

                    xhttp.open("GET", "https://api.instagram.com/oembed/?url=http://instagr.am/p/" + response.data[i].shortcode + "/", true);
                    xhttp.send();
                    }
                }
                );
            }

            }
        );
        } else {
        console.log("Error recovering access token: Not connected.")
        console.log(response)
        }
    });
};

Все это прекрасно работает на моем компьютере с сервером NodeJS, я могу поставить и заменить динамический текст, изображения и социальные сети. Но когда я запускаю его на своем Raspberry PI3 (также с сервером NodeJS), лента Instagram не будет отображаться, если в HTML-файле будет динамическое изображение . Чтобы было ясно, я не могу сделать это: 

<div id="ig-posts" style="width: 350px; height: 500px; float: left; overflow: auto">
    <div data-signagetec-rrss="instagram"></div>
</div>

<img src="" data-dynamic-id="image1" />

Если я это сделаю, изображение отобразится, но Instagram / Graph API вернет ошибку разрешений:

Ошибка восстановления «instagram_business_account»: (# 10) Для использования «Страница Публичный доступ к контенту », ваше использование этой конечной точки должно быть пересмотрено и одобрено фейсбуком. Чтобы отправить «Доступ к общедоступному контенту страницы» функция для просмотра, пожалуйста, прочитайте нашу документацию на рецензируемую Особенности: https://developers.facebook.com/docs/apps/review.

Когда я удаляю любое динамическое изображение , оно вообще не жалуется, поэтому я предполагаю, что между моим пользовательским jQuery и Instagram 1010 * есть что-то, что оно вылетает.

...