パソコン画像
WordPress・ホームページ

WordPressにインスタグラムのタイムラインを埋め込む!しかし画像が消えてしまった。

ワードプレスロゴの画像

データベース作成で紹介しています。
京都府京田辺市のステーションボウル新田辺さんのホームページをリニューアルしています。ステーションボウル新田辺さんのホームページはこちら

現在も良いホームページをお持ちですが、中々伝えたい内容が簡潔な形で案内出来ていないと言う事でリニューアル作業をしています。

現在もFacebookのタイムラインは表示しているのですが、リニューアル後はインスタグラムも表示したいと依頼がありました。
インスタグラムをホームページに埋め込む事は問題ないと思っていたので軽く「はーい!」と返事しましたが、結構ハマってしまったので記事にします。

Facebookのようにコピペでは無理なのね!

インスタグラムの投稿記事をホームページやWordPressに埋め込む事は簡単に出来そうですが、タイムライン表示は調べてもなかなか出てこないですね!

なにやら難しそうな事をしなければいけないと思い、簡単に出来るようなものはないかと調べると

WordPressのプラグインで「Smash Balloon Instagram Feed」があり紹介記事を読んでも結構簡単そうです。

早速インストール

早速「Smash Balloon Instagram Feed」をインストールして設定を行うと簡単に表示出来ています。レスポンシブも問題なく動作しています。

「Smash Balloon Instagram Feed」でインスタグラムのタイムライン表示方法は調べればいくらでも出てきますから、お調べ下さい。
このプラグインは紹介記事によって名前が違うんですよ。
多分正しいのは「Smash Balloon Social Photo Feed」ですかね!
記事により結構色々な名前で紹介されています。

しかし翌日に不幸な事が!

設定した当日は問題なく表示されていたのですが、翌日に表示するとタイムラインの画像の上あたりに英文でエラー表示がありました。
スクショ撮ってません。

調べてみると「キャッシュエラー」が表示されていて、改善するには「Access Token」を再取得するとありましたが、紹介されてる記事は以前のバージョンばかりだったので、自分なりに再設定してみました。

そして表示を確認すると

画像が消えてるやん!

これもスクショを取り忘れているのですが、英文のエラーは消えず画像の一覧が消えてしまっています。
何度、再設定しても表示しません。しかし設定は間違っているとは思っていませんでした。
設定画面でも隠しているところは間違いなくユーザー名が表示されています。

あかん何回やっても無理や!

これ以上時間をかけてもしょうがないと思い、納品時に同じような事があると心配なので別の方法がないか調べてみました。

ありましたよ「InstaWindow」というサービスが、こちらはさらに簡単そうですね!
InstaWindowはこちら
ユーザー名を入力すれば自動でそのユーザーに切り替わります。
ブログパーツ幅を100%にすればレスポンシブにも対応します。
生成されたコードを貼り付けるだけなので本当に簡単です。
使い方はお調べ下さい。

3分ぐらいでできます。
画像はインスタグラムの記事にリンクされています。

とりあえず代替え方法が見つかりよかったです。

やっぱり思った通りでした。

昨日散々、再設定しても表示しなかった「Smash Balloon Social Photo Feed」ですが翌日に表示すると

問題なく表示してるやん!
英文のエラーも消えてるやん!

なぜ直ったのかわかりませんが、結構そういうもんです。
やはり設定は間違ってなかったんですよ

しかし昨日は夜中まで本当に疲れました。