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