こんにちは。
@OfficeTAKU です。
Instagram の投稿を自動的に取得して、WordPressに表示したい、ということで、プラグインを利用しています。
Instagram投稿の埋め込みコードを一つずつコピーするのは大変です。
また、ブログの更新よりも、Instagramへの投稿の方が頻度が多いので、それをWebサイト上でも表示し、みなさんに知って頂きたいからです。
WordPressにInstagramの投稿を埋め込むプラグイン利用時にレイアウトが崩れる！
以前から、「Instagram Feed」というプラグインを利用していました。
しかし、昨年のInstagramのAPIの仕様変更でエラーが発生。
しばらくほったらかしにしていましたが、なんと、「Smash Balloon Social Photo Feed」という新しいプラグインがリリースされていたのです。しかも、数年前に。
なんじゃこりゃ……がっくりです。
Smash Balloon Social Photo Feed で レイアウトが崩れる！
早速「Smash Balloon Social Photo Feed」をインストールし、Instagram と アカウント連携し、投稿を取得。ショートコードをWordPressの投稿・固定ページに設置しました。
しかし！
「Smash Balloon Social Photo Feed」のプレビュー画面ではきれいに表示されるものの、実際の投稿画面を表示すると、レイアウトが崩れてしまいます。
原因はリール動画 !?
最初は、てっきり縦長のリール動画の投稿が崩れるものだと思い込んでいました。
サイズの違うリール動画投稿が混じることでレイアウトが崩れるものだと…
調べたところ、レイアウトの崩れを修正するスタイルセットが紹介されている記事を見つけました。
上記のスタイルセットを追加しても、崩れは直りませんでした。
原因はキャプションにURLを記述していたためでした
レイアウトの崩れた投稿をよくみると、すべてのインスタグラムの投稿にURLが記述されていたのです。
ブログ記事に誘導するために、記事の URLを記述していたのが、あだになりました。
そういえば、最近、リール動画を作るようになって、Meta Business Suite から投稿しようとした時、下記のようなアラートが表示された事がありました。
キャプション内のリンクは邪魔になる可能性があります。動画に集中してもらえるように、キャプションからは削除しましょう。
これは直接関係ないことかもしれませんが、仰せの通りにしておいた方が無難なようですね。
まとめ
今回のポイントを整理すると、次の 2 点が重要です。
Instagram でブログ記事へ誘導したい場合は、キャプションではなく プロフィールのリンク を活用しましょう。
