Instagram API / Flickity Carousel

问题描述 投票:0回答:1

[尝试将其集成到网站上:https://github.com/mangcoding/instagram-feeder我对API的了解还不足以使其能够用于用户名而不是标签。我认为这可能与这一行有关:let instaData = data.edge_hashtag_to_media.edges;

任何人都知道我能完成什么,谢谢!

<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>
api instagram flickity
1个回答
0
投票

想通了:

让instaData = data.edge_owner_to_timeline_media.edges;与让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>
© www.soinside.com 2019 - 2024. All rights reserved.