WordPressでカスタムInstagram写真フィードを作成する方法

Instagramフィードは、ウェブサイトを新鮮に保ちながら、より多くの「いいね！」、共有、Instagramフォロワーを獲得できます。これにより、複数のプラットフォームでオーディエンスとつながり、エンゲージメントを高めることができます。

ソーシャルメディアは、ウェブサイトへのトラフィックを促進し、オーディエンスを拡大する上で重要な役割を果たしてきました。魅力的なコンテンツを共有し、フォロワーと交流することで、ブランド認知度を高め、新しい訪問者を引き付けることができました。

この記事では、WordPressウェブサイト用のカスタムInstagram写真フィードを簡単に作成する方法を紹介します。

WordPressサイトにInstagramフィードを含める理由

WordPressサイトにInstagramフィードを埋め込むと、多くの追加作業なしに訪問者に最新のコンテンツを表示できます。また、読者がInstagramであなたをフォローすることを奨励します。

WordPressブロックエディターで画像を直接追加する代わりに、Instagramに新しい写真を投稿するたびに自動的に更新されるフィードを作成するだけです。ハッシュタグフィードを作成することで、他のユーザーの写真をサイトに表示することもできます。

次の画像では、ユーザー生成コンテンツを表示するためにカスタムInstagramフィードを使用しているブランドの例を見ることができます。

このように、カスタムInstagramフィードを使用して貴重な社会的証明を提供し、オンラインでより多くのお金を稼ぐことができます。

それでは、WordPressでカスタムInstagram写真フィードを作成する方法を見てみましょう。

WordPressでカスタムInstagram写真フィードを作成する方法

サイトにInstagramの写真フィードを追加する最も簡単な方法は、Smash Balloon Instagram Feedプラグインを使用することです。これはWordPress向けの最高のInstagramプラグインであり、Instagramアカウントのコンテンツを瞬時に表示できます。

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

チュートリアルではいくつかのステップを説明します。下のクイックリンクを使用して、さまざまなセクションにジャンプできます。

動画チュートリアル

WPBeginnerを購読する

テキストでの説明をご希望の場合は、このままお読みください。

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

まず、Smash Balloon Instagram Feedプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、WordPressダッシュボードからInstagramフィード » 設定ページに移動してください。

その後、「ライセンスキー」フィールドにSmash Balloonのライセンスキーを入力します。

この情報は、Smash Balloonを購入した際に受け取った確認メールと、Smash Balloonアカウントで確認できます。

それが完了したら、「有効化」ボタンをクリックしてください。

カスタムInstagramフィードを作成する準備ができました。開始するには、Instagramフィード » すべてのフィードを選択し、「新規追加」ボタンをクリックしてください。

Smash Balloonは、作成できるさまざまな種類のInstagramフィードを表示します。

追加したいフィードの種類を選択し、「次へ」をクリックするだけです。

Instagramの写真をただ表示したいだけであれば、個人用Instagramアカウントを使用できます。ただし、ハッシュタグフィードを作成したり、アカウントがタグ付けされている投稿を表示したりしたい場合は、ビジネス用Instagramアカウントが必要です。

「ハッシュタグを公開」を選択した場合、使用したいハッシュタグを入力する必要があります。同じフィードに複数のハッシュタグを表示するには、各ハッシュタグをカンマで区切ってください。

それが完了したら、「次へ」をクリックしてください。

あなたのアカウントがタグ付けされている投稿を表示しますか？代わりに「タグ付けされた投稿」を選択し、「次へ」をクリックする必要があります。

どのようなフィードを作成する場合でも、WordPressをInstagramアカウントに接続する必要があります。

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

その後、個人アカウントまたはビジネスアカウントのどちらから画像を表示するかを選択します。

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

ビジネスアカウントと個人アカウントのどちらかを選択したら、「Facebookでログイン」をクリックするだけです。

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

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

それが終わったら、「次へ」ボタンをクリックする必要があります。

これで、InstagramフィードProがアクセスできるすべての情報と実行できるアクションが表示されるポップアップが表示されます。

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

これを踏まえ、すべてのスイッチを有効にしたままにすることをお勧めします。フィードの設定が完了したら、「完了」をクリックしてください。

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

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

InstagramフィードProは、Instagramフィード » すべてのフィード画面に戻ります。

カスタムInstagramフィードを作成するには、使用したいInstagramアカウントの横にあるチェックボックスをオンにするだけです。次に、「次へ」をクリックします。

プラグインは、任意のページ、投稿、またはウィジェット対応エリアに追加できるInstagramの写真フィードを作成します。

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

デフォルトでは、Smash Balloonはフィードをエディターで開き、カスタマイズできる状態にします。

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

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

レイアウトを変更するには、左側のメニューにある「フィードレイアウト」をクリックするだけです。グリッド、メーソンリー、またはカルーセルレイアウトから選択できるようになりました。

デフォルトで3枚に1枚の写真を強調表示する「ハイライト」レイアウトもあります。

各オプションをクリックすると、ライブプレビューが自動的に更新され、新しいレイアウトが表示されます。これにより、さまざまなデザインを簡単に試して、好みのデザインを見つけることができます。

デフォルトでは、Smash Balloonはデスクトップとモバイルデバイスで同じ数の写真を同じ数表示します。右上にあるボタンの行を使用して、デスクトップ、タブレット、スマートフォンのそれぞれでInstagramフィードがどのように表示されるかプレビューできます。

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

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

デフォルトでは、Smash Ballonはデスクトップでは4列、タブレットでは2列、モバイルでは1列に写真を分割します。

列の数を変更したいですか？その場合は、左側のメニューの「列」セクションまでスクロールしてください。

デスクトップ、タブレット、またはモバイルのフィールドに新しい数値を入力できるようになりました。

Instagramフィードがモバイルデバイスで見栄え良く表示されるようにするには、WordPressウェブサイトのモバイルバージョンを表示するのが賢明です。

変更を終えたら、「カスタマイズ」リンクをクリックします。これにより、メインのSmash Balloonエディタに戻り、次の設定画面である「配色」を探索する準備が整います。

デフォルトでは、Smash BalloonはWordPressテーマから継承されたカラースキームを使用しますが、「ライト」と「ダーク」のテーマもあり、Instagramフィードに使用したい場合があります。

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

デフォルトでは、Smash BalloonはInstagramフィードにヘッダーを追加します。これは、プロフィール写真とページ名です。これにより、訪問者がこれらの画像がどこから来ているのかを理解するのに役立つ追加のコンテキストを提供できます。

このセクションの外観を変更するには、メイン設定画面に戻り、「ヘッダー」を選択してください。

この画面では、背景色を変更する、Instagramのプロフィールを表示する、ヘッダーサイズを変更するなどを行うことができます。

デフォルトでは、ヘッダーにはInstagramのプロフィール写真が含まれています。ただし、サイトのカスタムロゴなど、別の画像を表示したい場合があります。

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

別のプロフィールを追加することもできます。たとえば、Instagramページへの訪問を促す行動喚起を追加することもできます。

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

ヘッダーの外観に満足したら、「カスタマイズ」リンクをクリックしてメイン設定画面に戻ります。

次に、「投稿」をクリックする必要があります。

まず、Instagramフィード内の個々の投稿のボックスレイアウトと通常のレイアウトを切り替えることができます。

これを行うには、「投稿スタイル」を選択します。

使用したいレイアウトを選択してクリックできるようになりました。

「ボックス」を選択した場合、背景色を変更したり、ボックスシャドウを追加することができます。また、境界線の半径を増やして角を丸くすることもできます。

変更に満足したら、「投稿」リンクをクリックして前のSmash Balloon画面に戻ってください。

今回は、「画像と動画」を選択します。

Smash BalloonはInstagramの写真を自動的に分析し、最適な解像度で表示します。これらはWordPressの速度とパフォーマンスを向上させるように設計されているため、これらのデフォルト設定を使用することをお勧めします。ただし、必要に応じてInstagramの画像を拡大または縮小することもできます。

画像サイズを変更するには、[解像度]ドロップダウンを開き、リストから[WordPressの画像サイズ]のいずれかを選択するだけです。

再度、「投稿」リンクをクリックして前の画面に戻ります。

この時間で、「キャプション」を選択します。次の画面で、「有効にする」スライダーをクリックすると、各画像の横にInstagramのキャプションを表示できます。

これにより、新しいカスタマイズオプションが表示され、テキストのサイズと色を変更したり、最大テキスト長を設定したりできます。

それが終わったら、「投稿」リンクをクリックして前の画面に戻ります。

次の設定は「いいねとコメントの概要」です。

ここで、各画像のいいねとコメントの合計数を追加または非表示にできます。Instagramの投稿で多くのエンゲージメントが得られた場合、これらの数字は人々があなたのInstagramページにアクセスしたり、ソーシャルメディアでフォローを開始したりすることを奨励する可能性があります。

いつものように、前の画面に戻るには「投稿」をクリックする必要があります。

最後のオプションは「ホバー状態」で、マウスを投稿にホバーしたときにSmash Balloonが追加するオーバーレイです。

ここでは、Smash Balloonが投稿にマウスカーソルを合わせたときに表示する情報を、「表示する情報」の設定で選択できます。

ホバーオーバーレイの色を変更することもできます。

変更内容に満足したら、「カスタマイズ」リンクをクリックします。

これでSmash Balloonのメイン設定ページに戻り、「もっと読み込むボタン」タブをクリックできます。

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

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

このボタンは有効にしたままにすることをお勧めしますが、削除することもできます。たとえば、サイトで表示できる写真の数を制限することで、Instagramへのアクセスを促すことができます。

ボタンを削除するには、「有効」スライダーをオフにしてグレー表示にするだけです。

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

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

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

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

「テキスト」フィールドに入力することで、これを独自のメッセージに置き換えることができます。

Smash Balloonには、訪問者がウェブサイトを離れることなくInstagramの写真や動画を開くことができる組み込みのライトボックスが付属しています。

この機能を設定するには、Smash Balloonのメイン設定画面に戻り、「ライトボックス」をクリックしてください。

ここで、Smash Balloonが表示するコメント数をライトボックスで変更できます。

ライトボックス機能を使用しない場合は、「有効化」スライダーを使用して無効にすることができます。

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

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

WordPressでInstagram写真のフィードを表示する

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

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

このコードを取得するには、Instagram Feed » All Feedsに移動し、「ショートコード」の下のテキストをコピーする必要があります。

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

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

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

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

ブロックには、デフォルトでInstagramフィードの1つが表示されます。別のSmash Balloonフィードを表示したい場合は、右側のメニューで「ショートコード設定」を見つけます。

ここで、ショートコードを追加してから「変更を適用」をクリックします。

カスタムInstagramフィードの外観に満足したら、ページを発行または更新に進むことができます。

別の方法として、Instagramフィードウィジェットをウェブサイトに追加することもできます。これは、サイトのすべてのページにInstagramフィードを表示するのに最適な方法です。たとえば、Instagramウィジェットを[WordPressテーマ]のサイドバーまたはフッターに追加できます。

Instagramフィードウィジェットをサイトに追加するには、外観 » ウィジェットに移動します。次に、画面上部にある青い「+」アイコンをクリックできます。

表示されるパネルで、「Instagram Feed」と入力して適切なウィジェットを見つけます。

次の画像でわかるように、2つのInstagramフィードウィジェットがありますので、正しい方を使用していることを確認してください。

次に、Instagramフィードを表示したいサイドバーや同様のセクションなどのエリアにウィジェットをドラッグアンドドロップします。

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

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

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

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

単に[Instagramフィード » すべてのフィード]に移動し、[ショートコード]列のコードをコピーします。これで、このコードを任意のショートコードブロックに追加できます。ショートコードの配置については、[ショートコードの追加方法]に関するガイドを参照してください。

ブロック対応テーマを使用していますか？その場合は、フルサイトエディターを使用して、WordPressウェブサイトのどこにでもInstagramフィードブロックを追加できます。

ダッシュボードで、外観 » エディターに移動します。

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

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

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

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

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

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

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

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

それが終わったら、「Instagramフィード」と入力する必要があります。

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

いつものように、Smash Balloon はデフォルトでフィードを表示します。上記と同じ手順でショートコードを追加することで、このフィードを変更できます。

ボーナス：顧客がInstagram経由であなたの製品を購入できるようにする

オンラインストアを運営している場合は、カスタムInstagramフィードを使用して簡単に商品を販売することもできます。

[Smash Balloon Instagram Feed Pro]を使用すると、Instagramの画像に商品リンクをタグ付けできるため、ユーザーは商品ページをナビゲートする代わりに、クリックして直接購入できます。これにより、ストアでの売上を増やし、利益を向上させることができます。

詳細については、[WordPressにInstagramショッピング可能な画像を追加する方法]に関する完全なガイドを参照してください。

この記事がWordPressでカスタムInstagramフィードを作成する方法を学ぶのに役立ったことを願っています。また、エンゲージメントを高めるために[WordPressにFacebookのプレゼントを追加する方法]や、初心者向けの[ソーシャルメディア統計]のリストについても学びたいかもしれません。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。