この記事では、インスタグラムの投稿やフィードをWordPressのホームページに埋め込む方法を、わかりやすく解説します。
- 投稿1件だけの埋め込み
- インスタフィードの埋め込み
の2種類について、順を追って説明していきますので、ぜひ参考にしてください。
インスタ投稿を1件だけ埋め込む方法
イベント告知や商品紹介など、特定の投稿をホームページで強調したい場合に便利です。
インスタグラムの公式埋め込み機能を使えば、コードをコピー&ペーストするだけで簡単に埋め込むことができます。
Instagramの表示したい投稿を表示して、画面右上の「…」をクリックします。
![表示したいインスタグラム投稿を表示して「…」をクリック](https://dressing.works/wp-content/uploads/2024/06/instagram_01-min.png)
![表示したいインスタグラム投稿の「埋め込み」を選択する画面](https://dressing.works/wp-content/uploads/2024/06/instagram_02-min.png)
「埋め込みコードをコピー」をクリックしてコードをコピーします。
![表示したいインスタグラム投稿の「埋め込みコードをコピー」ボタンを選択する画面](https://dressing.works/wp-content/uploads/2024/06/instagram-02-min.png)
キャプションをホームページ上で表示しない場合は、「キャプションを追加」のチェックを外してください。
WordPressでインスタ投稿を埋め込むページの編集画面を開きます。
インスタ投稿を埋め込む位置で「+」アイコンをクリックして、「カスタムHTML」ブロックを選択します。
![WordPressの編集画面で「カスタムHTMLブロック」を追加する画面](https://dressing.works/wp-content/uploads/2021/12/gcalendar-11.jpg)
「カスタムHTML」ブロックに先ほどコピーした埋め込みコードを貼り付けます。
![WordPressの編集画面で「カスタムHTMLブロック」に埋め込みコードを貼り付けた画面](https://dressing.works/wp-content/uploads/2024/06/instagram-04-min.png)
ホームページに埋め込むことができました。
![ホームページに埋め込んだインスタグラムの投稿画像-キャプションあり](https://dressing.works/wp-content/uploads/2024/06/instagram-05-min.png)
![ホームページに埋め込んだインスタグラムの投稿画像-キャプションなし](https://dressing.works/wp-content/uploads/2024/06/instagram-05-2-min.png)
続いて、インスタのフィードをホームページに埋め込む方法を解説していきます。
インスタフィードを埋め込む方法
インスタグラムのフィード全体を埋め込む場合、WordPressを使っている方は、無料プラグイン「Smash Balloon Social Photo Feed」が便利です。
Smash Balloon Social Photo Feedの特徴
- 無料で簡単に利用できる
- 投稿の表示をカスタマイズ可能
当サイトでも下記のような形で、トップページで利用しています。
![ホームページに埋め込んだインスタグラムのフィード画像](https://dressing.works/wp-content/uploads/2024/06/instagram-06-min.png)
無料版でも、表示する投稿の数や大きさ、表示順などを設定可能です。
では、早速「Smash Balloon Social Photo Feed」を使ったインスタのフィード埋め込み方法を見ていきましょう。
ステップ1:プラグインのインストールと有効化
WordPressの左側のメニューから「プラグイン」→「新規追加」を選択します。
検索窓に「Smash Balloon Social Photo Feed」と入力して検索します。表示されたプラグインの「今すぐインストール」ボタンをクリックします。
![Smash Balloon Social Photo Feedプラグインを検索してインストールする](https://dressing.works/wp-content/uploads/2024/06/instagram-09-min.png)
インストールが完了したら、「有効化」ボタンをクリックします。
![Smash Balloon Social Photo Feedプラグインを有効化する](https://dressing.works/wp-content/uploads/2024/06/instagram-10-min.png)
ステップ2:インスタグラムアカウントとの連携
続いて、「Smash Balloon Social Photo Feed」とInstagramのアカウントを連携します。
WordPressの管理画面の左メニューに「Instagramフィード」という項目が追加されているので、クリックして、「セットアップウィザードを起動」をクリックします。
![Smash Balloon Social Photo Feedのセットアップウィザードを起動する](https://dressing.works/wp-content/uploads/2024/06/instagram-11-min.png)
![Smash Balloon Social Photo Feedの設定-Instagramアカウントを新規追加](https://dressing.works/wp-content/uploads/2024/06/instagram-12-min.png)
通常の個人アカウントの場合は「Basic」を選択します。(ビジネスアカウントの方は「Business」を選択してください)
![Smash Balloon Social Photo Feedの設定-「Basic」アカウントを選択](https://dressing.works/wp-content/uploads/2024/06/instagram-13-min.png)
※開始時のメール通知が不要の場合は、ボタンの下のチェックは外してください。
![Smash Balloon Social Photo Feedの設定-Instagramアカウントと連携する](https://dressing.works/wp-content/uploads/2024/06/instagram-15-min.png)
Instagramにログインしていない場合はログインします。
![Smash Balloon Social Photo Feedの設定-Instagramログイン画面](https://dressing.works/wp-content/uploads/2024/06/instagram-16.png)
内容を確認して、「許可」をクリックします。
![Smash Balloon Social Photo Feedの設定-Instagramアカウントの利用許可](https://dressing.works/wp-content/uploads/2024/06/instagram-18-min.png)
内容を確認して「許可する」をクリックします。
![Smash Balloon Social Photo Feedの設定-Instagramアカウントの連携許可](https://dressing.works/wp-content/uploads/2024/06/instagram-19-min.png)
あなたのサイトドメイン(URL)であることを確認して、問題なければ「Yes,it is my domain」をクリックします。
![Smash Balloon Social Photo Feedの設定-ドメインの確認](https://dressing.works/wp-content/uploads/2024/06/instagram-20-min.png)
連携すると、自動的にWordPressのInstagramフィード設定画面に戻ります。「ソースを管理」に連携したInstagramのアカウントが追加されました。
![Smash Balloon Social Photo Feedの設定完了 ソースが追加されている](https://dressing.works/wp-content/uploads/2024/06/instagram-23-min.png)
ステップ3:フィードの設定と埋め込み
続いてフィードの表示形式などを設定しましょう。
ダッシュボードのメニューから「Instagramフィード」→「すべてのフィード」に移動して、「+新規追加」ボタンをクリックします。
![Smash Balloon Social Photo Feedのフィード設定 「新規追加」](https://dressing.works/wp-content/uploads/2024/06/instagram-23-min-1.png)
ユーザータイムラインを選択して「次へ」ボタンをクリックします。
![Smash Balloon Social Photo Feedのフィード設定 ユーザータイムライン](https://dressing.works/wp-content/uploads/2024/06/instagram-24-min.png)
Instagramのアカウント名にチェックを入れて「次へ」をクリックします。
![Smash Balloon Social Photo Feedのフィード設定 ソースを選択](https://dressing.works/wp-content/uploads/2024/06/instagram-25-min.png)
プロフィール写真とプロフィールの設定をするかどうか聞かれますが、ここではスキップします。※プロフィールはあとから設定できます。
![Smash Balloon Social Photo Feedのフィード設定 プロフィール設定をするかどうか](https://dressing.works/wp-content/uploads/2024/06/instagram-26-min.png)
カスタマイズ画面に移動しますので、「フィードレイアウト」を選択して、投稿表示数や1列当たりの表示数を設定します。終わったら、最後に「保存」ボタンをクリックしてください。
![Smash Balloon Social Photo Feedのフィードレイアウト設定画面](https://dressing.works/wp-content/uploads/2024/06/instagram-29-min.png)
カラースキーム(背景色などの設定)、ヘッダー(ヘッダーに表示するアイコンやプロフィールの設定)、フォローボタンのカスタマイズなどをお好みで行ってください。
![カスタマイズのカスタマイズメニュー](https://dressing.works/wp-content/uploads/2024/06/instagram-40.png)
![カスタマイズの設定メニュー](https://dressing.works/wp-content/uploads/2024/06/instagram_38.png)
後から設定変更を行う場合:
「Instagramフィード」→「すべてのフィード」から該当するフィードの「鉛筆アイコン」をクリックすると編集できます。
![「Instagramフィード」→「すべてのフィード」で「鉛筆アイコン」をクリック](https://dressing.works/wp-content/uploads/2024/06/instagram-36.png)
画面右上の「埋め込む」ボタンをクリックして「コピー」をクリックします。
![カスタマイズ画面で「埋め込む」ボタンをクリック](https://dressing.works/wp-content/uploads/2024/06/instagram-31-min.png)
↓
![ショートコードをコピー](https://dressing.works/wp-content/uploads/2024/06/instagram-32-min.png)
または、「Instagramフィード」→「すべてのフィード」から該当するフィードの「コピーアイコン」をクリックするとコピーできます。
![「Instagramフィード」→「すべてのフィード」で「コピーアイコン」をクリック](https://dressing.works/wp-content/uploads/2024/06/instagram-37.png)
WordPressでインスタ投稿を埋め込むページの編集画面を開きます。
インスタフィードを埋め込む位置で、先ほどコピーしたショートコードを貼り付けます。(貼り付けると自動的にショートコードのブロックに変換されます)
![WordPressの編集画面でショートコードを埋め込む](https://dressing.works/wp-content/uploads/2024/06/instagram-33.png)
ページにインスタのフィードが表示されました。
![ホームページに埋め込んだインスタグラムのフィード画像](https://dressing.works/wp-content/uploads/2024/06/instagram-06-min.png)
サイドバーにインスタフィードを埋め込む方法
サイドバーにインスタフィードを埋め込む場合は、次の手順で行います。
ダッシュボードから「外観」→「ウィジェット」に移動して、利用できるウィジェットの中から「Instagramフィード」を開きます。
「サイドバー」を選択して「ウィジェットを追加」をクリックします。
![](https://dressing.works/wp-content/uploads/2024/06/instagram-33-min.png)
任意のタイトルを入力して、埋め込み用のショートコードを貼り付け、最後に「保存」します。
![](https://dressing.works/wp-content/uploads/2024/06/instagram-34.png)
インスタ埋め込み時の注意点
インスタグラムの埋め込みは便利ですが、いくつか注意点があります。
まず、埋め込む投稿の著作権には十分配慮しましょう。
他のユーザーや企業などの投稿を埋め込む場合は、必ず許可を取りましょう。また、写っている人物の肖像権にも配慮が必要です。
また、埋め込みすぎるとホームページの表示速度が遅くなる可能性があります。
例えば、各ページに埋め込む投稿数を3件程度に抑えたり、トップページや特定のページにのみ埋め込むようにしたりすることで、ホームページ全体の表示速度が遅くなるのを軽減しましょう。
まとめ:
インスタグラムの投稿とフィードをホームページに埋め込む方法を解説しました。
無料で簡単に埋め込みができますので、ぜひこの記事を参考に、あなたのホームページにもインスタグラムの投稿やフィードを埋め込んでみてくださいね。
この記事で紹介した方法を試してみたけれど、うまくいかない…。そんな時は、Dressingのウェブサポートを活用してみませんか?
WordPressのお悩みに経験豊富な専門スタッフが対応します。設定方法のご説明から、代行設定まで柔軟に承ります。
ホームページ運営でお困りの際は、ぜひDressingにご相談ください。