アクセストークン不要でInstagramのフィードをサイトに表示できるプラグイン「jquery.instagramFeed.js」について知りたい。
2021年のいまでも使えるの？
ネットの情報が古いので最新の情報を知りたい。
こんなことを考えている方へ。
この記事のポイントは以下です。
・2021年8月時点でjquery.instagramFeed.jsはもう使えない
・jquery.instagramFeed.jsの代替手段の紹介
この記事を書いている私は大阪在住のフリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトやECサイトを作ったり、サイト分析をしたり、PMOとして開発案件に参画したり、ブログを書いたりして生活しています。
jquery.instagramFeed.jsが使えなくなった話
2021年の5月頃だったと思います。
jquery.instagramFeed.jsを導入してInstagramのフィードを表示しているサイトで、急に画像が表示されなくなりました。
jquery.instagramFeed.jsはアクセストークン不要でInstagramのフィードをウェブサイトに表示できる便利なプラグインでした。
色々調べてみたのですが、InstagramのAPIに仕様変更がありアクセストークン不要でのフィード取得はもうできないみたいです。
というわけで、Instagramのフィードを表示したければ頑張ってアクセストークンを取得するしかないです。
導入サイトでクロスドメインによるエラーが起きた
異変に気づいたのは2021年の5月頃。
jquery.instagramFeed.jsを導入してInstagramのフィードを表示しているサイトで、急に画像が表示されなくなりました。
以下のように画像が完全に読み込めていないのです。
ソースをみてみるとCROSエラーが起きていました。
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.公式サイトのデモもエラーで非表示になっている
InstagramのAPIが変わったのかなぁ〜
公式サイトで最新版をダウンロードしよう
と思って、jquery.instagramFeed.jsの公式ページに行ってみました。
すると、公式サイトのデモページでもエラーが起きていました。
githubのissuesにもコメントが殺到
続いてgithubを見に行くと、同じように困っている人がたくさんいるようでした。
issuesには正に私と同じ状況で悩んでいる人がトピックを立てていました。
自動翻訳したキャプチャはこちら 。
「最新バージョンの3.04でもCORSが発生して画像が表示されない」という内容がほとんでした。
Access to XMLHttpRequest has been blocked by CORS policy #134
Hello everyone
Today I was checking my site and I started seeing CORS errors even using version 3.0.4.
I checked the demos at https://www.sowecms.com/ and they also give CORS error
Access to XMLHttpRequest at ‘https://images2199-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/github/’ from origin ‘https://www.sowecms.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
https://github.com/jsanahuja/jquery.instagramFeed/issues
日本語訳はこちら。
XMLHttpRequestへのアクセスはCORSポリシーによってブロックされています #134
こんにちは、みんな
今日、自分のサイトをチェックしていて、バージョン3.0.4を使用してもCORSエラーが表示されるようになりました。
https://www.sowecms.com/ でデモを確認しましたが、CORSエラーも発生します
‘https://images2199-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/github/’でのXMLHttpRequestへのアクセス.com ‘はCORSポリシーによってブロックされています：’ Access-Control-Allow-Origin ‘ヘッダーが要求されたリソースに存在しません。
https://github.com/jsanahuja/jquery.instagramFeed/issues
そしてリポジトリはアーカイブ化された
この記事を書いている2021年8月現在、githubのリポジトリはアーカイブされています。
InstagramのAPI変更に伴い完全に機能しなくなったのですね。
This repository has been archived
The focus of this repository was to provide an easy and ready to use plugin to display an Instagram Feed but since latest Instagram changes, this no longer makes sense. Please, move to an official API based plugin.If you feel this repo should not be archived, please reach out and let us know. Archiving can always be reversed if needed.
—-※以下、日本語訳—–
このリポジトリの焦点は、Instagramフィードを表示するための簡単ですぐに使用できるプラグインを提供することでしたが、最新のInstagramが変更されたため、これはもはや意味がありません。公式のAPIベースのプラグインに移動してください。
このリポジトリをアーカイブすべきではないと思われる場合は、ご連絡ください。アーカイブは、必要に応じていつでも元に戻すことができます。
https://github.com/jsanahuja/InstagramFeed
jquery.instagramFeed.jsの関連リンクまとめ
jquery.instagramFeed.jsに関連するリンクをまとめました。
【github – jsanahuja / InstagramFeed】
https://github.com/jsanahuja/InstagramFeed
【公式サイト – Documentation InstagramFeed】
https://www.sowecms.com/demos/InstagramFeed
【jqueryscript.net – Documentation InstagramFeed】
https://www.jqueryscript.net/social-media/Instagram-Photos-Without-API-instagramFeed.html
jquery.instagramFeed.jsの代替手段
jquery.instagramFeed.js の代替手段は以下です。
- WordPressならプラグインを使うのが簡単
プラグインを使うのが圧倒的に簡単です。
私がよく使うのは「Smash Balloon Social Photo Feed」です。IDとpasswordを入力してアカウント接続するだけでフィード表示できます。
- Shopifyならアプリを使うのが簡単
アプリを使うのが圧倒的に簡単です。
私がよく使うのは「Instafeed ‑ Instagram Feed」です。IDとpasswordを入力してアカウント接続するだけでフィード表示できます。
【関連記事】
Shopifyでインスタ連携する方法【フィードを埋め込み表示】をあわせて読む >>
- jsプラグインのInstafeed.jpを使う
アクセストークンは必要ですが最新のAPI仕様に対応したjsプラグインがあります。
Instafeed.jpです。
アクセストークンはFacebookで無期限のものを取得します。
フリーランスとしてスキルアップして収入を安定させるための方法まとめ
フリーランスは収入に波があります。
常に”求められる人材”にならなければ仕事はありません。
高単価案件を獲得し収入を安定させるためにも、スキルアップを怠らないようにしましょう。
- 動画でスキルアップする
スキマ時間に自分のペースで学びたいなら「udemy」がおすすめ。
「未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
」や「WordPress開発マスター講座
」や「Shopifyでクライアントのストアを作る人のための講座
」など、web制作に関わるコースが多数開講されています。
【Udemyがセール中（2022年7月28日（木）まで！】
対象コースが ￥1,480から。
【Udemy】セール中の講座一覧を見る >>
- 本でスキルアップする
WordPress、ネットショップ、webマーケティングのおすすめ本をピックアップしました。辞書的な役割として手元に一冊置いておくと安心です。
- デイトラで学ぶ
「デイトラ」は質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。
「Web制作コース」や「WEBデザインコース
」や「ShopifyEC構築コース
」や「Webマーケティングコース
」といった複数のコースを提供しています。
現場で役立つスキルを提供しているのが特徴で、学習中は厳しい審査を突破した現役エンジニアやフリーランスがメンターとしてサポートしてくれます。
- フリーランスとしての生き方を学ぶ
フリーランスは基本ひとり。誰も守ってくれません。知識（＝武器）を身につけ、自分の身は自分で守りましょう。
まとめ
この記事のポイントをまとめます。
・アクセストークン不要でInstagramのフィードをサイトに表示できたjquery.instagramFeed.jsはもう使えない
・代替手段はWordPressならプラグイン、Shopifyならアプリが超簡単
・その他CMSや静的サイトへの埋め込みは、アクセストークンを取得してInstafeed.jpがおすすめ
今回の記事はここまでです。
