<div class="container">
    <div class="ig_info">
        <div class="ig_sticker"><img src="https://api.fnkr.net/testimg/80x80/e1306c/FFF/?text=sticker"></div>
        <div class="ig_name">
            <div class="ig_title">lovelutsdoll</div>
            <div class="ig_ff">
                <span class="ig_fans"></span> 位追蹤者<br />
                <span class="ig_follow"></span> 追蹤中
            </div>
        </div>
        <div class="ig_button">
            <a href="" title="追蹤我" class="ig_button_a" target="_blank" rel="noreferrer noopener"><i class="fab fa-instagram"></i> 追蹤我</a>
        </div>
    </div>
    <div class="ig_photo">
    </div>
    <div style="line-height: 0;"><img src="https://api.fnkr.net/testimg/1x1/FFF/FFF/"></div>
</div>
body{
    background-color: #444;
}
.container{
    margin-top: 20px;
    border-radius: 5px;
    background-color: #FFF;
    max-width: 336px;
    padding: 10px;
}
.ig_info{
    position: relative;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
    left: 0;
    right: 0;
}
.ig_info > div{
    display: inline-block;
}
.ig_sticker{
    width: 80px;
    height: 80px;
    background-color: #FA0;
    border-radius: 50%;
    overflow: hidden;
    margin-top: 10px;
    margin-left: 10px;
    border: 1px solid #CCC;
}
.ig_sticker img{
    width: 80px;
    height: 80px;
}
.ig_name{
    width: calc(100% - 200px);
    padding-left: 10px;
}
.ig_name .ig_title{
    font-size: 20px;
}
.ig_name .ig_ff{
    color: #959ca2;
    font-size: 12px;
}
.ig_button{
    position: relative;
}
.ig_button a{
    position: relative;
    bottom: 10px;
    display: block;
    padding: 0 10px;
    text-align: center;
    color: #FFF;
    background-color: #e1306c;
    border: 1px solid #e1306c;
    border-radius: 3px;
    font-size: 14px;
    opacity: 1;
    transition: opacity .1s;
    text-decoration: none;
}
.ig_button a:hover{
    opacity: .85;
}
.ig_photo{
    position: relative;
    left: 2px;
}
.ig_photo > div{
    float: left;
    width: calc(33.333333% - 2px);
    padding: 1px;
}
.ig_photo>div a {
    display: block;
    opacity: 1;
    transition: opacity .1s;
    line-height: 0;
    position: relative;
}
.ig_photo > div a:hover{
    opacity: .85;
}
.ig_photo > div img{
    width: 100%;
}
.ig_photo .ig_heart{
    position: absolute;
    width: auto;
    height: 100%;
    background-color: #000;
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #FFF;
    opacity: 0;
    z-index: 1;
}
.ig_photo > div a:hover .ig_heart{
    opacity: .3;
}
.ig_photo .ig_heart_num{
    position: absolute;
    width: auto;
    height: 14px;
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #FFF;
    opacity: 0;
    z-index: 1;
    display: none;
}
.ig_photo > div a:hover .ig_heart_num{
    opacity: 1;
    display: block;
}
var instagramID = "lovelutsdoll";
var instagramPage = "https://www.instagram.com/" + instagramID
var instagramUrl = "https://www.instagram.com/" + instagramID + "/?__a=1";
console.log(instagramUrl)
$.ajax({
  url: instagramUrl,
  type: 'get',
  dataType: 'json',
  success: function (data) {
    // 大頭貼
    var igSticker = data.graphql.user.profile_pic_url;
    $('.ig_sticker > img').attr('src', igSticker);
    // 名稱
    $('.ig_title').text(data.graphql.user.username);
    // 追蹤
    $('.ig_fans').text(data.graphql.user.edge_followed_by.count);
    $('.ig_follow').text(data.graphql.user.edge_follow.count);
    $('.ig_button_a').attr("href",instagramPage);
    // 照片
    var igPhotoNum = 12;
    var igPhotoUrl = "https://www.instagram.com/p/"
    var htmlStr = '';
    for (i = 0; i < igPhotoNum; i++) {
        htmlStr += `
            <div><a href="${igPhotoUrl + data.graphql.user.edge_owner_to_timeline_media.edges[i].node.shortcode}" target="_blank" rel="noreferrer noopener"><div class="ig_heart"></div><div class="ig_heart_num"><i class="fas fa-heart"> ${data.graphql.user.edge_owner_to_timeline_media.edges[i].node.edge_liked_by.count}</i> <i class="fas fa-comment"> ${data.graphql.user.edge_owner_to_timeline_media.edges[i].node.edge_media_to_comment.count}</i></div><img src="${data.graphql.user.edge_owner_to_timeline_media.edges[i].node.thumbnail_resources[0].src}"></a></div>
        `
    }
    $('.ig_photo').append(htmlStr);
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://use.fontawesome.com/releases/v5.7.2/css/all.css

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js