WordPressにInstagramショッピング可能な画像を簡単に追加する方法

Instagram の素晴らしい点の 1 つは、ショッピング可能な投稿機能です。写真に直接商品をタグ付けできるため、フォロワーはタップするだけで簡単に商品をショッピングできます。

しかし、落とし穴があります。これらの組み込みのショッピングタグは、WordPressサイトにInstagram投稿を埋め込んだ場合には機能しません。これは、販売機会を逃している可能性があることを意味します。

しかし、心配しないでください！Smash Balloonプラグインを使用して、WordPressにInstagramのショッピング可能な画像を追加する簡単な方法を見つけました。🛍

このソリューションを使用すると、サイトにショッピング可能なInstagramフィードを作成でき、ソーシャルメディアコンテンツを強力な販売ツールに変えるのに役立ちます。

この記事では、WordPressにInstagramの購入可能な画像を簡単に追加する方法を紹介します。

ショッピング可能なInstagramフィードとは？

ショッピング可能なInstagramフィードとは、各写真が商品ページにリンクされている一連の写真のことです。写真をクリックすると、写真に表示されている商品に移動します。

Instagram で写真に特別な商品タグが付いているのを見たことがある場合、この機能に慣れているかもしれません。たとえば次のようになります。

Instagram自体では、この機能は、アプリで見かけた商品をすぐに購入したいユーザーに役立ちます。そして、あなたが中小企業のオーナーであれば、ウェブサイトに埋め込んだInstagramフィードにもこの機能を取り入れたいと思うかもしれません。

これにプラグインが必要な主な理由は、Instagramの公式ショッピングタグが、ウェブサイトに投稿を埋め込むと消えてしまうためです。

そのため、Instagramにショップ可能な投稿があっても、ウェブサイトの訪問者は商品リンクを表示したりクリックしたりできません。プラグインは、そのようなショップ可能な体験をサイト上で直接再現するのに役立ちます。

ただし、設定が簡単ではありません。Facebookカタログ、商品カタログ、Facebookビジネスページを設定する必要があります。

さらに、これらのショッピング機能を使用するには、Instagram から承認を得る必要があります。

さらに重要なのは、ウェブサイトに商品タグ付きのInstagram投稿を埋め込んでも、そのタグが表示されない可能性があることです。つまり、多くの潜在的なコンバージョン機会を逃してしまう可能性があるということです。

幸いなことに、Smash Balloon Instagram Proを使えば簡単な代替手段があります。

それでは、WordPressウェブサイトにInstagramのショッピング可能な画像を簡単に追加する方法を見ていきましょう。

これらのクイックリンクを使用して、手順をナビゲートできます。

• ステップ 1: ショッパブル対応の Instagram 写真プラグインをインストールする
• ステップ2：InstagramアカウントをWordPressに接続する
• ステップ 3: Smash Balloon のショッパブル機能を有効にする
• ステップ4：ショップ可能なInstagramフィードをフィルタリングする
• ステップ5：ショッパブルInstagramフィードをカスタマイズする
• ステップ 6: WordPressにショッピング可能なInstagramフィードを埋め込む
• ショッパブルなInstagramフィードに関するよくある質問

ステップ 1: ショッパブル対応の Instagram 写真プラグインをインストールする

WordPressにInstagramのショッピング可能な画像を簡単に追加するには、Smash Balloon Instagram Proを使用するのが最善の方法です。

これは市場で最高のInstagram写真フィードプラグインであり、ウェブサイトで完全にカスタマイズ可能なショッパブルフィードを作成できます。

ショッピング可能な画像をInstagramに投稿すると、それらは自動的にサイトに表示されるため、訪問者は手動で追加することなく常に最新の投稿を見ることができます。

Smash Balloonプラグインを徹底的にテストした結果、非常に初心者フレンドリーであることがわかりました。詳細については、Smash Balloonの詳細レビューをご覧ください。

開始する前に、InstagramアカウントをFacebookページに接続する必要があります。

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

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

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

有効化したら、Instagram Feed » Settingsに移動し、「License Key」フィールドにライセンスキーを入力します。

この情報は、Smash Balloonウェブサイトのアカウントで確認できます。

キーを入力したら、「有効化」ボタンをクリックするだけです。

ステップ2：InstagramアカウントをWordPressに接続する

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

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

Instagramのタイムラインからショッパブルな画像を表示したいので、「ユーザータイムライン」を選択し、「次へ」をクリックします。

次に、ショッパブルな画像を取得する Instagram アカウントを選択します。

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

その後、個人またはビジネスのInstagramアカウントからショップ可能な画像を表示するかどうかを選択します。

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

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

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

その後、購入可能な画像が含まれるInstagramアカウントにリンクされているFacebookページの横にあるチェックボックスをオンにします。

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

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

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

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

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

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

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

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

プラグインは、Instagramの写真フィードを作成するようになります。

ステップ 3: Smash Balloon のショッパブル機能を有効にする

次に、Smash Balloon のショッパブル機能を有効にする必要があります。「設定」タブを選択し、「ショッパブルフィード」をクリックしてください。

この画面で、「有効にする」スライダーを青色になるように切り替えてください。

Smash Balloonは、Instagramフィードのすべての写真または動画に「追加」ボタンを表示するようになります。

ショップ可能な最初の投稿を見つけたら、その「追加」ボタンをクリックするだけです。

ここで、「商品リンク」フィールドに 商品またはサービス の URL を入力し、「追加」をクリックします。

これで、この写真をクリックすると、リンクされたURLが新しいタブで開きます。

すべての画像をショッピング可能にするには、これらの手順を繰り返してください。

投稿のURLを変更する必要がある場合は、マウスカーソルを合わせ、「更新」をクリックしてください。

すべてのリンクを追加したら、「保存」ボタンをクリックするのを忘れないでください。

訪問者がウェブサイト上のこれらの画像のいずれかをクリックすると、新しいタブで商品ページに直接移動し、シームレスなショッピング体験が生まれます。

ステップ4：ショッピング可能なInstagramフィードをフィルタリングする

デフォルトでは、Smash BalloonはInstagramアカウントのすべての画像と動画を表示します。ただし、ショップ可能なフィードを作成しているので、投稿をフィルタリングして、製品またはサービスにリンクする写真のみを表示したい場合があります。

これにより、買い物客はInstagramフィードの他の写真や動画に気を取られることなく、オンラインストアで商品を見つけることができます。

Smash Balloonを使用すると、キャプションに基づいてInstagram投稿を簡単にフィルタリングできます。ショッパブルなInstagram画像にキーワードやハッシュタグを追加するだけで、Smash Balloonで一致するフィルターを作成できます。

例えば、次の画像では、購入可能にしたいすべての画像に#ordernowハッシュタグを使用しています。

Smash Balloon でフィルターを作成するには、「設定」タブを選択します。

次に、「フィルターとモデレーション」をクリックします。

「投稿のみを表示」ボックスに、フィルターで使用したいハッシュタグまたはキーワードを入力します。

フィルターで複数の単語を使用するには、ハッシュタグまたはキーワードをコンマで区切ってください。

フィルターの設定に満足したら、「保存」ボタンをクリックします。

プレビューはすぐに更新されないことに注意してください。フィルターを実際に確認するには、ページを更新する必要があります。

ステップ5：ショッパブルInstagramフィードをカスタマイズする

ショップ可能なフィードに表示される写真や動画に満足したら、フィードの外観を変更したくなるかもしれません。

ショップ可能なInstagramフィードをカスタマイズするには、「カスタマイズ」タブをクリックするだけです。左側には、ソーシャルメディアフィードの外観を変更するために使用できるすべての設定があります。

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

まず、「フィードレイアウト」を選択します。ここで、ハイライトやカルーセルなど、ショッピング可能なフィードのさまざまなレイアウトを選択できます。

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

レイアウトによっては、フィードを微調整するために使用できる追加の設定が表示されます。

たとえば、「ハイライト」を選択した場合、パターン、投稿ID、または特定のハッシュタグに基づいて投稿をハイライトするようにSmash Balloonに指示できます。これは、最も人気のある商品をハイライト表示するのに役立ちます。

ショッピング可能なInstagramフィードが、デスクトップだけでなくスマートフォンやタブレットでも同じように見栄えが良いことを確認したいと思うでしょう。

デフォルトでは、Smash Balloonはデスクトップコンピューターとモバイルデバイスで同じ数の写真を表示します。

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

「投稿数」と「列」セクションの設定を変更することで、モバイルデバイスで表示されるショップ可能な写真を少なくすることができます。

変更を加えたら、「カスタマイズ」リンクをクリックします。これにより、メインのSmash Balloonエディタに戻り、次のオプションである「カラー スキーム」を探索する準備が整います。

デフォルトでは、Smash BalloonはあなたのWordPressテーマから継承された配色を使用しますが、代わりにショッパブルフィードに使用したい「ライト」と「ダーク」のテーマもあります。

他のオプションとして、「カスタム」を選択して独自のカラーテーマを作成することもできます。

次に、コントロールを使用してリンクの色、背景色、フィードのテキストの色などを変更します。

デフォルトでは、Smash Balloonはショップ可能なフィードにヘッダーを追加します。これは、プロフィール写真とページ名です。

このセクションの外観を変更するには、左側のメニューで「ヘッダー」をクリックし、設定を使用して背景色、ヘッダーサイズを変更したり、Instagramのプロフィールテキストを追加したりできます。

別のバイオを追加することもできます。例えば、商品の購入を促したり、訪問者に限定クーポンコードを提供したりすることができます。

これらのコードの作成に関する詳細については、オンラインストア向けの最高のWordPressクーポンコードプラグインの専門家による選択をご覧ください。

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

これが完了したら、「カスタマイズ」をクリックして、Smash Balloonエディタのメイン画面に戻ります。

次に、「投稿」を選択します。

これにより、いくつかの異なるオプションがある画面が表示されます。

これらの設定を確認して、好きなように変更できますが、ここでは「キャプション」に焦点を当てます。

キャプションにショップ可能なリンクを追加した場合、テキストを目立たせることが重要です。たとえば、キャプションを大きくすることができます。

キャプションに別の色を使用することもできます。

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

ここには、「ホバー状態」オプションもあります。これは、ホバーするとSmash Balloonが投稿に追加するオーバーレイです。

これにより、訪問者はInstagramの投稿を開く前に、キャプション内のリンクを確認できます。

この画面では、設定を使用して目を引く色のオーバーレイを作成できます。

「ホバー状態」を選択すると、各投稿にカーソルを合わせたときに表示される背景色とテキストの色を変更できるようになります。

「表示する情報」の下に、Smash Balloonがオーバーレイの一部として表示できるさまざまな情報が表示されます。表示したい各情報の横にあるチェックボックスをオンにするだけです。

キャプションに購入可能なリンクを追加する場合は、「キャプション」を有効にしたままにしてください。

変更に満足したら、「カスタマイズ」をクリックして、メインのSmash Balloonエディタ画面に戻ります。これで、次のオプションである「もっと読み込むボタン」を選択できます。

デフォルトでは、Smash BalloonはInstagramフィードの下部に「さらに読み込む」ボタンを追加するため、訪問者はショッパブルな投稿をスクロールできます。

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

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

より多くの売上を得るために「もっと読み込む」ボタンを有効にしておくことをお勧めしますが、削除することもできます。

例えば、あなたのオンラインマーケットプレイスやストアで表示できる写真の数を制限することで、Instagramページへの訪問を促すことができます。

ボタンを削除するには、「有効」スライダーをクリックして、青からグレーに切り替えるだけです。

ショッパーが気に入れば、「Instagramでフォロー」ボタンを使って、ショッピング可能なフィードの下に表示されるInstagramアカウントをフォローすることを決定する場合があります。

これは非常に重要なボタンなので、「フォローボタン」をメインのSmash Balloonエディタ画面から選択して目立たせることをお勧めします。

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

デフォルトの「Instagramでフォロー」テキストを独自のメッセージに置き換えることもできます。

いつものように、これらの設定が完了したら、「カスタマイズ」をクリックしてメインのエディタ画面に戻ってください。

Smash Balloonのショップ可能機能が有効になっている場合、Instagramフィードの投稿をクリックすると新しいタブが開き、リンクされた商品ページに直接移動します。

ただし、ショッパブル機能が有効になっていない場合は、Smash Balloonのライトボックス機能を確認することをお勧めします。

この機能により、訪問者はウェブサイトを離れることなく、ライトボックスポップアップで画像や動画を開くことができます。その後、Instagramのキャプションにある購入可能なリンクをクリックできます。

ライトボックスを有効または無効にするには、左側のメニューから「ライトボックス」を選択するだけです。

ここで、「有効化」スライダーを使用してこの機能を削除または追加できます。

Smash Balloonがライトボックスに表示するコメントの数を変更することもできます。商品レビューと同様に、肯定的なコメントはより多くの商品やサービスの販売に役立ちます。

ただし、これらは気を散らす可能性もあるため、「コメント数」ボックスに最大数を入力したい場合があります。

または、「コメント」トグルをクリックしてコメントを完全に非表示にすることもできます。

Instagram フィードの外観に満足したら、変更を保存するために「保存」をクリックすることを忘れないでください。これで、ショッピング可能な Instagram フィードをウェブサイトに追加する準備が整いました。

ステップ 6: WordPressにショッピング可能なInstagramフィードを埋め込む

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

Smash Balloonプラグインを使用して複数のフィードを作成した場合、ウィジェットまたはブロックを使用する予定であれば、フィードのコードを知る必要があります。

このコードを取得するには、Instagram Feed » All Feeds に移動し、「ショートコード」列の値をコピーしてください。

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

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

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

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

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

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

サイドバーやそれに類するセクションなど、ウィジェット対応エリアにフィードを追加することもできます。これにより、訪問者はサイトのどのページからでもInstagramフィードを使って買い物をすることができます。

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

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

検索バーに「Instagram Feed」と入力し、公式のInstagramロゴが付いたウィジェットを選択します。これがSmash Balloonプラグインによって追加された正しいウィジェットです。

次に、ショッピング可能なInstagramフィードを表示したいエリアにウィジェットをドラッグアンドドロップするだけです。

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

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

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

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

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

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

詳細については、WordPressのフルサイト編集の使用に関する初心者向けガイドをご覧ください。

ショッパブルなInstagramフィードに関するよくある質問

ショッピング可能なInstagramフィードの追加に関して、読者からよく寄せられる質問をいくつかご紹介します。

1. これを機能させるには、Instagramビジネスアカウントが必要ですか？

はい、WordPressでショップ可能なInstagramフィードを表示するには、Facebookページに接続されたInstagramビジネスプロフィールが必要です。これは、ショップ可能なフィードに必要な製品タグ付け機能にアクセスするためのInstagram APIの要件です。

2. Smash Balloon Instagram Feedプラグインは無料ですか？

Smash Balloonは、標準のInstagramフィードを作成するための素晴らしい無料バージョンを提供しています。ただし、ショッピング可能なフィードを作成する機能は、Proプランで利用可能なプレミアム機能です。

3. ショッピング可能なInstagramフィードを追加すると、ウェブサイトの速度が低下しますか？

これはもっともな懸念ですが、Smash Balloonはパフォーマンスを最優先に設計されています。スマートキャッシュシステムを使用しており、フィードデータを保存するため、ページが読み込まれるたびにInstagramにクエリを実行する必要がなく、サイトの実行速度を維持します。

「購入可能な」リンクは、顧客をどこへ誘導しますか？

ショッパブルフィード内のリンクはお客様を直接あなたのウェブサイトの商品ページに誘導します。これにより、インスピレーションから購入までのスムーズな導線が生まれ、体験全体をあなたのサイト内で完結させ、販売を促進します。

この記事が、WordPress に Instagram ショッピング可能な画像を追加する方法を学ぶのに役立ったことを願っています。また、WordPress に TikTok 動画を埋め込む方法に関するガイドをご覧になるか、AI を使用してお金を稼ぐ方法に関する専門家のアドバイスをご覧ください。

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