ホームページにInstagramの写真を表示させる方法

インスタの写真を自分のホームページに、もしくは他の誰かのホームページに埋め込みたい時ってよくあると思います。その方法を以下に解説をしていきます。

作業の流れとしましては、

  1. Instagram APIの登録
  2. Instagram APIを使って自分のホームページに写真を埋め込む

となります。2番目のホームページへの埋め込みにはJavascriptとJQueryを使いますので、JavascriptとJQueryを知っている前提で話を進めてまいります。

Instagram APIの登録方法

※PCで操作をおこなう場合について解説いたします。

(1-1)事前にInstagramのアカウントを作成し、写真を何枚か投稿します(10枚程度)。インスタのアカウントの作成については、インスタグラムのサイトからお願いいたします。

(1-2)instagramの自分のページの一番下にある「API」をクリックします

(1-3)https://www.instagram.com/developer/ のページへ移動したら、画面中央にある「Register Your Application」をクリックします。

(1-4)表示されたページにある「Manage Clients」でRegister a New Client」ボタンをクリックします。

(1-5)「Register a New Client ID」ページが表示されるので、アプリケーション情報を登録します。
「Details」(※内容は記入例です)

Application Name:アプリケーションの名前をつけます。(必須:好きな名前をつけてください)
Description:アプリケーションの説明です。(必須:何か適当に書きます)
Company Name:会社名(任意)
Website URL:WEBサイトのURL(必須:インスタの写真を表示させたいホームページアドレス)
Valid redirect URIs:認証時のリダイレクトURL(必須:Website URLと同じで構いません)
Privacy Policy URL:個人情報保護方針のURL(任意)
Contact email:連絡先メールアドレス(必須)

Valid redirect URIsは、ホームページでインスタグラムの写真を表示する際に必要になりますので、この時にメモをしておいてください。

入力したら下の方にある「Register」ボタンをクリックします。

(1-6)次画面「Manage Clients」のページが表示されたら、「Client ID」をメモしておいてください。

(1-7)右上にある「MANAGE」で先ほどのRegister a New Client IDページに戻り

「security」タブを開きます。

Disable implicit OAuth:」のチェックを外し「Register」をクリックします。

インスタグラムAPIの登録はこれで終わりです。次に登録したアプリを使ってホームページにインスタの写真を表示させる方法についてを解説します。

Instagram APIを使って自分のホームページに写真を埋め込む方法

InstagramのユーザーIDとアクセストークンを取得します。

(2-1)その取得方法は、以下のURL(画面上は途中で改行されて見えますが、一行で作ってください。途中スペースも含みません)を作成します。

https://instagram.com/oauth/authorize/?client_id=CLIENT ID&redirect_uri=リダイレクトURL&response_type=token

 

上記のURLのCLIENT ID」は、(1-6)でメモをした、以下の画像の赤枠部分の文字列を入力します。

リダイレクトURL」は、(1-5)でメモをした、以下の画像の赤枠部分の文字列を入力します。

(2-2)入力したURLをブラウザにコピー&ペーストしてページにアクセスします。

この画面が表示されるので、「Authorize」をクリックすると

リダイレクトURLで入力したページが表示されます。
アドレスバーのURLが上記のようになっていますので、コピーをします。

コピーしたもの→
https://www.shirokuma-systems.com/#access_token=6536930692.g020s06.k42759ghr6p18173gx0mt1t736b1n6a7

#access_token= 以降の赤い英数字がアクセストークンになります。

#access_token= の最初の . までがユーザーIDになります。(上記の例では「6536930692」)

#access_token= の最初の . から後ろがクライアントIDになります。

「アクセストークン」「ユーザーID」「クライアントID」は、ホームページでInstagramを表示させるために必要なので、メモをしておきます。

表示させたいページでJavascriptを記述する

(2-3)Instafeed.jsをダウンロードして読みこませます。(Instafeed.jsのダウンロードと詳しい使い方は以下のサイトから)当然ですが、先にJQueryは読み込ませておきます。

(2-4)Javascriptコードを記述します。

<script>
	var feed = new Instafeed({
		clientId: 'g020s06.k42759ghr6p18173gx0mt1t736b1n6a7',
		get: 'user',
		userId: '6536930692',
		accessToken:'6536930692.g020s06.k42759ghr6p18173gx0mt1t736b1n6a7',
		links: true,
		limit: 10,
		resolution:'thumbnail',
		template: '<a href="{{link}}"><img src={{image}} alt={{caption}} /></a>'
	});
	feed.run();
</script>

3行目、clientId:の後に「クライアントID」を入れます。

5行目、userId:の後に「ユーザーID」を入れます。

6行目、accessToken:の後に「アクセストークン」を入れます。

8行目、limit:の後に表示させる画像枚数を入れます。

9行目、resolution:の後に画像サイズを指定します。指定方法は、
thumbnail(150×150)
low_resolution(306×306)
standard_resolution(612×612)の三種類。

10行目、template: 以下に表示させるコードを書きます。使えるタグは、
画像URL → {{image}}
リンク → {{link}}
キャプションテキスト → {{caption}}
いいね数 → {{likes}}
コメント数 → {{comments}}

あとはインスタを埋め込みたい場所に、<div id="instafeed"></div>を書けばOKです。

Posted in SNS