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

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

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

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

本記事の内容
  • Instagram APIの取得方法について
  • jQueryを使用した埋め込み方法について
  • CSSを使用した装飾方法について
目次

Instagramの埋め込み

instagram

1.SnapWidgetを使う※非推奨

https://snapwidget.com/

一番簡単な方法はSnapWidgetを使う方法です。
URLなどを入れるだけで簡単に実装できます。

でもデメリットがたくさんあります。
一番のデメリットはリンク先がInstagramではなくSnapWidgetのサイトになってしまうこと。
ということはブログで見つけてもらえてもフォローに繋がりにくいのです
(課金すればInstagram遷移も可)

僕の場合なぜか動画投稿が全然違う画像に置き換えられたことがあります。
ブログの装飾的な使い方の場合以外はおすすめできません。

2.Instagram Graph APIを使う

さて、ここから本題です。

InstagramではInstagram Graph APIというものが利用できます。
APIとか名前聞くと難しそうですが、簡単に言うとInstagramに投稿した画像とかキャプションとかインサイトとか(いいねの数や閲覧数など)をデータで取得するやり方です。

API取得までの流れ

このやり方では以下の流れが必要です。
(頑張りましょう!)
※今から紹介する流れは完全に理解できていなくても大丈夫です。

  1. Instagramをビジネスアカウントにする
  2. アクセストークンを取得する
  3. jQueryでAPIを使用しウェブサイトに画像データを取得させる

1.2の流れはこのブログが分かりやすかったのでこちらをチェック!
※2020年現在v8.0ですが下記のやり方で問題なく進めることができました。

ネイビーモバイル
Instagram Graph APIの使い方とサイトに埋め込む方法 v5.0対応【2020年3月最新版】 | 西尾市・岡崎市・名... インスタグラムの投稿をホームページに埋め込む方法をご紹介します。2019年11月時点 グラフAPI v5.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ファイルに追加してください。

note(ノート)
Instagram Graph APIで動画投稿のサムネイルを取得する|ProVisionのたいちょ〜 サイトにInstagramのサムネイルを表示するTipsのご紹介(その2) その1はこちら Instagramの投稿内容が画像だけでなく、動画も含まれてた場合ですが、 その1でご紹介し...

 特定のものだけ大きさを変える

画像の中で、特定の順番のものだけ大きさを変えるには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がおすすめ

smash balloon social photo feed

WordPressをお使いの方にお勧めなプラグインは「Smash Balloon Social Photo Feed」です。
以前はInstagram Feedという名前だったのですが、どうやら名前が変わったようです。

このプラグインをダウンロードして、自分のInstagramアカウントでログインすれば簡単にフィードを表示させることができます。
面倒な工程がほとんどないため、積極的にプラグインを利用してもいいでしょう◎

WordPress.org 日本語
Smash Balloon Social Photo Feed – Best Social Feed Plugin for WordPress 以前の "Instagram Feed"。複数のアカウントから安全でカスタマイズ性のあるレスポンシブな Instagram フィードを表示します。Instagram の oEmbed に対応しています。

APIを使いこなせばデータ取得もできる

Instagramのいろんなデータを取得できるInstagram Graph API。
画像データ以外にも、フォロワー数やインプレッション数など、インサイトのデータも取得することができます。

InstagramのインサイトのデータをGoogle Spread Seatに自動でためていくやり方も紹介できればと思います。

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

instagram

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次