WordPressにInstagramを簡単に埋め込む方法（ステップバイステップ）

WordPressにInstagramフィードを埋め込みたいですか？

ウェブサイトにInstagramの写真や動画を表示すると、コンテンツを最新の状態に保ち、ユーザーエンゲージメントを高め、信頼を築くことができます。また、Instagramアカウントを宣伝してフォロワーを増やすための素晴らしい方法でもあります。

この記事では、WordPressにInstagramを埋め込む方法をステップバイステップでご紹介します。

WordPressサイトにInstagramを埋め込む理由

私たちのマーケティング統計調査によると、Instagramの月間アクティブユーザーは20億人を超えています。これは、製品やサービスを宣伝し、ブランド認知度を高め、オーディエンスを拡大するのに最適な場所であることを意味します。

しかし、ウェブサイトを訪れただけでは、Instagramのコンテンツは表示されません。これを念頭に置いて、InstagramフィードをWordPressに埋め込むことで、誰でも見られるようにするのが賢明です。

これは、ソーシャルメディアページを宣伝し、より多くの人にInstagramでフォローしてもらうための簡単な方法です。

これらすべての追加コンテンツは、サイトの検索エンジン最適化（SEO）を改善し、訪問者が最新の投稿をチェックするために戻ってくるように促すことができます。肯定的なコメントや「いいね！」も、信頼を築き、より多くの売上を上げるための強力なソーシャルプルーフとなります。

それを踏まえて、WordPressにInstagramフィードを埋め込む方法を見てみましょう。

Instagram写真プラグインのインストール方法

WordPressにInstagramを埋め込む最良の方法は、Smash Balloon Social Photo Feedプラグインを使用することです。

この無料プラグインを使用すると、1つ以上のInstagramアカウントの写真を、完全にカスタマイズ可能なフィードで表示できます。

また、WordPressでFacebookおよびInstagramのoEmbed問題を修正する最も簡単な方法でもあります。

フィードをウェブサイトに配置した後、新しいInstagram投稿をするたびに自動的に更新されます。このように、手動で更新することなく、サイトを新鮮で魅力的に保つことができます。

このガイドでは、Smash Balloonの無料バージョンを使用します。これは、WordPressウェブサイトにInstagramフィードを追加するために必要なすべてを備えています。ただし、ハッシュタグフィードを表示したり、Instagramのショッピング可能な画像を追加したりできるプロバージョンもあります。

開始する前に、InstagramアカウントをFacebookページに接続する必要があります。個人のInstagramアカウントをお持ちの場合は、ビジネスアカウントに切り替えることも検討してください。これにより、Smash BalloonがInstagramのプロフィールとヘッダーを自動的に表示できるようになります。

これら両方の方法の手順については、このガイドの最後にあるFAQセクションを参照してください。

準備ができたら、Smash Balloon Social Photo Feedプラグインをインストールして有効化してください。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

InstagramアカウントをWordPressに接続する方法

プラグインを有効にした後、最初のタスクはInstagramアカウントをWordPressに接続することです。 Instagram Feed » Settings に移動し、「新規追加」をクリックするだけです。

Smash Balloon Proを使用すると、タグ付けされた投稿やハッシュタグからフィードを作成したり、さまざまなソーシャルメディアウェブサイトからのコンテンツでソーシャルウォールを作成したりできます。

無料プラグインを使用しているため、「ユーザータイムライン」を選択して「次へ」をクリックするだけです。

さて、あなたのカスタムInstagramフォトフィードで使用するアカウントを選択してください。

開始するには、「ソースの追加」ボタンをクリックします。

次の画面で、個人用Instagramアカウントまたはビジネス用Instagramアカウントのどちらの写真を表示するかを選択します。

「個人用」の横にあるチェックボックスをオンにすると、Smash BalloonはデフォルトでヘッダーにInstagramのアバターとバイオを含めません。ただし、プラグインの設定でいつでもInstagramのアバターとバイオを追加できます。

「個人」または「ビジネス」を選択した後、「Facebookでログイン」をクリックしてください。

これで、WordPressウェブサイトで紹介したいInstagramアカウントを選択し、「次へ」をクリックできます。

その後、InstagramアカウントにリンクされているFacebookページに隣接するチェックボックスをオンにします。

それが完了したら、「次へ」ボタンをクリックします。

Smash Balloonがアクセスできるすべての情報と実行できるアクションが表示されたポップアップが表示されます。

Smash BalloonのInstagramアカウントへのアクセスを制限するには、スイッチのいずれかをクリックして「はい」から「いいえ」に切り替えるだけです。ただし、これによりWordPressブログまたはウェブサイトに表示できる写真や動画に影響が出る可能性があることに注意してください。

これを踏まえて、すべてのスイッチを有効にしたままにすることをお勧めします。

設定に満足したら、「完了」をクリックします。

ウェブサイトに追加したInstagramアカウントが表示されたポップアップが表示されます。

そのアカウントの横にあるチェックボックスをオンにしてから、「追加」をクリックするだけです。

Smash Balloonは、あなたをInstagramフィード » すべてのフィード画面に戻します。

WordPressにソーシャルメディアフィードを追加するには、使用したいInstagramアカウントの横にあるチェックボックスをオンにするだけです。次に、「次へ」をクリックします。

プラグインはInstagramの写真フィードを作成し、それを任意のページ、投稿、またはウィジェット対応エリアに追加できます。たとえば、WordPressサイドバーにInstagramの写真を表示できます。

ただし、Instagramフィードを埋め込む前に、表示方法をカスタマイズしたり、不足している情報を追加したりしたい場合があります。

Instagram写真フィードをカスタマイズする方法

デフォルトでは、Smash Balloonはフィードをエディターで開き、カスタマイズの準備をします。

右側には、Instagramの写真フィードのプレビューが表示されます。左側には、写真フィードをカスタマイズするために使用できるすべての設定があります。

これらの設定のほとんどは自己説明的ですが、いくつかの重要な領域を簡単に説明します。

まず、左側のメニューから「フィードレイアウト」を選択して、Instagramの写真レイアウトを変更し、パディングを追加できます。

変更を加えると、プレビューが自動的に更新されるため、さまざまな設定を試して最適なものを見つけることができます。

デフォルトでは、Smash Balloonは、ユーザーがデスクトップコンピューターを使用しているかモバイルデバイスを使用しているかに関わらず、同じ数の写真を常に表示します。

右上隅のボタンの行を使用して、デスクトップコンピュータ、タブレット、スマートフォンでInstagramフィードがどのように表示されるかをプレビューできます。

スマートフォンやタブレットは通常、画面が小さく処理能力も低いため、モバイルデバイスではより少ないInstagramの写真や動画を表示したい場合があります。

これを行うには、「投稿数」の下にある「モバイル」フィールドに別の番号を入力するだけです。

スマートフォン、タブレット、デスクトップコンピューターごとに異なるレイアウトを作成することで、訪問者がどのデバイスを使用しているかに関わらず、フィードが素晴らしく見えるようにすることができます。

デフォルトでは、プラグインフィードはデスクトップコンピューターと比較して、スマートフォンやタブレットでは列数が少なくなります。これにより、写真や動画が小さな画面に快適に収まるようになります。

これらのデフォルト設定を変更するには、単に「カラム」設定に新しい数値を入力してください。

変更を加えたら、「カスタマイズ」リンクをクリックしてください。

これで、Smash Balloonのメインエディターに戻り、「配色」という次の設定画面を探索する準備が整います。

デフォルトでは、Smash BalloonはWordPressテーマから継承された配色を使用しますが、「ライト」と「ダーク」のテーマもあり、これらを使用することもできます。

「カスタム」を選択して独自のカラーテーマを作成することもできます。その後、設定を使用して、リンクの色、背景色、WordPressのテキストの色などを変更できます。

デフォルトでは、Smash BalloonはInstagramフィードにヘッダーを追加します。これはあなたのプロフィール写真とページ名です。このセクションの外観を変更するには、左側のメニューで「ヘッダー」をクリックします。

この画面では、背景色を変更したり、Instagramのプロフィールを表示したり、ヘッダーサイズを変更したりできます。

場合によっては、異なるプロフィール画像を表示したいことがあります。たとえば、Instagramのアバターがテーマから目立たない場合は、代わりにカスタムロゴを使用できます。

プロフィール写真を変更するには、「カスタムアバターを表示」の下にある「画像を追加」をクリックします。WordPressメディアライブラリから画像を選択するか、新しい写真をアップロードできます。

異なるプロフィール文を追加することもできます。例えば、Instagramへの訪問を促したり、アカウントのフォローを開始するように促したりすることができます。

ユニークなInstagramのプロフィールを作成するには、「カスタムプロフィールを追加」ボックスに入力するだけです。

Smash BalloonはInstagramの写真を自動的に分析し、最適な解像度で表示します。これらのデフォルト設定を使用することをお勧めしますが、必要に応じてInstagramの画像を大きくしたり小さくしたりすることもできます。

画像サイズを変更するには、左側のメニューから「投稿」をクリックします。次に、「画像と動画」オプションを選択します。

ドロップダウンメニューを使用して、サムネイル、中サイズ、フルサイズの画像を選択できるようになりました。

このトピックの詳細については、WordPressの画像サイズに関する初心者向けガイドをご覧ください。

フィードの外観に満足できない場合は、いつでもこの画面に戻り、ドロップダウンから「自動検出（推奨）」を選択できます。

デフォルトでは、Smash BalloonはInstagramフィードの下部に「さらに読み込む」ボタンを追加するため、訪問者は写真や動画をスクロールできます。

「もっと読み込むボタン」を選択することで、このボタンの外観を変更できます。

ここで、「もっと読み込む」ボタンの背景色、文字色、ホバー状態を変更することで、ボタンを目立たせることができます。

「テキスト」フィールドに入力することで、ボタンに独自のメッセージを追加することもできます。

このボタンは有効にしておくことをお勧めしますが、削除することも可能です。例えば、サイトで表示できる写真の数を制限することで、Instagramへの訪問を促すことができます。

ボタンを削除するには、単に「有効化」スライダーを切り替えてグレーにします。

訪問者が表示されたものを気に入れば、埋め込みフィードの下に表示される「Instagramをフォロー」ボタンを使用して購読することを決定するかもしれません。

非常に重要なボタンなので、目立つようにカスタムスタイルを追加したい場合があります。これを行うには、左側のメニューで「フォローボタン」を選択します。

ここで、ボタンの背景色、ホバー時の状態、テキストの色を変更できます。

デフォルトでは、ボタンには「Instagramでフォロー」というラベルが表示されます。

ここを、WordPressダッシュボードの「テキスト」フィールドに入力することで、独自のコールトゥアクションに置き換えることができます。

Instagramフィードの外観に満足したら、「保存」をクリックして変更を保存することを忘れないでください。

これで、WordPressウェブサイトにInstagramフィードを追加する準備が整いました。

WordPressにInstagramフィードを埋め込む方法

ブロック、ウィジェット、またはショートコードを使用して、Instagramフィードをウェブサイトに追加できます。

Smash Balloon Social Photo feedを使用して複数のフィードを作成した場合は、ウィジェットまたはブロックを使用する際にフィードのコードを知る必要があります。

このコードを取得するには、Instagramフィード » すべてのフィードに移動し、「ショートコード」の下のテキストをコピーしてください。

次の画像では、 instagram-feed feed=1 を使用する必要があります。

Instagramフィードをページまたは投稿に埋め込みたい場合は、Instagramフィードブロックの使用をお勧めします。

注意: ブロック対応テーマを使用している場合、以下の手順に従って、フルサイトエディターを使用してサイトの任意の場所にブロックを追加できます。

Instagramの写真と動画フィードを埋め込みたいページまたは投稿を開きます。次に、「+」アイコンをクリックして新しいブロックを追加し、「Instagram Feed」と入力し始めます。

右側のブロックが表示されたら、クリックしてページまたは投稿に追加します。

デフォルトでは、ブロックにSmash Balloonのフィードのいずれかが表示されます。代わりに別のInstagramフィードを表示したい場合は、右側のメニューで「ショートコード設定」を探してください。

ここで、instagram-feed feed=1コードを追加し、「変更を適用」ボタンをクリックするだけです。

ブロックには、Instagramアカウントの写真と動画が表示されます。ページを発行または更新するだけで、フィードがウェブサイトで公開されます。

Instagramフィードをウィジェット対応の領域に追加することもできます。例えば、WordPressサイトのフッターやサイドバーセクションに追加することができます。このように、訪問者はあなたのウェブサイトのすべてのページでフィードを見ることができます。

WordPressダッシュボードで 外観 » ウィジェット に移動し、青い「+」ボタンをクリックするだけです。

検索バーに「Instagram Feed」と入力し、表示されたら正しいウィジェットを選択します。

WordPressには組み込みの「Instagramフィード」ブロックがありますので、公式のInstagramロゴが表示されるものを選んでください。

その後、ウィジェットをInstagramフィードを表示したい領域にドラッグするだけです。

ウィジェットには、Smash Balloonを使用して作成したフィードのいずれかが自動的に表示されます。別のInstagramフィードを表示したい場合は、フィードのショートコードを「ショートコード設定」ボックスに入力するだけです。

その後、「変更を適用」をクリックします。

「更新」ボタンをクリックすると、ウィジェットを公開できるようになりました。詳細については、WordPressでウィジェットを追加して使用する方法に関するステップバイステップガイドをご覧ください。WordPressでウィジェットを追加して使用する方法。

その他のオプションとして、ショートコードを使用して、任意のページ、投稿、またはウィジェット対応エリアにInstagramフィードを埋め込むことができます。

Instagramフィード » すべてのフィードに移動し、「ショートコード」列のコードをコピーします。このコードは、任意のショートコードブロックに追加できます。

ショートコードの配置方法については、ショートコードの追加方法に関するガイドを参照してください。

最後に、ブロック対応テーマをお持ちの場合は、フルサイトエディターを使用して、サイトのどこにでもInstagramフィードブロックを追加できます。

WordPressダッシュボードで、外観 » テーマエディターに移動するだけです。

デフォルトでは、フルサイトエディターはテーマのホームページテンプレートを表示します。

Instagramフィードを別のエリアに追加したい場合は、「テンプレート」または「テンプレートパーツ」のいずれかをクリックしてください。

エディタには、WordPressテーマを構成するすべてのテンプレートパーツのリストが表示されます。

Instagramフィードを表示したいテンプレートをクリックするだけです。

WordPressはデザインのプレビューを表示します。

このテンプレートを編集するには、小さな鉛筆アイコンをクリックしてください。

テンプレートを選択したら、Instagramの写真フィードを追加したい領域にマウスカーソルを合わせるだけです。

次に、青い「+」ボタンをクリックします。

その後、「Instagramフィード」と入力し始めます。

適切なブロックが表示されたら、クリックしてテンプレートに追加します。

いつものように、Smash Balloonは特定のショートコードを追加しない場合、デフォルトでフィードを表示します。上記と同じプロセスでショートコードを追加することで、このフィードを変更できます。

WordPressにInstagramを埋め込むことに関するFAQ

Smash Balloonを使用すると、ウェブサイトにInstagramの写真や動画を簡単に表示できます。とはいえ、WordPressにInstagramフィードを追加することについて、よくある質問をいくつかご紹介します。

Instagramビジネスアカウントを作成するにはどうすればよいですか？

Smash Balloon Social Photo Feedは、個人またはビジネスのInstagramアカウントのどちらからでも写真を表示できます。

ただし、Smash Balloonは個人用InstagramアカウントからInstagramのアバターとバイオを自動的に取得できません。これを念頭に置いて、個人アカウントかビジネスアカウントかを確認し、Smash Balloonがアバターとバイオを自動的に取得できるようにビジネスアカウントに切り替えることをお勧めします。

確認するには、Instagramアカウントにアクセスし、サイドメニューの3本線のアイコンをクリックしてください。

その後、「設定」を選択します。

ビジネスアカウントをお持ちでない場合は、この画面の左側メニューに「プロアカウントに切り替える」と表示されます。

現在個人アカウントをお持ちで、ビジネスアカウントに切り替えたい場合は、このリンクをクリックしてください。

FacebookページをInstagramアカウントに接続するにはどうすればよいですか？

WordPressにInstagramフィードを追加する前に、InstagramアカウントをFacebookページに接続する必要があります。

これを行うには、使用したいFacebookページに移動し、左側のメニューで「設定」をクリックします。

その後、「リンク済みアカウント」をクリックします。これで「Instagram」を選択し、「接続」ボタンをクリックできます。

Facebookは、Instagramからアクセスできるすべての情報と、実行できるアクションを表示するようになります。

問題がなければ、「接続」ボタンをクリックしてください。

ただし、Facebookページを管理している他の誰もがInstagramメッセージを表示し、返信できることを認識しておいてください。Instagramメッセージをプライベートにしたい場合は、オプションを無効にするためにクリックしてください。

満足して次に進む準備ができたら、「確認」をクリックします。

これにより、Instagramのユーザー名とパスワードを入力できるポップアップが表示されます。

その後、「ログイン」をクリックしてください。

しばらくすると、InstagramとFacebookアカウントが接続されたというメッセージが表示されます。

この記事が、WordPressにInstagramを簡単に埋め込む方法を学ぶのに役立ったことを願っています。また、WordPressでカスタムFacebookフィードを作成する方法に関するガイドや、WordPressの最高のソーシャルメディアプラグインの専門家による選択肢もご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。