WordPressにInstagramのフッターウィジェットを追加する方法(スクリーンショット付き)
クリック・ソーシャル

ClickSocialを使ってWordPressから直接ソーシャルメディア投稿をスケジュールする

無料トライアル開始 アングルライト
ホーム ブログ WordPressにInstagramのフッターウィジェットを追加する方法(+スクリーンショット)

WordPressにInstagramのフッターウィジェットを追加する方法(+スクリーンショット)

WordPressにInstagramのフッターウィジェットを追加する方法

WordPress サイトに Instagram フッター ウィジェットを追加して、ウェブサイトのビジュアルを強化したいですか?

フッター セクションに Instagram フィードを掲載すると、最新の投稿が表示され、エンゲージメントが高まり、フォロワーの増加につながります。

しかし、Instagram フッター ウィジェットを WordPress で完璧に表示するのは難しい場合があります。特に、コーディングや技術的な手順に慣れていない場合はなおさらです。

初めて Instagram ウィジェットをサイトのフッターに追加しようとしたとき、見栄えがよく完璧に機能する解決策を見つけるまで、いくつかのハードルに遭遇しました。

Smash Balloon で長年にわたり、WordPress ユーザーが Instagram コンテンツを美しく表示できるようサポートしてきた経験から、あらゆるスキル レベルに最適な方法を学んできました。

この記事では、Instagram フッター ウィジェットを WordPress に追加する方法について詳しく説明します。このプロセスにまったく慣れていない場合でも、スクリーンショットを使用して手順を追って説明します。

Instagramのフッターウィジェットを埋め込む2つの方法

あなたのウェブサイトのフッターにInstagramのウィジェットを表示したいですか?2つの方法があります:

  1. マニュアル:公式アプリ開発者として承認され、サイトに追加する前にコードスニペットを生成します。
  2. 自動で:信頼できるWordPressプラグインを使って、Instagramのコンテンツを自動的にフッターに埋め込む。

手作業がいかに時間がかかり、複雑であるかは想像がつくと思う。さらに、アプリ開発者としてインスタグラムに承認される必要がある。

代わりに、Instagramのフィードプラグインを使用し、5つのステップで簡単にInstagramのフッターウィジェットを埋め込むことができます:

インスタグラムのフッターをサイトに埋め込む方法のビデオチュートリアル

素晴らしいオプションはたくさんあるが、このチュートリアルではInstagram Feed Proを使うことにしよう。

使い方はとても簡単で、埋め込みコードも必要なく、セットアップも超高速だ。ウィジェットを埋め込むのに便利なWordPressウィジェットもあります。

プロからのアドバイス プラグインを選ぶ前に、ユーザーレビューをチェックすることを忘れずに。例えば、Instagram Feed Proは100万人以上のユーザーから4.9/5つ星の評価を得ています。

これらを踏まえて、Instagramのコンテンツをフッターに表示する手順を説明しよう。

ステップ1:Instagram Feed Proプラグインをインストールする

最初のステップは、Instagram Feed Proプラグインを入手することだ。

次に、WordPressプラグインをインストールするためのステップバイステップの手順に従って、先に進み、WordPressウェブサイトにプラグインをインストールします。

すでにウェブサイトにプラグインをインストール済みですか?はい!

次のステップは、プラグインを使用して新しいInstagramフィードを作成することです。これを行うには、WordPressのダッシュボードからInstagram Feed " All Feedsに 移動します。そして、新規追加を クリックして接続する。

インスタグラムフィードプロ

この後、ウェブサイトに掲載するインスタグラムのフィードの種類を選ぶことができる。選択肢は以下の通り:

  • ユーザーのタイムライン: 自分のアカウントに基づいてInstagramのフッターウィジェットを表示します。
  • 公開ハッシュタグ: 指定したハッシュタグに基づいてInstagramのフッターウィジェットを表示します。
  • タグ付き投稿: あなたのInstagramアカウントが他のユーザーによって言及されたり、タグ付けされた投稿を含むInstagramのフッターウィジェットを表示します。

複数のフィードを組み合わせて1つのInstagramフッターウィジェットに表示するために、ここで複数のオプションを選択することもできます。

インスタグラムのフィードタイプを選んだら、「次へ」 ボタンをクリックします。

ユーザーのタイムラインを選択 インスタグラムのフィードをインポート

これで新しいInstagramフィードが作成できたので、ステップ3に進み、このフィードのソースを追加することができる。

ステップ3:インスタグラムのアカウントに接続する

新しいフィードにインスタグラムからの投稿を表示するには、インスタグラムのアカウントに接続します。

そのためにはまず、 ソースの追加 ボタンをクリックする。

インスタグラム、フィードにソースを追加

そうすると、2種類の接続を選択できるポップアップが開きます:

  • ビジネス・ベーシック:自社のインスタグラムの投稿を表示する
  • ビジネス上級者向け: 投稿に加えてInstagramのハッシュタグやメンションを埋め込む

気に入ったオプションを選択したら、「接続」をクリックする。

インスタグラムのプロフィールタイプを選択

このガイドでは1つのアカウントからの投稿を埋め込むので、基本オプションを選んだ。

次のページで、Instagramと接続するボタンをクリックします。

インスタグラムに接続開始

これで、プラグインにInstagramアカウントへの読み取り専用 アクセス権を与えることができる。

読み取り専用アクセスとは、プラグインがあなたのデータを見ることができるだけで、変更は一切できないということです。ですから、Instagram Feed Proを使うのは安全です。

読み取り専用アクセスを確認するには、ポップアップで「許可 」をクリックするだけです。

インスタグラムの読み取り専用アクセスを許可する

これでWordPressサイトに戻ります。ここで、Next ボタンをクリックして次に進みます。

インスタグラムのフィードのソースとしてアカウントを確認する

ステップ4:Instagramフッターウィジェットをカスタマイズする

そうすると、Instagram Feed Proがあなたの投稿を取得し、Instagramウィジェットを作成します。

続行する前に、このウィジェットのテーマを選択できます。それぞれのテーマはアイコン、ヘッダー、ボーダーなどにユニークな外観を持っています:

  • デフォルト
  • モダン
  • ソーシャルウォール
  • 概要
  • オーバーラップ

テーマを選び、「次へ」をクリックする。

インスタグラムのテーマを選ぶ

その後、テンプレートを選ぶことで、さらにデザインを変えることができる:

  • デフォルト
  • シンプルなグリッド
  • シンプル・グリッドXL
  • シンプルな列
  • シンプルなカルーセル
  • 石工カード
  • カードグリッド
  • ハイライト

Simple Rowの ように、フッター専用にデザインされたテンプレートもある。

私は基本的なものを求めているので、デフォルトの オプションを選ぶよ。

テンプレートを選択したら、「Next」をクリックします。

フィードテンプレート インスタグラム

Instagramのフッターウィジェットの見た目をカスタマイズしたいですか?このプラグインがあなたをカバーします!

ビジュアル フィード エディターを使用すると、数回クリックするだけで Instagram コンテンツの外観と雰囲気を簡単に制御できます。

左側のパネルでは、Instagramフッターウィジェットのサイズ、フィードレイアウト、フィードテーマ、カラースキーム、ヘッダーデザインなどを簡単に変更できます。また、個々のInstagram投稿をカスタマイズするオプションも用意されています。

ライブフィードエディタ インスタグラムフィード

右側には、インスタグラムのフッターウィジェットのライブプレビューがあり、リアルタイムで変更を確認することができます。

フッターのデザインをより自由にコントロールするために、レイアウトをカスタマイズすることもできます。フィードレイアウトオプションを クリックしてください。

ショッパブル・インスタグラムのフィード・レイアウト

ここから、あなたのインスタグラムフィード用に4つの既製レイアウトタイプから選ぶことができる:

  • グリッド
  • カルーセル
  • 石工
  • ハイライト
フィード・レイアウト・オプション・インスタグラム・フィード・プロ

グリッドレイアウトを 選択すると、Instagramフッターウィジェットを固定正方形画像サイズの標準グリッドに表示できます。

このタイプのレイアウトは、Instagramウィジェットをサイドバーエリアに追加したい場合に適している。

ワードプレスのフィードをサイドバーに表示する例

フッターエリアにより 適したものをお望みですか?それなら、カルーセルレイアウトを 選択することができます。このように、訪問者がスクロールできる美しいスライドショーでインスタグラムのフィードを表示できます。

インスタグラム・フッター・ウィジェット

インスタグラムの写真をオリジナルの横長または縦長のフォーマットで表示したいですか?

それなら、メイソン・レイアウトが おすすめだ。このように、フッターウィジェットとしてコンテンツを紹介することを目的としたインスタグラムのギャラリーに最適です:

インスタグラム・フィード

最後に、WordPressのInstagramフッターウィジェットでハイライトしたい特定の投稿がある場合は、ハイライトレイアウトを 選択します。

ハイライトされた投稿は他の画像よりも2倍大きく表示されるため、このウィジェットをフッターエリアに表示することで、ブランドに関するポジティブな社会的証明を示すことができます。

ハイライト・インスタグラム・フィード・ウィジェットの例

Instagramフッターウィジェットのレイアウトを選択したら、「保存 」をクリックして選択を確定する。

次に、小さな カスタマイズ ボタンをクリックし、メインのカスタマイズオプションをもう一度開きます。

主なカスタマイズオプションに戻る

インスタグラムのフッターウィジェットの色を変更したいですか?ここの配色 オプションをクリックしてください。

配色オプションをクリック

ソーシャルメディア・ウィジェットには4つの異なるカラースキームから選ぶことができるので、インスタグラム・フィードのカラーオプションを設定するのは簡単です:

  • テーマからの継承:ワンクリックでサイトのカラーをコピーし、ブランディングにマッチさせる。
  • 明るい: 明るい背景と暗いフォントのインスタグラムフィード
  • ダーク: 明るいフォントの代わりに暗い背景を表示する。
  • カスタム: インスタグラムのフィードカラーをすべて手動で選択
インスタグラム・フィード・プロの配色オプション

色に満足したら保存 ボタンをクリックするだけです。

そうすれば、ライブフィードエディターを使って、ヘッダースタイル、フォローボタン、フィードサイズなど、残りのカスタマイズオプションを変更することができます。

フィードの見た目に満足したら、「保存 」をクリックし、以下の最後のステップに進みます。

ステップ5:Instagramフッターウィジェットをサイトに追加する

さて、いよいよInstagramのフッターウィジェットをWordPressウェブサイトに表示する時が来た。

このプラグインはWordPressとスムーズに連動するので、ライブフィードエディターで簡単にこれを行うことができる。

まず、ライブフィードエディタの右上にある埋め込み ボタンをクリックします。

インスタグラムのフィードを埋め込む

すると、インスタグラムのフィードを埋め込む場所を尋ねるポップアップが表示されます。WordPressのフッターに追加するので、ここでAdd to a Widget オプションをクリックします。

インスタグラムのフィードをウィジェットに追加 instagram feed pro

WordPressサイトのウィジェットページが 開きます。

フッターパネルを クリックしてください。

ソーシャルメディア・ウィジェットを埋め込むためにフッター・パネルを開く

プラス(+)アイコンをクリックして、新しいウィジェットを追加します。そして、Instagram Feed ウィジェットを探してクリックする。

サイドバーにインスタグラム・ウィジェットを追加する

最後に、InstagramのフッターウィジェットがWordPressウェブサイトに自動的に追加されるように、「更新」をクリックします。

これで、あなたのウェブサイトの訪問者は、フッターエリアをチェックしたときに、このようにInstagramのフッターウィジェットを見ることができます:

フッターインスタグラムフィードウィジェット例

そして、それだけだ!

この初心者にやさしいチュートリアルの助けを借りて、InstagramのフッターウィジェットをWordPressウェブサイトに埋め込む方法を知ることができる。

Instagramウィジェットを使えば、ソーシャルメディアでの存在感を高め、あっという間に大量の新規顧客を獲得することができる。

Instagramマーケティングを次のレベルに引き上げ、WordPressでInstagramのフッターウィジェットを表示する準備はできていますか?

今すぐInstagram Feed Proを始めよう

インスタグラムをもっと活用したいですか?あなたのビジネスに最適なInstagramマーケティングのヒントをご覧ください。

その他のソーシャルメディア・マーケティング・ガイドとヒント

著者アバター
リアン・ラロヤ コンテンツマーケティングマネージャー
リアンヌはスマッシュバルーンでコンテンツマーケティングマネージャーを務め、WordPressコンテンツ、ソーシャルメディアマーケティング、ユーザー生成コンテンツ(UGC)、検索エンジン最適化(SEO)において12年以上の経験を持つ。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。