「カラーミーショップにInstagram画像を表示させて」
クライアントさんからこんな注文お願いされました。
現在の状況としては、
・カラーミーショップの一番下のプランでショップ運用
・Instagramをやっている。アカウントはプロアカウントにしている。お仕事用にアカウントを持っている。
・FACEBOOKもやってる。個人アカウントだが、お仕事用のページもある。既にInstagramと連携しているよう。
という状況です。
カラーミーショップの場合、Jqueryを読み込んでいるため、スライダーとかは増設可能なんですが、phpファイルなどをサーバーに置くことはできません。
というか、FTPの機能は一番下のプランにはありませんので、
画像についてもひとつひとつアップして、URLをコピーして、画像入れたいとこにURL入れていく・・・
みたいな画像だけでもそんなことになっています。
（FTPつきプランでもプログラムのファイルはアップできないようですが）
それでもいろいろ調べていくと埋め込むことは可能なようで、
とりあえずやってみちゃおう、という感じでやってみましたので、備忘録。
こちらのサイトを参考にさせていただきました。
ありがとうございます！
こちらの通りにやればここで説明するまでもなく進むのですが、ちょっと詰まったとことかをメモしておきます。
カラーミーショップにInstagram画像を表示させるカスタマイズ（Instagram Graph API対応 2019年版）
Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法
なんだかここ最近でさらにめんどくさいことになっているらしく、
手間がかかりそうです。
流れ
１．Instagramをプロアカウントにする
こちらはもう終わっていました。
２．FACEBOOKとInstagramを連携させる
こちらも終わっていました。
３．FaceBookアプリを作成する
Facebook開発者アカウントを取得します。
https://developers.facebook.com/?no_redirect=1
Facebook開発者アカウントを取得していなかったので、取得しました。
FACEBOOKはしょっちゅう仕様が変わっているので、また変わっている可能性もありますが、
グローバルメニューの一番右のスタートするみたいなとこから始めます。
ここで登録ができるはずなんですが、、
ここで詰まったとこ。
なぜかクライアントはFACEBOOKにメールアドレスを登録しておらず、携帯番号だけで登録していました。
なので、登録できませんでした。何度やっても登録画面に進みません・・・
レアケースですけど、解決法はFACEBOOKの設定でメールアドレスを登録してもらうことです。
認証などでまたちょいと面倒なのですが、仕方ないですね。
で、そのアドレスで開発者登録したら登録が進みました。
開発者登録さえすれば、もうこちらで紹介されている通りに進めれば問題なしです！
Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法
https://arrown-blog.com/instagram-graph-api/
確かにちょっと面倒ですが、手順通りやれば進みます。
で、また、詰まったとこ。
３段階目のトークンをゲットして、ビジネスIDを表示させようと思ったら、
空っぽの画面になっちゃいました。
データ、、、なし
みたいな。
何度かやりましたが、トークンの間違いとかではないようでした。
で、またいろいろ調べると、どうもInstagramとFACEBOOKがちゃんと連携していないらしい。
クライアントの方でやっていたし、FACEBOOKにも連携済みとなっていたので、問題なしと思っていたが。
解決法としては、
Instagramをアプリで開き、設定を開きます。（確か3本線のところ）
で、連携でいろいろなアプリが出ていますが、ここでちゃんとFACEBOOKを連携させてください。
これで解決しました。
すると無事、ビジネスIDがとれました。
なんだそんなにめんどくさくもなかったな、と思ったのですが。
こちらを参考にカラーミーにタグを埋め込み、、、、
って外部にphpファイルおいて呼び出すんだ！とここで初めて気づきました。
とりあえずやっちゃってるので、全然先を見ていませんでした。
クライアントは自分で契約しているサーバーはなく、
カラーミーだけでサイトを運営していて、プランも一番お手頃にしているくらいなので、
それほどお金かけたくない感じです。
なので、無料サーバーを探してみました。
ファイルひとつ置くだけなので、、、。
でも条件として、phpが使えるところで、
こちらをチョイスしました。
スターサーバーフリーってやつです。
https://www.netowl.jp/
とりあえず、私がテストで開設してみました。
無料なのにphpが使える、Wordpressも使えるらしい、すごい、、。
カラーミーのページにHTML、css、JSを埋め込み、
jsからphpを呼び出すってことなのですが、、、
表示されない。
また、ここで詰まりました。
ここでも試行錯誤しましたが、、、
解決法としてはSSLのサーバーにphpファイルを置くということで解決しました。
試しに、私が契約しているドメインのサーバー（ssl設定ずみ）にphpファイルを設置。
するとあっさりと表示されました。
カラーミーはSSL設定されているので、
そこから呼び出すのでsslなしだとダメなんですね。
ということで無料サーバーでSSLのあるサーバーなんてないよ！（多分）
という結末になりました。
通常ドメイン持ち込んでのSSLだと思うので、
そこまでして、Instagram載せたいかな、、、、
私なら要らないかな・・・
クライアントさんに委ねます。
参考サイト通りにやれば、表示できますが、
ちょいちょい詰まる部分があったので、備忘録しておきました。
コメント