お知らせ・ブログ

HOME > お知らせ・ブログ > WEBクリエイターブログ > ウェブサイトに Javascript でインスタグラムの写真を表示させてみよう!その1

CREATORWEBクリエイターブログ

ウェブサイトに Javascript でインスタグラムの写真を表示させてみよう!その1

みなさん、こんにちは。
コーディング担当の よっしーさん です。

 

みなさん、インスタグラムやってますか?

 

素敵な写真がアップされていて、ついつい見入ってしまうインスタグラムですが、
制作したサイトに Javascript を使って表示させる機会があったので、備忘録を兼ねて

インスタグラムにアップロードした写真の一覧を表示させる方法

をご紹介したいと思います。

 

WEBクリエイターブログ:吉田:20170220-1

 

1. 利用者登録

まず、Instagram Developer Documentation へ行き、利用者登録をします。

WEBクリエイターブログ:吉田:20170220-2

  1. 右上にある「ログイン」から、アカウント情報を入力してログインします。
  2. ログインすると「Developer Signup」のページへ進みます。
  3. 「ウェブサイト」「電話番号」「使用目的」を入力します。
  4. 「利用規約に同意」をチェックします。
  5. 「Sign up」のボタンを押して登録します。

 

2. アプリケーション登録

WEBクリエイターブログ:吉田:20170220-3

「Register Your Application」ボタンから、「Manage Clients」ページへ行き、登録するアプリケーションの情報を入力します。

WEBクリエイターブログ:吉田:20170220-4

  1. 右上にある緑色のボタン「Register a New Client」を押して次へ進みます。
  2. 「Register new Client ID」ページへ進むので、入力欄に必要事項を入力していきます。

WEBクリエイターブログ:吉田:20170220-5

Application Name わかりやすいアプリケーション名を入力します。日本語でOKです。
Description アプリケーションの概要を入力します。日本語でOKです。
Company Name 会社名を入力します。任意項目ですので入力しなくてもOKです。
Website URL アプリケーションを使用するサイトのアドレスを入力します。
Valid redirect URIs 認証用のPHPコードを記述するファイルのアドレスを入力します。
Privacy Policy URL プライバシーポリシーページのアドレスを入力します。任意項目ですので入力しなくてもOKです。
Contact email 連絡先のメールアドレスを入力します。任意項目ですので入力しなくてもOKです。

 

以上を入力したら画像認証の文字を入力し、左下にある緑色のボタン「Register」を押して登録完了です。

WEBクリエイターブログ:吉田:20170220-6

 

ということで、次週は!!

今回登録した情報を使って、サイトにインスタグラムの写真一覧を表示させるコードをご紹介します。

 

追記:この記事の続きを書きました。

ウェブサイトに Javascript でインスタグラムの写真を表示させてみよう!その2

カレンダー
2017年3月
« 2月    
 1234
567891011
12131415161718
19202122232425
262728293031  
最近の投稿
お問い合せ TEL:0276-60-5440(受付時間:10:00~LAST)/メールのお問い合せはこちら(受付時間:24時間) メールでのお問い合せはこちら

【打ち合わせ等で出張可能な地域】

群馬県

栃木県

埼玉県

茨城県

日本全国どこでも受注可能です。

※上記以外の地域でも、案件の内容によっては出張打ち合わせが可能な場合もあります。お気軽にご相談ください。

ホームページ制作 WEBシステム開発 株式会社ディーアイシー 携帯サイト

お問い合せ

お電話:0276-60-5440

メール:お問い合せフォームはこちら

メールでのお問い合せはこちら