当サイトにはプロモーションが含まれます。
記事執筆記事投稿スピートを上げる

Cocoonでインスタグラムの埋め込みをする方法

記事執筆

インスタグラムの機能を使うことで、投稿を引用(埋め込み)をすることができます。

埋め込みコードを取得する方法

Cocoonでインスタグラムの埋め込みをする方法

埋め込みたいインスタグラム投稿の、右上の3点ドットマークを押します。

Cocoonでインスタグラムの埋め込みをする方法

「埋め込み」を選択。

Cocoonでインスタグラムの埋め込みをする方法

「埋め込みコードをコピー」を選択。これでコードがコピーされます。

Cocoonでインスタグラムの埋め込みをする方法

WordPressの編集画面に戻り、「カスタム HTML」ブロックを選択。

Cocoonでインスタグラムの埋め込みをする方法

コピーしたコードを貼り付ければ完了です。

貼り付けるとこのようにインスタグラムの内容が表示されます。

画像のみを貼り付ける方法

Cocoonでインスタグラムの埋め込みをする方法

埋め込みコードを取得するときに、「□キャプションを追加」のチェックを外すことで投稿の文章を含まずに埋め込みすることができます。

埋め込んだ結果はこちら。残念ながら、プロフィールアイコンや「いいね」の件数は表示されてしまいます。

CSSで無理やり非表示にすることもできるのですが、API利用規約違反になる可能性があるため推奨できません。

また、キレイに画像のみ取得する場合、独自でAPIを利用する必要があり、初心者にはかなりハードルが高いです。

そのため、「簡単に画像のみ表示させる」という点では上記の方法が最善策と言えます。

URLをそのまま貼るのはおすすめしない

従来は、インスタグラムのURLをそのままコピペすることで自動的に埋め込みコードに変換が行われていました。

しかし、CocoonやWordPressのアップデート、プラグインの相性などにより確実にできるわけではありません。

Cocoonでインスタグラムの埋め込みをする方法

埋め込みではなく、上の写真のようにブログカード形式になってしまう場合があります。

今後もアップデートで仕様が変わる恐れを考えると、最初に解説した「埋め込みコード」を使うほうが安全です。

タイトルとURLをコピーしました