Elementor ウェブサイトに Instagram フィードを表示する [ステップバイステップ]
公開: 2023-02-13WordPress ウェブサイト用の Elementor Instagram フィードを作成したいですか?
このステップバイステップ ガイドでは、 Spotlight という名前の無料の非技術的なプラグインを使用して、Instagram フィードを Elementor に追加する方法を学習します。
技術的な知識やお金は必要ありません。チュートリアルに従うだけで、すぐに使い始めることができます。
ステップバイステップ ガイド: Elementor Web サイトに Instagram フィードを表示する
始める準備はできましたか？ Elementor Instagram フィードを表示する方法のステップバイステップ ガイドを次に示します。
ステップ 1: Instagram フィード プラグインをインストールして有効化する
開始するには、Spotlight Instagram フィード プラグインをインストールして有効にする必要があります。
繰り返しますが、Spotlight は無料で使用でき、Elementor と 100% 互換性があります。
無料の Spotlight プラグインは WordPress.org にリストされているため、次の手順に従ってインストールできます。
- WordPress ダッシュボードを開きます。
- プラグイン → 新規追加に移動します。
- 「スポットライト」で検索してください。
- [今すぐインストール]ボタンをクリックします。
- インストール プロセスが完了したら、 [アクティブ化]ボタンをクリックして Spotlight プラグインをアクティブ化します。
ステップ 2: Instagram アクセス トークンを作成する
次に、WordPress サイトが Instagram に接続できるようにする Instagram Access Token を作成する必要があります。
少し技術的に聞こえるかもしれませんが、ボタンをいくつかクリックするだけで、全部で 30 秒ほどかかります。
自分の個人アカウントを使用している場合、Spotlight ではアカウントを直接接続することもできます (この場合、次のステップにスキップするオプションがあります)。 ただし、クライアントのアカウントの接続 (クライアントの Web サイトを構築している場合) を含め、どのような設定でも機能するため、Instagram アクセス トークン方式を使用します。
Instagram アクセス トークンを作成するには、このページにアクセスしてください。
または、クライアントの Web サイトを構築している場合は、クライアントにこのページにアクセスして同じ手順に従うように依頼してください。
次に、個人の Instagram アカウントとビジネス アカウントのどちらを接続するかに基づいて、関連する[アクセス トークンを生成する]ボタンをクリックします。
これにより、Instagram からポップアップ画面が開き、Spotlight にアカウントへのアクセス許可を与えるかどうかを尋ねられます。
ポップアップで[許可]ボタンをクリックします。
[許可]をクリックすると、元のページに Instagram アクセス トークンが表示されます。
すぐに必要になるため、このアクセス トークンを安全な場所にコピーします。
または、サイトを構築している開発者と協力している場合は、開発者がプラグインのセットアップを続行できるように、このアクセス トークンを開発者と共有する必要があります。
ステップ 3: Instagram アカウントを Elementor Web サイトに接続する
これで、この Instagram アクセス トークンを WordPress ダッシュボードに追加して、Elementor Web サイトを Instagram に接続できます。
- WordPress ダッシュボードに戻ります。
- Instagram フィード → 設定に移動します。
- Instagram アクセス トークンをInstagram/Facebook アクセス トークンボックスに貼り付けます。
- [接続]ボタンをクリックします。
自分の Instagram アカウントだけで作業している場合は、[個人アカウントを接続]または[ビジネス アカウントを接続]ボタンをクリックして直接接続することもできます。
Connectをクリックすると、次の成功メッセージが表示されます。
個人アカウントを接続している場合は、カスタムの写真と自己紹介テキストを追加するオプションも表示されます. [はい]をクリックして、今すぐ実行できます。 または、Elementor Instagram フィードを構成したら、後でいつでも追加できます。
といえば…
ステップ 4: Instagram フィードを設定する
Instagram アカウントを接続したので、最初の Elementor Instagram フィードをセットアップする準備が整いました。
これを行うには、WordPress ダッシュボードのInstagram フィード → フィードに移動します。
飼料の種類を選択
まず、表示するコンテンツの種類を選択します。
Spotlight の無料版では、自分の Instagram 投稿のフィードを表示できます。 ただし、Spotlight Pro には、ハッシュタグに基づくフィードや、アカウントにタグを付けた投稿など、さらに多くのオプションが追加されています。
Spotlight Pro を試してみたい場合は、Spotlight Pro の 14 日間の無料試用版にアクセスして、その仕組みを確認できます (クレジット カードは不要です)。右上隅にある [14 日間の無料試用] ボタンをクリックするだけです。
Elementor Instagram フィード チュートリアルでは、 [My Instagram posts]オプションを使用します。
次に、 [次のステップ]をクリックして先に進みます。
テンプレートを選ぶ
次に、Elementor Instagram フィードのレイアウトとデザインを制御できる Spotlight のテンプレートの 1 つを選択できます。
無料版では 6 つの異なるテンプレートが提供されますが、Spotlight Pro ではさらに 8 つのテンプレートが追加されます。
この例では、無料のクラシックフィード テンプレートを選択しますが、必要に応じて別のテンプレートを自由に選択できます。
選択したら、 [次のステップ]ボタンをクリックして先に進みます。
Instagram アカウントを選択してください
次のステップで、接続とカスタマイズを求めるメッセージが表示されます。 ただし、Instagram アカウントは既に接続されているため、ここでは何もする必要はありません。
先に進むには、 [接続とカスタマイズ]ボタンをクリックします。
Elementor Instagram フィードをカスタマイズする
これで、選択したテンプレートをさらにカスタマイズできる Spotlight カスタマイザー ツールが表示されます。
開始するには、 [これらのアカウントからの投稿を表示]見出しの下で、前の手順で接続したアカウントを選択します。
これにより、フィードのライブ プレビューが更新され、Instagram アカウントからの実際の投稿が使用されます。
次に、 [デザイン]タブに移動して、Elementor Instagram フィード テンプレートをカスタマイズできます。
プラグインの無料バージョンでここで行うことができる選択のいくつかを次に示します。
- 表示する投稿の数と列数を選択します。
- フィードの順序を調整します。 デフォルトでは、最新の投稿が最初に表示されますが、必要に応じてこれを変更できます。
- ユーザーが投稿をクリックしたときに投稿を開く方法を選択します。
- フィードのサイズと間隔を調整します。
- フィード アイテムの上に表示されるフィード ヘッダーをカスタマイズします。
- [Instagram でフォロー]ボタンのスタイルとテキストを構成します。
- [投稿をさらに読み込む]ボタンのスタイルとテキストを構成します。
- さらに細かく制御したい場合は、独自のカスタム CSS を追加します。
Spotlight Pro を使用すると、キャプション、いいね、コメントなどの詳細をさらに細かく制御できます。
Spotlight Pro ユーザーは、他のタブにもアクセスして、フィード コンテンツをフィルタリングおよびモデレートしたり、フィード プロモーションを設定したりできます。
フィードの外観に満足したら、右上隅にある[保存]ボタンをクリックしてください。
次に、Instagram フィードを Elementor に埋め込む方法に移りましょう。
ステップ 5: Elementor に Instagram フィードを埋め込む
Spotlight には、Elementor Instagram フィードを埋め込む 2 つの方法があります。
- Spotlight (無料) – 通常の Spotlight WordPress ウィジェットを使用して、フィードを Elementor に追加できます。 このウィジェットは Elementor インターフェイスから直接追加できますが、Elementor からフィード設定をカスタマイズすることはできません。
- Spotlight Pro – 専用の Spotlight Instagram フィード Elementor ウィジェットを取得すると、フィードを埋め込むだけでなく、Elementor インターフェイスから直接そのデザインとスタイルをさらに構成することもできます.
両方のオプションを見ていきます…
どちらの方法でも、Elementor Instagram フィードを追加するコンテンツの Elementor エディターを開くことから始めることができます。
スポットライト (無料)
無料版の Spotlight を使用している場合は、Elementor サイドバーのWordPressセクションまで下にスクロールし、オプションのリストを展開します。
次に、 Spotlight Instagram フィード ウィジェットを、フィードを表示する Elementor デザインにドラッグします。
ウィジェットを追加すると、サイドバーに 2 つのオプションが表示されます。
- タイトルを追加します (または空白のままにします)。
- 前のステップで作成した Instagram フィードを選択します。
次に、 [適用]をクリックします。
[詳細設定]タブを使用して、間隔や余白などの詳細を調整することもできます。
Elementor エディターでフィードのライブ プレビューが表示されない場合があります。
ただし、ページのライブ プレビューまたはライブ バージョンを開くと、Elementor Instagram フィードが表示されます。
スポットライト プロ
Spotlight Pro を使用している場合は、専用の Spotlight Instagram Feed Elementor ウィジェットを取得できます。
このウィジェットを使用すると、Elementor エディターでライブ プレビューを表示できるだけでなく、Elementor インターフェイスから直接 Instagram フィードをカスタマイズ (および作成) することもできます。
繰り返しになりますが、これを試してみたい場合は、Spotlight Pro の 14 日間の無料試用版を入手できます。クレジット カードは必要ありません。
名前でウィジェットを検索するか、Elementor のウィジェットの[全般]セクションで見つけることができます。
ウィジェットを追加すると、Elementor Instagram フィードのプレビューがすぐに表示されます。
必要に応じて、 [編集]ボタンをクリックして、Elementor から直接フィードの設定を編集できます。 または、複数のフィードを表示する場合は、新しいフィードを作成することもできます。
ステップ 6: Instagram フィードをポップアップで表示する
この最後のステップはオプションです…
しかし、Elementor のポップアップに Instagram フィードを表示したい場合は、いくつかのオプションがあります。
まず、Spotlight には、訪問者がクリックしたときに個々の投稿をポップアップで表示する組み込み機能が含まれています。 これは、無料版と有料版の両方で利用できます。
これがどのように見えるかの例です：
この設定を有効または調整するには、 [フィード オプション]の下の [次の場所で投稿を開く]設定を[ポップアップ] ボックスに設定します。
Spotlight Pro ユーザーは、ポップアップ ライトボックス設定を使用してポップアップをさらに構成できます。
Instagram フィード全体をポップアップで表示したい場合は、いくつかのオプションがあります。
- Elementor Pro をお持ちの場合は、Elementor Popup Builder で作成したポップアップに Spotlight Instagram フィード ウィジェットを追加できます。 ウィジェットをポップアップ デザインに追加するときは、前の手順と同じ手順に従ってください。
- Popup Maker などの任意の WordPress ポップアップ プラグインを使用できます。 ポップアップにフィードを表示するには、Spotlight ショートコードを使用できます。
結論
これで、無料の Spotlight プラグインを使用して Elementor Instagram フィードを表示する方法に関するガイドを締めくくります。
このガイドのすべてに従って、お金をかけずに Elementor Instagram フィードを作成できます。
通常の Spotlight WordPress ウィジェットの代わりに使用できる専用の Elementor Instagram フィード ウィジェットなど、さらに多くの機能が必要な場合は、Spotlight Pro にアップグレードできます。
Spotlight Pro は、クレジット カードを必要としない 14 日間の無料試用版を提供するため、何かをコミットする前にいつでもプレミアム機能をテストできます。