调用您的ins图片展示在任意网站上

in 前端 with 0 comment

ins作为全球最大的图片社交软件,在被收购后,社交属性也越发的凸显,因为的原因,不借助的话是无法访问的,但依然阻挡不住国人玩inst。⭐️ 🌟 ✨ ⚡️ 🔥 💥

ins官方虽然有开发者中心,但并不像twitter、Facebook、weibo等提供现成的名片iframe,以下介绍借助 pixelunion 简单两步实现调用instagram的图片到您的网站,当发布最新的图片或视频时,也会自动同步更新,时刻保持您的最新状态;

登录网页版instagram

点击这里登录instagram

生成token

点击这里前往生成token

QQ20170208140441.jpg
QQ20170208140549.jpg

Javascript

$(document).ready(function () {
    var token = ""; //这里填写第二步获取的token
    num_photos = 9; //调用图片数量
    $.ajax({
        url: 'https://api.instagram.com/v1/users/self/media/recent',
        dataType: 'jsonp',
        type: 'GET',
        data: {
            access_token: token,
            count: num_photos
        },
        success: function (data) {
            console.log(data);
            for (x in data.data) {
                $('ul').append('<li><a target="_blank" href="' + data.data[x].link + '"><img src="' + data.data[x].images
                    .low_resolution.url + '"></a></li>'); //此处根据您的需要自定义
            }
        },
        error: function (data) {
            console.log(data);
        }
    });
});

HTML

<div style="width: 300px;height: 300px; margin: 100px auto;">
    <!--display instagram photos-->
    <ul id="vbaInstaFeed"></ul>
    <!--#END# display instagram photos-->
</div>

CSS

#vbaInstaFeed {
    list-style:none;
    width: 300px;
}
#vbaInstaFeed li {
    float:left;
    width:70px;
    height:70px;
    margin:3px
}
#vbaInstaFeed li img {
    max-width:100%;
    max-height:100%;
}

HTML 、CSS可根据自身网站需求修改

最终效果

演示效果

发表新评论