Get Instagram Post from Instagram API Using PHP

Get Instagram Post from Instagram API Using PHP

Jan 27, 2019 / PHP / CodeIgniter /

I have been working with Instagram API to build a social networking website where I used many of its features including showing the public images under a specific #hashtag. The hashtag is a brilliant social media feature, which is already being used in all major social networking websites including Facebook and Twitter. In this post, you will see how we can grab all images from Instagram with a specific hashtag using its API and PHP.

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>

Comments

Mohammad ( Jan 28, 2019 10:23:07 )

Nice tutorial

Would you like to share your thoughts?

Your email address will not be published. Required field are marked*

Copyright 2018. All rights are reserved Significant Techno Web Design & Web Development By Significant Techno