あなたのキモチ つなげるカタチ

TOP > ツール > Instagramのタイムライン埋め込み方法について

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

スポンサーリンク

この記事は2016年6月27日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

最近、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パターンのデモページを用意しましたので参考までにどうぞ。

スポンサーリンク