Instagram APIで画像を埋め込む　2021年1月更新（jQuery 使用）

2020年12月7日2021年9月27日

今や多くの人が毎日チェックしているInstagram。
ブログやホームページにInstagramのフィードを埋め込んだりすると見栄えがグッと上がりますよね。

WordPressを使ってる方はプラグインで簡単に導入できるのですが、
WordPress以外の場合だと意外と面倒。

今回はWordPress以外の場合のInstagram埋め込みをご紹介します。
多くのブログではPHPを使うやり方が紹介されていますが、本記事ではjQueryを用いた方法を紹介します。HTML / CSS /Javascript /jQueryの知識があればOKです。
（Javascriprt/jQueryはかじったことある程度で問題ないです）

本記事の内容

Instagram APIの取得方法について
jQueryを使用した埋め込み方法について
CSSを使用した装飾方法について

Instagramの埋め込み

1.SnapWidgetを使う※非推奨

https://snapwidget.com/

一番簡単な方法は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に自動でためていくやり方も紹介できればと思います。

最後まで読んでいただきありがとうございました。

この記事が気に入ったら
フォローしてね！

Follow @YamaTK_2170 Follow Me

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

Instagram APIで画像を埋め込む 2021年1月更新（jQuery 使用）