Each API needs registration before you can use its features. Please note, for showing images under a specific hashtag, we need any authentication connecting to Instagram API for anyone getting the Instagram post. We do need client ID and client secret keys which we will get once we will register an app on Instagram API platform.
So our first step will be to register an app on Instagram API page https://instagram.com/developer/ and click on “Register Your Application” button.
The second step we need an access token for getting Instagram posts.
In our last post, we have seen how to generate access token from Instagram API :
The last step is to get recent Instagram posts.
PHP Code:
function GetPost($accessToken) {
$url = 'https://api.instagram.com/v1/users/self/media/recent?access_token=' . $accessToken;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data = json_decode(curl_exec($ch), true);
curl_close($ch);
return $data;
}
$result = GetPost('ACCESS-TOKEN-XXXXXXXXXXXXXXXXXX');
CSS Code:
.wraper{
width: 80%;
margin: auto
}
.profile{
float: left;
}
.profile img{
border-radius: 50%;
}
.userDetail{
float: left;
margin-left: 6%;
padding-top: 7%;
}
.header{
clear: both;
display: flow-root;
width: 50%;
margin: 0 auto 20px;
}
.post{
clear: both;
width: 100%;
}
.post-img img{
width: 100%;
height: 250px;
}
.post-img{
width: 32%;
margin-right: 10px;
display: inline-block;
margin-bottom: 10px;
position: relative
}
.caption{
display: none;
position: absolute;
background-color:rgba(0,0,0,0.5);
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
margin: auto;
right: 0;
bottom: 0;
}
.post-img:hover .caption{
display: block
}
.caption label{
color: #fff;
position: absolute;
width: 100%;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
text-align: center;
height: 0;
font-weight: bold;
}
HTML Code:
<div class="wraper">
<div class="header">
<div class="profile">
<img src="<?php echo $result['data'][0]['user']['profile_picture']; ?>">
</div>
<div class="userDetail">
<h3><?php echo $result['data'][0]['user']['username']; ?></h3>
</div>
</div>
<div class="post">
<?php foreach ($result['data'] as $row) { ?>
<div class="post-img">
<img src="<?php echo $row['images']['standard_resolution']['url']; ?>">
<div class="caption">
<label>Comments(<?php echo $row['comments']['count'] ?>) - Likes(<?php echo $row['likes']['count'] ?>)</label>
</div>
</div>
<?php } ?>
</div>
</div>