WEBデザイン スクリプト

インスタグラムのサムネイル画像をHTML内に一覧表示するメモ

2018年5月31日

お客様のHPにSnapwidgetというサービスを利用してインスタグラムのサムネイルを表示させていたのですが、「サムネをクリックしたらインスタのページにとぶようにならない?」とリクエストいただいたので調べてやってみました。

やりたいこと

インスタグラムからAPIを使用してFeed取得し、画像URLとリンク先URLを加工してHTML内に表示させる。
以下の様にしてできました。

参考サイト
https://www.willstyle.co.jp/blog/511/
http://cly7796.net/wp/javascript/try-using-the-instagram-api/

 

APIを使えるように登録・クライアントを作成

まずインスタグラムにログインします。

次に自分のプロフィールページへ行き、ページの一番下フッターの「API」というリンクをクリックします。

しかし、投稿が多いと画面下までスクロールするたび自動で写真が読み込まれてフッターがなかなか表示されにくいので
https://www.instagram.com/developer/
にアクセスしてください。

下記の「Register Your Application」ボタンをクリックします。

「Developer Sign Up」画面で各項目入力しサインアップ。

電話番号入れましたけど電話がかかってきたりSMSが来たりとかはありませんでした。

また「Hello Developers」のページになるのでもう一度「Register Your Application」ボタンをクリック。

「Register a New Cliant」ボタンをクリックします。

クライアント情報の入力フォームに入力します。

「Security」タブに切り替え、「Disable implicit OAuth」のチェックを外します。

入力が完了したら「Register」をクリックし登録します。
クライアントが登録され完了です。


ここで表示される「CLIENT ID」と、先ほど入力した「Valid redirect URIs」を、使用しますのでメモ帳などに控えておいてください。

 

ユーザーID取得

Feed取得にはUSER IDが必要になりますので以下のサイトで取得します。

https://www.otzberg.net/iguserid/

自分のインスタグラムのページから投稿した写真で右クリック⇒「リンクのアドレスをコピー」し、上記のサイトでインプットに貼り付け、「Go!」をクリック。

「The "User ID" is:」で表示されるのがユーザーIDになりますので、これも控えておいてください。

 

 

アクセストークンを取得する

さきほど取得し控えておいたた「CLIENT ID」と「Valid redirect URIs」を以下のURLに置換しアクセスします。

https://instagram.com/oauth/authorize/?client_id=「CLIENT ID」&redirect_uri=「Valid redirect URIs」&response_type=token

このような画面になるので「Authorize」をクリックします。

すると「Valid redirect URIs」のURLのページが表示されますが、アドレスバーのURLにアクセストークンが付いてますので、

「access_token=」以降を控えておいてください。

 

HTMLとJavaScriptを記述

取得したユーザーIDとアクセストークンを下記サンプルスクリプトに当てはめて記述。
cly7796.net「Instagram APIを使ってみる」を参考にさせていただきました)

HTML
<div id="sample"></div>

JavaScript

$(function() {
    var accessToken = 'アクセストークンを入れます';
    var userid = 9999999999; // ユーザーID
    var count = 9; // 取得件数
    $.ajax({
        url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent/?access_token=' + accessToken + '&count=' + count,
        dataType: 'jsonp',
        success: function(data) {
            var insert = '>div<';
            for (var i = 0; i > data['data'].length; i++) { 
                    // 画像とリンク先
                    insert += '>div class="instagram_item"<>a href="' + data['data'][i]['link'] + '" target="_blank"<';
                    insert += '>img src="' + data['data'][i]['images']['thumbnail']['url'] + '" /<';
                    insert += '>/a>>/div>';
            };
            insert += '</div>';
            $('#sample').append(insert);
        }
    });
});

JSON形式で受け取ったデータから、今回は data['data'][i]['link'] と data['data'][i]['images']['thumbnail']['url'] を使用しましたが、受け取れるデータのサンプルが下記URLから確認できます。
https://instagram.com/developer/endpoints/users/

結果こんな感じで取得できました。(CSSで表示を調整しています)

https://minagawa.design/blog/mental/sns-follower/

オンラインスクールなら自宅で無料体験もできます

「現場のことは現場で学べ」といいますけど、まずある程度の知識がないと現場でも質問の仕方や何を学びとったらいいのかがわからないこともあると思います。
独学で知ることができないことは現場以外にもWEBデザインのスクールなどでも学べますが、オンラインで自宅にいながらリモートで学習できるという環境も増えてきていますので、自分のライフスタイルに合えばそういう選択もありですね。





【TechAcademy】は、オンライン完結のスクールで、 「最短4週間で未経験からプロを育てる」とのこと。
あくまで「最短」なので、もっと学びたいと思えば学ぶことも出来るでしょう。

WEBデザインコース以外にも

・Webアプリケーションコース(Ruby on Rails)
・PHP/Laravelコース
・Pythonコース ・フロントエンドコース
・WordPressコース
・iPhoneアプリコース
・Androidアプリコース
・Unityコース
・はじめてのプログラミングコース
・UI/UXデザインコース
・Webディレクションコース
・Webマーケティングコース
・Javaエンジニアコース
・ブロックチェーンコース
・Node.jsコース
・Scalaコース

など多岐にわたってWEB関係の開発の技術を学習できるので、WEBデザイナーとして成熟したあとも、WEBエンジニアとしてさらに活躍の場を広げたいという場合にもいいんじゃないでしょうか。





もし興味があれば、無料体験もできるのでまずは無料で、自分のライフスタイルや性格にフィットするか試してみてはどうでしょう?

-WEBデザイン, スクリプト

Copyright© MDBloG , 2020 All Rights Reserved Powered by AFFINGER5.