Instagramのタイムライン埋め込み方法について

最近、WEBページ内へ「Instagramのタイムラインを埋め込んで欲しい」という要望をよく聞くになりました。
Facebookのタイムライン埋め込みと同じくらいの依頼頻度でしょうか？
実務ではInstagramのタイムラインを埋め込む為にphp、jsonを利用しています。
英語のページで登録や登録作業を行う必要があり、敷居が高く感じるかもしれませんが、やりかたさえ覚えてしまえばInstagram側の仕様変更でもない限り、そこまで難しい作業ではないと感じます。

Instagramのタイムライン埋込の流れ

下記の5項目を順に進んでいく流れになります。

• 1.アカウント登録
• 2.アプリケーション登録
• 3.アクセストークン取得
• 4.PHPでJSONデータ取得

1～4まで作成ができたら最後にJSファイル作成する必要があります。
詳細はこちらのページを見てください。
タイムライン埋め込みに必要となる情報を全て知ることができます。
ちなみに、facebookのシェアボタンの埋め込みと似ている部分もありますがphpやjsonファイルを作成する必要があるので難易度はこちらのほうが高めです。

Instagramのタイムライン埋込のデモページ

初期状態だと全ての投稿写真が縦に表示されてしまいます。CSSで整えてあげましょう。
下記に初期状態とCSSで調整した2パターンのデモページを用意しましたので参考までにどうぞ。

>> DEMOページ
>> DEMOページ（CSS整形後）

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。