Instagramの投稿・タイムラインの埋め込み方法5つ
Instagramをブログに埋め込みたい！
Instagramをやっていて、自身でブログやホームページも運営している場合に、「自分のインスタをブログに連携させて表示させたいなぁ」なんて考える人も多いかと思います。
インスタの投稿記事に使われる画像は加工処理もされてキレイですし、こういったものがサイト内に埋め込まれていると、サイト自体も華やかになり見栄えも良くなります（華やかな写真を載せていればの話ですがw）。インスタを更新することでサイト内に埋め込まれた写真も更新されれば、それだけで情報にもタイムリー感が出ますしね。
よーし、インスタと自分のサイトを連動させるぞ！
まずはインスタグラムから埋め込みコードを取得、ブログ記事の中に設置。
準備万端、これでどうだ！！
ってやってみると、裏切られます。
View this post on Instagram
たしかに埋め込んだ。
埋め込んだけど・・・・
うん、求めているのはコレジャナイ。
たしかにインスタを埋め込めたものの、これではタイムラインではなく、投稿単体だけ。しかも最新の投稿ではなく、埋め込みコードを取得した投稿だけの表示になります。
違う！こういうのじゃなくて、最新の投稿5件ぐらいを、なんていうかー、ブロック上（グリッド状）に並べて表示させたいのですよ！ほしいのは投稿埋め込みじゃなくてタイムライン埋め込みなんですぅ！！
↑こういう感じにしたい
そう、大抵の人がやりたいのは「自分が投稿したインスタ投稿のタイムラインを表示させること」だと思います。
しかし、インスタから発行される埋め込みコードは、その投稿単体を埋め込むだけの機能でしかないんですよねー。2018年現在の仕様では、インスタグラムからはタイムライン埋め込みコードというのは取得できません。
じゃあ、インスタのタイムラインの埋め込みは不可能なのかというと、
そうではありません！
タイムライン埋め込みはちゃんとできます！
どどーん。
タイムラインがしっかりと埋め込まれ、最新の投稿が表示されています。さらにスライダーでページ送りが可能。画像をタップ（もしくはクリック）するとライトボックスにて投稿の内容が確認できます。
まさしくコレが理想のタイムライン埋め込み像。
これで満足だぜっ！
Instagramのタイムラインを埋め込む方法
さて、本題。
今回はInstagramのタイムラインの埋め込み方法の解説でーす。
インスタの投稿内容をほかのサイトで表示させるにはいろんな方法があります。
使用できる環境、表示のされ方などはそれぞれの方法で様々ですので、この中から自分に適したやり方を見つけてくださいねー！
１．Instagramから発行される埋め込みコードを使う方法
View this post on Instagram
さきほど一番最初に紹介した方法ですね。投稿単体のみを埋め込むことができます。
ちなみに埋め込みコードはパソコンでインスタを見ているときしか取得できない模様。パソコンでインスタにアクセスして掲載したい投稿のページに移動すると、右下に「…」マークが出てるのでこれをクリックすると「埋め込み」という項目があります。ここから埋め込みコードを取得して自分のサイトに埋め込めばOK。
特徴：
・投稿単体を指定して埋め込める
・自分以外のアカウントの投稿でも埋め込み可能
・コードを埋め込むだけなので簡単
・でもなぜかコードがスマホからは取得できない
・サイズ変更が面倒（コード内のmaxwidthの数値を直接編集する必要がある）
・デザイン変更ができない（知識があればできるが複雑なので非推奨）
２．既存SNSやブログと連携する
こちらは埋め込みではなく、連携というイメージですね。Instagramの投稿をFacebookやTwitter、アメブロなどに紐付けて自動投稿をするというもの。
杏さゆりさんのブログが、まさにそうですね。インスタの投稿をそのままブログ記事として自動で表示する設定を行っています。
やり方は簡単で、インスタの自分のページに移動して左にフリックすると「設定」というアイコンが出てきます。その中に「リンク済みアカウント」という項目があるので、そこから連動したいSNSの設定を行いましょう。
ただし、Instagramの「画像と無数のハッシュタグのみ」という投稿形式は非常に独特で、ほかのSNSやブログにそのままの内容が連動して掲載されるのは良し悪しがあります。使い方によってはお客さんから見た可読性も悪くなるので、うまく考慮して使っていきましょう。
特徴：
・埋め込みというよりは連動で、インスタで投稿した記事をそのまま他のSNSでも投稿するもの
・設定は各SNSごとに行う
・いつのまにか連動切れることが多いらしいので定期的にチェックしたほうがいい
３．外部ツール「InstaWiget」を利用する
※2019年8月6日追記 InstagramのAPI仕様変更により現在表示がされなくなっているようです。InstaWiget開発者がこれに対応する予定があるかどうかは不明です。→直ったっぽいけど、いつまた使えなくなるかは不明
こちらはプロフィールとタイムラインを同時に埋め込める方法です。
無料で提供されている外部ツール「InstaWiget」を使用します。InstaWigetのサイトにアクセスし、必要情報を入力してレイアウト設定を行うと埋め込みコードが発行されるので、これを自身のサイトに埋め込んで使います。アカウントを作らなくても利用できるので楽チン！無駄に広告なども入りません！
操作が直観的でわかりやすく、デザインの幅が広いのがメリット。タグを埋め込むだけなのでほとんどのブログやホームページに埋め込めることも大きいですね。プロフィール部分を非表示にすればタイムラインのみというデザインを作ることもできます。
特徴：
・プロフィールとタイムラインの表示が可能で、それぞれ非表示にもできる
・サイズ変更、レイアウト変更が簡単に設定できる
・外部ツールだけど利用するためにアカウントを作る必要がないし、広告も出ない
・自分以外のアカウントも設定可能
・ハッシュタグでの設定も可能
・スライダー機能はない
・画像クリックでインスタの投稿ページに一気にジャンプする（LightBox風にはできない）
・同じページ内でInstaWigetで作ったコードを2つ埋め込むとバグる
４．プラグイン「InstaShow Lite」を利用する
WordPressのプラグインを利用して埋め込む方法です。WordPressサイトに埋め込む＆タイムライン埋め込みがやりたいのであれば、個人的にはこれが一番オススメです。スライダー表示とLightBox形式での表示はタイムライン埋め込みとしては一番しっくりきます。
↑プラグインはこれ。ダウンロードして有効化しましょう。先に同じブラウザでインスタグラムにログインしておくと設定が楽にできます。
無料で使用する場合設定できる項目がかなり制限されていますが、正直言ってデフォルトのデザインで十分です。標準でレスポンシブ対応ですし、列と行の数、スライダーの早さや自動ON・OFFなどは選べるので問題なし。
特徴：
・タイムラインのみの埋め込み
・自分のアカウントの全投稿のみが対象（有償版であればハッシュタグごとの設定も可能）
・WordPressサイトでしか使えない
・有償版であれば多機能だが、無償版で十分
５．APIを使って自由に設定
InstagramのAPIを利用して自身の手で自在に設定を行う方法です。無制限にデザインや仕様を作ることができるので何でもできてしまうのが一番のメリットですが、はっきり言って超難易度です。「APIって何～？？」ってレベルの人は手を出さないほうがよいでしょう。また2020年にAPI廃止予定となっているので、それ以降は使用不可能になると思われます。
いちおう参考リンクは貼っておきますので興味ある方のみドウゾー。
→Instagram API を使ってインスタグラムの画像をサイトに表示させる
まとめ
いかがだったでしょうかー。
タイムライン埋め込みであれば、WordPressの人は４、それ以外の人は３のやり方がオススメです。
あなたのサイトにもインスタを埋め込んで、おしゃれ感の演出を楽しんでみてくださいまし！
