instagram-profil.php

<?php
include "./config/database.php";
include "header.php";
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="text-center fadeInUp animated pt-4">
            <h1><i class="fab fa-instagram"></i> Profil Instagram <i class="fab fa-instagram"></i></h1>
        </div>
    </header>

    <section class="one profil-info">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <img src="" class="profile-pic" style="border-radius:50%;position: relative;top:20px; left:25px; ">
                </div>
                <div class="col-md-9">
                    <h2 class="username" style="font-size: 30px;position: relative;top:15px; left:-10px;"></h2>
                    <br/>
                    <div class="row"style="margin-top:-10px; position: relative;top:15px; left:-10px;">
                        <div class="col-md-4" >
                            <span class="number-of-posts"></span> posts
                        </div>
                        <div class="col-md-4">
                            <span class="followers"></span> followers
                        </div>
                        <div class="col-md-4">
                            <span class="following"></span> following
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px;">
                        <h4 class="name" style="margin-top:10px;position: relative;top:15px; left:5px;"></h4>
                    </div>
                    <div class="row">
                        <h4 class="biography"style="font-size:11px;position: relative;top:15px; left:8px;margin-top:10px;"></h4>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="one profil-photos">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h4>POSTS</h4>
                    <div class="divider"></div>
                    <div class="row posts">
                    </div>    
                </div>
            </div>
        </div>
    </section>

    <section class="one graphics" style="background-color:#efefef;">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h4>Analyses statistiques de <?php echo $_GET['user'];?></h4>
                    <div class="divider"></div>  
                    <div id="chartContainer" style="height: 400px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </section>

<script src="ressources/canvasjs/canvasjs.min.js"></script>

<script type="text/javascript">
function nFormatter(num){
    
    if(num >= 1000000){
        return (num/1000000).toFixed(1).replace(/\.0$/,'') + 'M';
    }
    if(num >= 1000){
        return (num/1000).toFixed(1).replace(/\.0$/,'') + 'K';
    }
    return num;
}
var tab=new Array();
var commentaire=new Array();
var nbInsta;
var userInsta = "<?=$_GET['user'];?>";
$.ajax({
    url:"https://www.instagram.com/<?php echo $_GET['user'];?>?__a=1",
    type:'get',
    dataType: 'json',
    Async : false,
    success:function(response){
    $(".profile-pic").attr('src',response.graphql.user.profile_pic_url);
    $(".name").html(response.graphql.user.full_name);
    $(".biography").html(response.graphql.user.biography);
    $(".username").html(response.graphql.user.username);
    $(".number-of-posts").html(response.graphql.user.edge_owner_to_timeline_media.count);
    $(".followers").html(nFormatter(response.graphql.user.edge_followed_by.count));
    $(".following").html(nFormatter(response.graphql.user.edge_follow.count));
    posts = response.graphql.user.edge_owner_to_timeline_media.edges;
    nbInsta = response.graphql.user.edge_followed_by.count;
    posts_html = '';
    for(var i=0;i<6;i++){
        url = posts[i].node.display_url;
        likes = posts[i].node.edge_liked_by.count;
        tab[i]=posts[i].node.edge_liked_by.count;
        commentaire[i]=posts[i].node.edge_media_to_comment.count;
        comments = posts[i].node.edge_media_to_comment.count;
        posts_html += '<div class="col-md-4 equal-height"><a href="'+url+'" target=_blank><img class="insta-photo" src="'+url+'"></a><div class="row like-comment"><div class="col-md-6"><i class="fas fa-heart"></i> '+nFormatter(likes)+' LIKES</div><div class="col-md-6 text-right"><i class="fas fa-comment-dots"></i> '+nFormatter(comments)+' COMMENTS</div></div></div>';
    }
    $(".posts").html(posts_html);
    var points = [];

    var chart = new CanvasJS.Chart("chartContainer", {
    backgroundColor: "transparent", //Couleur à changer (voir thème de la page)
    animationEnabled: true,
    theme: "theme2",
    title: {
        text: "Nombre de likes sur les 6 derniers posts",
        fontSize: 24,
        fontWeight: "normal",
        horizontalAlign: "center",
    },
    axisY: {
        title : "Likes",
        includeZero:true,
        lineThickness: 2
        
    },
    axisX: {
        title : "Posts (du plus ancien au plus récent )",
        labelAngle: -60,
    },
    data: [{
        type: "spline",
        markerType: "circle",
        color: "#df4e8e",
        dataPoints: points
    }
    ]});

    function addPoints(){
        points.push({y: tab[5],
        label: 'Post 6'});
        points.push({y: tab[4],
        label: 'Post 5'});
        points.push({y: tab[3],
        label: 'Post 4'});
        points.push({y: tab[2],
        label: 'Post 3'});
        points.push({y: tab[1],
        label: 'Post 2'});
        points.push({y: tab[0],
        label: 'Post 1'});
        chart.options.data[0].dataPoints = points;
        chart.render();
    }
    addPoints()
    
    $.ajax({
        type: "POST",
        url: "nb_insta.php",
        data: {
            nbInsta:nbInsta,
            userInsta:userInsta,

        },
        success: function(response)
        {
        }
        });
}
});


</script>



<?php   
include "footer.php"
?>