Instagram API / Flickity Carousel - PullRequest
Новая
       72

Instagram API / Flickity Carousel

0 голосов
/ 24 апреля 2020

Попытка интегрировать это на сайт: https://github.com/mangcoding/instagram-feeder Я недостаточно знаю об API, чтобы заставить его работать для имени пользователя вместо тега. Я думаю, что это может быть связано с этой строкой: let instaData = data.edge_hashtag_to_media.edges;

Кто-нибудь знает, как я могу сделать sh, спасибо! 

<script charset="utf-8">
        (function ($) {
            $(window).on('load', function () {
                var limit = 20;
                $.instagramFeed({
                    'tag': 'data', // want this to be 'username': 'data', 
                    'get_data': true,
                    'callback': function (data) {
                        let instaData = data.edge_hashtag_to_media.edges;
                        instaData.slice(0, limit).filter(x => x.node.edge_media_to_caption.edges.length > 0)
                            .forEach(item => {
                                let node = item.node;
                                let source = $("#instagram-template").html();
                                let template = Handlebars.compile(source);
                                let taken = new Date(node.taken_at_timestamp * 1000)
                                    .toDateString().substr(4);
                                //change format to month date,year
                                let created = taken.slice(0, 6) + ',' + taken.slice(6);
                                let context = {
                                    link: "https://www.instagram.com/p/" + node
                                        .shortcode + "/",
                                    image_url: node.display_url,
                                    countLikes: node.edge_liked_by.count,
                                    caption: node.edge_media_to_caption.edges[0].node
                                        .text,
                                    created: created
                                };
                                let html = template(context);
                                $("#instagramFeed").append(html);
                            });
                        $('#instagramFeed').flickity({
                            cellAlign: 'left',
                            wrapAround: true,
                            pageDots: false,
                            setGallerySize: false,
                            prevNextButtons: true,
                            arrowShape: { "x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25 }
                        });
                    }
                });
            });
        })(jQuery);
    </script>

1 Ответ

0 голосов
/ 25 апреля 2020

Разобрался:

let instaData = data.edge_owner_to_timeline_media.edges;
vs
let instaData = data.edge_hashtag_to_media.edges; 

<script charset="utf-8">
        (function ($) {
            $(window).on('load', function () {
                var limit = 20;
                $.instagramFeed({
                    'username': 'myusername',
                    'get_data': true,
                    'callback': function (data) {
                        let instaData = data.edge_owner_to_timeline_media.edges;
                        instaData.slice(0, limit).filter(x => x.node.edge_media_to_caption.edges.length > 0)
                            .forEach(item => {
                                let node = item.node;
                                let source = $("#instagram-template").html();
                                let template = Handlebars.compile(source);
                                let taken = new Date(node.taken_at_timestamp * 1000)
                                    .toDateString().substr(4);
                                //change format to month date,year
                                let created = taken.slice(0, 6) + ',' + taken.slice(6);
                                let context = {
                                    link: "https://www.instagram.com/p/" + node
                                        .shortcode + "/",
                                    image_url: node.display_url,
                                    countLikes: node.edge_liked_by.count,
                                    caption: node.edge_media_to_caption.edges[0].node
                                        .text,
                                    created: created
                                };
                                let html = template(context);
                                $("#instagramFeed").append(html);
                            });
                        $('#instagramFeed').flickity({
                            cellAlign: 'left',
                            wrapAround: true,
                            pageDots: false,
                            setGallerySize: false,
                            prevNextButtons: true,
                            arrowShape: { "x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25 }
                        });
                    }
                });
            });
        })(jQuery);
    </script>
...