閉じる

Instagramのアクセストークン、APIを利用した画像表示と画像のホームページ埋め込み

ホームページの中にInstagramの写真を表示したい場合、埋め込みとaccess token、APIを利用したやり方があります。

Instagramの埋め込み

写真を1つづつ埋め込むのは簡単です。

埋め込み機能

「ログインすると「いいね!」やコメントができます。」の右横にある「・・・」をクリックし、

埋め込みを選択

埋め込みを選択します。

埋め込みコード

すると、埋め込みコードが表示されます。、

あとは、コードをコピーして、HTML内に貼り付けるだけです。

以下に、個人的にも好きな渡辺直美さんの写真を埋め込んでみました。

 

キャプションとは

埋め込みコードのところに、キャプションを追加のチェックがありますが、このチェックをはずすと、キャプションが除かれます。

インスタグラムでいう、キャプションとは、写真の説明文とハッシュタグ(#とキーワード)です。

キャプションがある埋め込みをしたのが下記です。

説明文とハッシュタグが表示されていますね。

写真は埋め込む必要がない場合も多いと思います

インスタグラムのアクセストークン取得、APIを利用した連携

1枚づつの埋め込みではなく、インスタグラムの最新写真をホームページに表示する場合、access token(アクセストークン)を取得しInstagram APIの連携が必要です。

※APIは仕様変更がたびたびあります。バージョンアップの際には、その内容を確認しましょう。

それでは、登録とaccess tokenの取得、表示までのの流れを説明します。

開発者ページにアクセスする(Developersページ)

まず、Instagramにログインした状態で、開発者ページにアクセスします。

開発者ページ(Instagram Developer Documentation)

Manage Clients

Register Your Applicationをクリックします。

新規の場合は、上部のManage Clientsで登録します。

Register Your Applicationクリック後は、利用目的、URL、電話番号を記載して登録します。

次に Register a New Clientをクリックして、新しいアプリ、ID登録を行います。

Register a New Clientの入力

Detailsタブの入力

[Application Name][Description]、[Website URL]と[Valid redirect URI]を入力します。

現時点で、プライバシーポリシーURL、Emailなどは不要ですが、アラートが表示されるようでしたら、その内容を確認しましょう。

Securityタブの入力

Security

「Security」タブでは「Disable implicit OAuth」のチェックを外したら、

一番下の「Register」をクリックします。

[Website URL]と[Valid redirect URI]は通常同じだと思いますが、
もし、違う場合は、[Valid redirect URI]は、Instagramの写真を表示するサイトのURLを入力します。

登録されると、

CLIENT ID
REDIRECT URI
が表示されるので、エディタなどにコピーします。

URLにアクセスする

まず、下記のURLをコピーします。

https://instagram.com/oauth/authorize/?client_id=CLIENT ID&redirect_uri=REDIRECT URI&response_type=token

このURLの中のCLIENT ID(client_id=の後ろ)REDIRECT URIの部分に

先ほど、コピーをした、CLIENT IDREDIRECT URIをコピペし、そのURLにアクセスします。

例、CLIENT IDがaaa、REDIRECT URIがhttp://www.bbbbbbb.net/の場合は、

https://instagram.com/oauth/authorize/?client_id=aaa&redirect_uri=http://www.bbbbbbb.net/&response_type=token

です。

うまくいくと、認証画面が表示されます。

Authorize

下の「Authorize」をクリックします。

REDIRECT URIで設定したURLに変わります。#access_token=の後ろに表示されるのがアクセストークンです。

#access_token=<アクセストークン>

プログラムでインスタグラムの写真を吐き出し場合に必要ですのでコピーしましょう。

WordPressを使用する場合、WPプラグイン「Instagram Feed」を使用するともっと簡単に設定できます。

Instagramのアクセストークン、APIの取得も管理画面で設定できますのでWordpressで配置する場合は、このプラグインを使用した方が良いでしょう。

関連記事

  1. LineをPCやタブレットで盗み見されないためのセキュリティ設定…

  2. iphone

    LINE着信、通知音が変わらない!AppStore検索できない場…

ピックアップ記事

  1. Classic Editor
  2. Hacking Alert! You account was hacked
  3. サーチコンソール
ページ上部へ戻る