今や多くの人が毎日チェックしているInstagram。
ブログやホームページにInstagramのフィードを埋め込んだりすると見栄えがグッと上がりますよね。
WordPressを使ってる方はプラグインで簡単に導入できるのですが、
WordPress以外の場合だと意外と面倒。
今回はWordPress以外の場合のInstagram埋め込みをご紹介します。
多くのブログではPHPを使うやり方が紹介されていますが、本記事ではjQueryを用いた方法を紹介します。HTML / CSS /Javascript /jQueryの知識があればOKです。
(Javascriprt/jQueryはかじったことある程度で問題ないです)
- Instagram APIの取得方法について
- jQueryを使用した埋め込み方法について
- CSSを使用した装飾方法について
Instagramの埋め込み
1.SnapWidgetを使う※非推奨
一番簡単な方法はSnapWidgetを使う方法です。
URLなどを入れるだけで簡単に実装できます。
でもデメリットがたくさんあります。
一番のデメリットはリンク先がInstagramではなくSnapWidgetのサイトになってしまうこと。
ということはブログで見つけてもらえてもフォローに繋がりにくいのです。
(課金すればInstagram遷移も可)
僕の場合なぜか動画投稿が全然違う画像に置き換えられたことがあります。
ブログの装飾的な使い方の場合以外はおすすめできません。
2.Instagram Graph APIを使う
さて、ここから本題です。
InstagramではInstagram Graph APIというものが利用できます。
APIとか名前聞くと難しそうですが、簡単に言うとInstagramに投稿した画像とかキャプションとかインサイトとか(いいねの数や閲覧数など)をデータで取得するやり方です。
API取得までの流れ
このやり方では以下の流れが必要です。
(頑張りましょう!)
※今から紹介する流れは完全に理解できていなくても大丈夫です。
- Instagramをビジネスアカウントにする
- アクセストークンを取得する
- jQueryでAPIを使用しウェブサイトに画像データを取得させる
1.2の流れはこのブログが分かりやすかったのでこちらをチェック!
※2020年現在v8.0ですが下記のやり方で問題なく進めることができました。

Facebook デベロッパーツールという難易度高そうなものでアクセストークンを取得してください。
アクセストークンは無期限にしてください。
また、下記の7つが許可されているとOKです。
- pages_show_list
- business_management
- instagram_basic
- instagram_manage_comments
- instagram_manage_insights
- pages_read_engagement
- pages_manage_posts
無期限のアクセストークンが取得できたら、
アクセストークン・ビジネスIDを控えておきましょう。
ソースコードの埋め込み
上記のアクセストークンやビジネスIDを使って実際にwebページに埋め込みましょう。
HTML
<div class="instagram"></div>
※bodyの最下層にjQueryを読み込むのを忘れないようにしてください
jQuery(jsファイル)
$.ajax({
type: 'GET',
url: 'https://graph.facebook.com/v8.0/【InstagramビジネスアカウントID】?fields=name%2Cmedia.limit(【表示したい画像数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Cthumbnail_url%7D&access_token=【アクセストークン】',
dataType: 'json',
success: function(json) {
var ig = json.media.data;
var html = "";
for (var i = 0; i < ig.length; i++) {
var link = ig[i].permalink;
var image
if(!ig[i].thumbnail_url) {
// 動画の場合はこちら
image = ig[i].media_url;}
else {
// 写真の場合はこちら
image = ig[i].thumbnail_url;
}
html += '<div><a href="' + link + '" target="_blank"><img src="' + image + '"></a></div>'
}
$(".instagram").append(html);
}
});
上記のJsファイルのなかで、【InstagramビジネスアカウントID】・【表示したい画像数】・【アクセストークン】は自分のものに変更してください。
この書き方だと、”instagram”のクラスが与えられた空のdivの中に、
Instagramの画像をimg要素として取得します。
もし画像の加工を行いたい場合は、
.instagram img{
//ここに画像の変更に関する記述
}
をcssファイルに追加してください。

特定のものだけ大きさを変える
画像の中で、特定の順番のものだけ大きさを変えるにはCSSのnth-childを使います。
例えば1番目のものを大きくする場合は
.instagram img:nth-child(1){
width:800px;
height:auto //大きさは任意のものに変更してください
}
の記述を入れておきます。
キャプションを取得する
キャプションを取得する場合は、
$.ajax({
type: 'GET',
url: 'https://graph.facebook.com/v8.0/【InstagramビジネスアカウントID】?fields=name%2Cmedia.limit(【表示したい画像数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Cthumbnail_url%7D&access_token=【アクセストークン】' ,
dataType: 'json',
success: function(json) {
var ig = json.media.data;
var html = "";
var caption;
for (var i = 0; i < ig.length; i++) {
var link = ig[i].permalink;
var image;
caption = ig[i].caption;
if(!ig[i].thumbnail_url) {
// 動画の場合はこちら
image = ig[i].media_url;}
else {
// 写真の場合はこちら
image = ig[i].thumbnail_url;
}
html += '<div><a href="' + link + '" target="_blank"><img src="' + image + '"></a><p>'+caption+'</p></div>'
}
$(".instagram").append(html);
}
});
if文の中でcaptionを取得する記述を追加しています。
取得したcaptionはp要素として出てくるので、CSSで加工可能です。
サイトのスピードチェックを行っておく
jQueryを使ってAPIからデータを引き出すので、ページの読み込み速度が落ちる場合があります。
そうするとSEOの順位にも影響が出てくる場合があるのでスピードチェックは行っておくといいでしょう。
WordPressではSmash Balloon Social Photo Feedがおすすめ
WordPressをお使いの方にお勧めなプラグインは「Smash Balloon Social Photo Feed」です。
以前はInstagram Feedという名前だったのですが、どうやら名前が変わったようです。
このプラグインをダウンロードして、自分のInstagramアカウントでログインすれば簡単にフィードを表示させることができます。
面倒な工程がほとんどないため、積極的にプラグインを利用してもいいでしょう◎

APIを使いこなせばデータ取得もできる
Instagramのいろんなデータを取得できるInstagram Graph API。
画像データ以外にも、フォロワー数やインプレッション数など、インサイトのデータも取得することができます。
InstagramのインサイトのデータをGoogle Spread Seatに自動でためていくやり方も紹介できればと思います。
最後まで読んでいただきありがとうございました。