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

Instagramフィードは、あなたのサイトを新鮮に保つと同時に、より多くの「いいね！」やシェア、Instagramのフォロワーを獲得することができます。複数のプラットフォームで視聴者とつながり、エンゲージメントを高めることができます。

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

この投稿では、WordPressサイトのカスタムInstagramフォトフィードを簡単に作成する方法を紹介する。

なぜWordPressサイトにInstagram Feedを含めるのか？

WordPressサイトにInstagramフィードを埋め込むことで、余分な作業をすることなく新鮮なコンテンツを訪問者に見せることができます。また、読者がInstagramであなたをフォローすることを促します。

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

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

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

ということで、WordPressでカスタムInstagramフォトフィードを作成する方法を見てみよう。

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

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

WordPressでFacebookとInstagramのoEmbed問題を解決する最も簡単な方法でもあります。

チュートリアルではいくつかのステップを取り上げますので、以下のクイックリンクから各セクションにジャンプしてください：

動画チュートリアル

Subscribe to WPBeginner

書面による指示を希望される方は、このまま読み進めてください。

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

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

有効化したら、WordPressダッシュボードからInstagram Feed ” Settingsページに移動します。

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

この情報は、Smash Balloonを購入した際に送られた確認メール、またはSmash Balloonのアカウントに記載されています。

有効化』ボタンをクリックしてください。

これでカスタムInstagramフィードを作成する準備ができました。始めるには、Instagram Feed ” All Feedsを選択し、’Add New’ボタンをクリックします。

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

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

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

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

そうしたら、「次へ」をクリックします。

自分のアカウントがタグ付けされた投稿を表示しますか？タグ投稿」を選択し、「投稿日：」をクリックしてください。

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

ソースの追加」ボタンをクリックします。

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

パーソナル」の隣にあるボタンを選択すると、Smash Balloonは初期設定でヘッダーにInstagramのアバターと経歴を含めません。ただし、プラグインの設定でInstagramのアバターと経歴を手動で追加することができます。

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

WordPressサイトに掲載したいInstagramアカウントを選択し、「次へ」をクリックします。

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

これで、「次へ」ボタンをクリックする必要がある。

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

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

この点を考慮し、すべてのスイッチを有効化したままにしておくことをお勧めします。フィードの設定に満足したら、「完了」をクリックしてください。

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

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

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

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

プラグインはInstagramのフォトフィードを作成し、ページ、投稿、ウィジェット対応エリアに追加できるようになります。

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

初期設定では、Smash Balloonはエディターでフィードを開き、カスタマイズできるようになっています。

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

これらの設定のほとんどは自明だが、いくつかの重要なエリアについて簡単に説明しよう。

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

また、初期設定で3枚目ごとに写真がハイライトされる「ハイライト」レイアウトもある。

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

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

スマートフォンやタブレット端末は一般的に画面が小さく、処理能力も低いため、モバイル端末ではInstagramの写真や動画の表示回数を減らした方がいいかもしれません。

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

初期設定では、Smash Ballonはデスクトップでは4カラム、タブレット端末では2カラム、モバイルでは個別カラムに写真を分割します。

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

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

Instagramフィードがモバイル端末で見栄えよく表示されるようにするには、WordPressサイトのモバイル版を表示するのが賢明です。

変更後、「カスタマイザー」をクリックします。これでSmash Balloonエディターのメイン画面に戻り、次の設定画面「配色」が表示されます。

初期設定では、Smash BalloonはWordPressテーマから引き継いだ配色を使用しますが、Instagramフィードに使用したい「ライト」と「ダーク」のテーマも用意されています。

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

初期設定では、Smash BalloonはInstagramフィードにヘッダーを追加し、プロフィール写真とページ名を表示します。これは、訪問者がこれらの画像がどこから来ているのかを理解できるように、便利な追加コンテキストを提供することができます。

このセクションの見栄えを変更するには、メイン設定画面に戻り、「ヘッダー」を選択する。

この画面では、背景色の変更、Instagramのバイオの表示、ヘッダーサイズの変更などができる。

初期設定では、ヘッダーにはInstagramのプロフィール写真が含まれています。しかし、サイトのカスタマイザーロゴなど、別の画像を表示したい場合もあるでしょう。

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

また、別のバイオを追加することもできる。例えば、あなたのInstagramページを訪問するよう促す行動喚起を追加することもできる。

ユニークなInstagramのバイオを作成するには、「カスタムバイオを追加」ボックスに入力するだけです。

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

投稿日’をクリックしてください。

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

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

使用するレイアウトをクリックして選択できます。

Boxed」を選択した場合は、背景色を変更したり、ボックスシャドウを追加したり、枠線の半径を大きくして角をカーブさせたりすることができる。

変更が完了したら、「投稿日：」をクリックして、過去のSmash Balloon画面に戻ります。

今度は「画像と動画」を選択する。

Smash Balloonは自動的にInstagramの写真を分析し、最適な解像度で表示します。WordPressのスピードとパフォーマンスを向上させるため、初期設定を使用することをお勧めします。ただし、必要に応じてInstagramの画像を大きくしたり小さくしたりすることができます。

画像サイズを変更するには、’Resolution’ ドロップダウンを開き、リストからWordPress初期設定の画像サイズを選択するだけです。

もう一度、「投稿」リンクをクリックして過去の投稿画面に戻る。

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

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

投稿」リンクをクリックすれば、過去の投稿画面に戻ることができる。

次の設定は「いいね！とコメントするサマリー」です。

ここでは、各画像の「いいね！」とコメントした合計数を追加または非表示にすることができます。Instagramの投稿が多くのエンゲージメントを獲得している場合、これらの数字は、人々があなたのInstagramページを訪問したり、ソーシャルメディアであなたをフォローし始めたりするきっかけになります。

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

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

ここでは、「表示する情報」の設定を使って、投稿にマウスオーバーしたときにSmash Balloonが表示する情報を選択できます。

マウスオーバーの色も変更できます。

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

Smash Balloonの設定ページに戻り、「Load More Button」タブをクリックします。

ここでは、背景色、テキスト色、マウスオーバーの状態を変更することで、「Load More」ボタンを目立たせることができます。

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

このボタンは有効化したままにしておくことをお勧めしますが、外すこともできます。例えば、サイト上で閲覧できる写真の枚数を制限することで、Instagramへの訪問を促すことができます。

ボタンを削除するには、「有効化」スライダーをオフに切り替えて灰色にするだけです。

訪問者が気に入れば、埋め込みフィードの下に表示される「Follow on Instagram」ボタンを使って購読を決めるかもしれない。

とても重要なボタンなので、目立たせるためにカスタマイザーを追加したいかもしれません。これを行うには、「カスタマイザー」を選択してメイン設定画面に戻ります。次に、左側のメニューから「フォローボタン」を選択します。

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

初期設定では、ボタンには「Instagramでフォロー」のラベルが表示される。

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

Smash Balloonにはライトボックスがビルトインされており、訪問者はサイトにいながらInstagramの写真や動画を開くことができます。

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

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

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

Instagramフィードの見た目に満足したら、「保存」をクリックして変更を保存するのをお忘れなく。

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

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

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

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

このコードを取得するには、Instagram Feed ” All Feedsにアクセスし、’Shortcode’の下にあるテキストをコピーする必要があります。

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

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

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

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

このブロックは、初期設定ではあなたのInstagramフィードの1つを表示します。別のSmash Balloonフィードを表示したい場合は、右側のメニューにある「ショートコード設定」を見つけてください。

ここで、ショートコードを追加し、「変更を適用」をクリックするだけです。

カスタムInstagramフィードの見た目に満足したら、ページを公開したり更新したりすることができる。

もう一つのオプションは、Instagram Feedウィジェットをサイトに追加することです。これは、サイトのすべてのページにInstagramフィードを表示するのに最適な方法だ。例えば、WordPressテーマのサイドバーやフッターにInstagramウィジェットを追加することもできる。

Instagram Feedウィジェットをサイトに追加するには、外観 ” ウィジェットにアクセスしてください。画面上部の青い「+」アイコンをクリックしてください。

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

以下の画像にあるように、Instagram Feedウィジェットは2つあるので、正しい方を使うようにしましょう。

次に、Instagramフィードを表示したいエリア（サイドバーなど）にウィジェットをドラッグするだけです。

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

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

更新」ボタンをクリックして、ウィジェットをライブにすることができます。詳細については、WordPressでウィジェットを追加して使用する方法のステップバイステップガイドを参照してください。

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

Instagram Feed ” All Feedsに行き、’Shortcode’カラムにあるコードをコピーするだけです。これで、このコードを任意のショートコードブロックに追加できます。ショートコードを配置する方法については、ショートコードを追加する方法のガイドをご覧ください。

ブロック有効化テーマをお使いですか？それなら、フルサイトエディターを使って、WordPressサイトのどこにでもInstagramフィードブロックを追加できます。

ダッシュボードで、外観 ” エディターと進みます。

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

Instagramフィードを別のエリアに追加したい場合は、「Template」または「Template Parts」のいずれかをクリックする。

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

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

WordPressにデザインのプレビューが表示されます。

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

テンプレートを選んだら、Instagramフォトフィードを追加したいエリアにマウスオーバーするだけ。

そして青い「＋」ボタンをクリックする。

そうしたら、「Instagram Feed」と入力する必要がある。

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

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

ボーナス：Instagramを通じてカスタマイザーに商品を購入してもらう

オンラインショップを持っているなら、カスタムInstagramフィードを使って簡単に商品を販売することもできる。

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

詳しくは、WordPressでInstagramのShoppable画像を追加する方法の完全ガイドをご覧ください。

この投稿が、WordPressでカスタムInstagramフィードを作成する方法を学ぶのにお役に立てば幸いです。また、WordPressでFacebookのプレゼント企画を追加してエンゲージメントを高める方法や、初心者のためのソーシャルメディア統計リストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.