InstagramのAPIを使ってタイムラインを作る方法を解説

今回は自分のサイトにInstagramからAPIを取得し、サイトに埋め込む方法を紹介します。

最新の投稿から写真を取得し、タイル状に並べるという感じでやってみます。

 

SnapWidgetを使う

SnapWidgetとは自分のサイトにinstagram、Twitter、Facebookの写真を表示するためのウィジェットを作成する外部ツールです。

これを使ってウィジェットをサクッと作ってしまいましょう。

SnapWidgetは以下のページから導入します。

Snapwidget

 

APIを取得する

Instagram DeveloperからAPIを取得します。

instagramは他人の投稿一覧を表示する場合は審査などが必要になりますが、自分の投稿なら審査などはありません。

詳しい取得方法はInstagramのAPIを使ってアクセストークンを取得する方法を参考にしてください。

 

投稿を表示する

表示するコードは以下のような感じになります。

本当に必要最低限のコードしか書いていないので、他にも変更したい箇所があると後述する取得する側のコードをいじる必要があります。

        <div class="inst">
            <div class="inst_wrap">
                <div class="inst_container">
                <?php 
                    get_instagram();
                 ?>
                </div>
            </div>
        </div><!-- インスタ -->

 

インスタ関連の処理は全てget_instagram()で行なっています。

 

取得する側のコード

InstagramのAPIを使って投稿を取得しているコードです。

<?php
function get_instagram(){
    $option = [
        CURLOPT_RETURNTRANSFER => true, //文字列として返すかどうか
        CURLOPT_TIMEOUT        => 3, // タイムアウト時間
    ];

    $myAccessToken = '[取ってきたアクセストークン]';
    $count = 9; //表示件数
    $url = 'https://api.instagram.com/v1/users/self/media/recent/?access_token='.$myAccessToken."&count=".$count;


    $ch = curl_init($url);
    curl_setopt_array($ch, $option);

    $json    = curl_exec($ch);
    $info    = curl_getinfo($ch);
    $errorNo = curl_errno($ch);

    if ($errorNo !== CURLE_OK) {
        // 詳しくエラーハンドリングしたい場合はerrorNoで確認
        // タイムアウトの場合はCURLE_OPERATION_TIMEDOUT
        return [];
    }

    // 200以外のステータスコードは失敗とみなし空配列を返す
    if ($info['http_code'] !== 200) {
        return [];
    }

    //取ってきた内容を読み込んで、取得した件数分まわす
    $obj = json_decode($json);
    foreach($obj->data as $data){
        print('<div class="inst_list_item">');
        print('<div class="inst_thumb_wrap">');
        print('<div class="inst_thumb">');
        printf('<a href="%s" target="_blank">',$data->link);
        printf('<img src="%s" alt="">',$data->images->low_resolution->url);
        print('</a>');
        print('</div>');
        print('</div>');
        print('<div class="inst_comment">');
        printf('<p><i class="fa fa-heart" aria-hidden="true"></i>いいね %d</p>',$data->likes->count);
        print('</div>');
        print('</div>');
    };
}//インスタ取得終了

 

CSS

ついでにCSSも書いておきます。

タイル状に表示したいので、フレックスボックスを使ったスタイルにしました。

.inst_wrap{
    background: #fff;
    width: 300px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #d5d5d5;
}
.inst_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5% 0;
}
.inst_list_item{
    width: 30%;
    margin: 1px;
    border: 1px solid #f1f1f1;
}
.inst_thumb img{
    width: 100%;
    height: 90px;
    object-fit: cover;
    object-position: 0% 0%;
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.inst_thumb:hover img{
    opacity: .5;
}
.inst_comment{
    font-size: 12px;
    padding: 5%;
}

 

コードの解説

自分の投稿データを取得

自分が投稿した写真や日付、いいね数などのデータを取得している部分は以下の部分です。

$myAccessToken = '[アクセストークン]';
$count = 9;
$json = file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token='.$myAccessToken."&count=".$count);

 

アクセストークンを取得することで自分の投稿した画像に関する情報を色々取得できます。

$countには表示件数を指定します。今回は画像を9個表示するので9を指定します。なお、投稿は一番新しいものから取得されます。

$jsonに取得したデータが入ります。名前の通りjsonファイルになっています。

 

ただし、このままだとよろしくないので、json_decodeでデコードして配列で取得できるようにします。

$obj = json_decode($json);

 

投稿内容を表示

投稿内容はforeachで表示します。

foreach($obj->data as $data){
    //処理する内容
}

 

リンクは$data->linkで取得しています。

<a href="<?php echo $data->link; ?>" target="_blank"></a>

 

画像のurlは$data->images->low_resolution->url;で取得しています。

<img src="<?php echo $data->images->low_resolution->url; ?>" alt="">

 

いいね数の取得は$data->likes->count;で取得してます。

ついでにアイコンも表示しておきます。

<p><i class="fa fa-heart" aria-hidden="true"></i>いいね <?php echo $data->likes->count; ?></p>

 

他にも取得できるパラメーターがたくさんあるので、詳しくは以下の記事を参考にしてください。

Instagram API から投稿画像を取得しスライダー/カルーセル表示

 

最後にprintを連発して表示するタグを記述します。タグは自分の好きなように書いても問題ありません。