WordPress に Instagram ウィジェットを追加する方法 (ステップバイステップ ガイド)

インスタグラム ワードプレス ウィジェット

 

WordPressブログに Instagram ウィジェットを追加する方法を知りたいですか? ブログで Instagram フィードを表示することは、読者とのエンゲージメントを高めたり、追加のコンテンツを提供したりするための優れた方法です。

Instagram アカウントを WordPress ブログに接続するの は難しいように思えるかもしれませんが、実際にはそうではありません。

この記事では、Instagram ウィジェットをブログに簡単に追加する方法を 2 つの方法で紹介します。手動と Instagram フィード WordPress プラグインを使用します。また、Instagram ウィジェットを追加してブログを成長させる方法をすべて見ていきます。

準備?

飛び込みましょう!

 

WordPress ウィジェットとは?

まず、WordPress を初めて使用する場合、WordPress ウィジェットとは何か疑問に思うかもしれません。

ウィジェットは基本的にコンテンツの小さなブロックで  、WordPress サイトのサイドバー、フッター、およびその他の領域に追加できます。

WordPress ウィジェットは、人気のあるブログ投稿の表示、フォームの追加、ソーシャル メディア フィードの表示など、さまざまな機能に利用できます。

以下の例では、Studio Mommy が Web サイトのフッターに Instagram ウィジェットを追加し、ソーシャル メディア アイコン、 ニュースレターのサインアップ フォームなど を追加しました。

instagram フィード スタジオ ママ

Instagram ウィジェットを WordPress に追加することは、ブログにとって特に有益です。

その理由を知るために読んでください。 

WordPress ブログに Instagram ウィジェットを追加する利点

Instagram ウィジェットを WordPress に追加すると、ウェブサイトを改善し、ブログを成長させるのに役立つ方法がたくさんあります。

それでは、ブログに Instagram フィードを追加する必要がある理由を詳しく見ていきましょう。 

訪問者により多くのコンテンツを提供する

ブログに Instagram フィードを追加すると、ウェブサイトの訪問者に、より興味深いコンテンツをチェックしてもらうことができます。最後の投稿を読んだ後にブログを離れる代わりに、Web サイトを離れることなく Instagram フィードをスクロールできます。

この余分なコンテンツにより、訪問者はあなたのウェブサイトにより長く滞在するようになります。

SEOを改善する

Instagram ウィジェットを WordPress に追加すると、Instagram キャプションがサイトに埋め込まれます。

これにより、検索エンジンがブログの内容をよりよく理解できるようになり 、SEO  (検索エンジン最適化) を改善し、サイトへのトラフィックを増やすことができます。 

エンゲージメントとフォロワーを増やす

あなたのブログの読者は、あなたが Instagramを利用していることを知らないかもしれません 。次に、Instagram ウィジェットをブログに追加することで、プラットフォームでアクティブであることを知らせることができます。

これにより、Instagram のフォロワーを増やし、ソーシャル メディアでの存在感を高めることができます。

さらに、読者があなたのブログであなたの最新の Instagram 投稿を閲覧できるようになると、いいねやコメントを付けることで、読者はあなたの投稿にもっと関与するようになります。 

ブログを手軽に更新

ブログに埋め込まれた Instagram フィードを使用すると、サイトを新しいコンテンツで簡単に最新の状態に保つことができます。Instagram に新しいコンテンツを投稿すると、ウェブサイトに自動的に表示されます。これにより、時間を節約でき、ブログがアクティブであることを示すことができます。 

社会的証明と信頼を築く

ユーザーが生成したコンテンツを読者からの証言として Instagram で共有する場合  、Instagram ウィジェットをサイトに追加すると、社会的証明と Web サイト訪問者との信頼を構築するのに役立ちます。

あなたのサイトのユーザーは、他の人があなたのブログを信頼していることを知り、熱心なファンになることにもつながります。

Instagram アカウントを WordPress にリンクする利点をすべて理解したところで、チュートリアルに進みましょう。 

WordPress に Instagram ウィジェットを追加する方法 (手動)

プラグインなしで WordPress に Instagram ウィジェットを追加したい場合は、手動で行うことができます。

プラグインを使用することをお勧めします。プラグインの方が簡単で、他にも多くの表示オプションとカスタマイズ オプションが用意されているからです。これについては、次のセクションで説明します。

また、手動の方法ではエラーが発生する可能性が高く、コードに慣れていないと修正が難しい場合があります。

ただし、Instagram ウィジェットを手動で追加するには、まず Instagram アカウントに移動し、ブログに表示する写真を選択します。

Instagram 投稿の右上隅にある 3 つの小さな点をクリックします。次に、[ 埋め込み] をクリックします 。

インスタグラムの埋め込み

次のステップで、青色の [ 埋め込みコードをコピー] ボタン をクリックします 。ここで、キャプションを含めるボックスをオフにして、必要に応じて埋め込みからキャプションを削除するオプションもあり ます 。

含まれているコードをコピーします

埋め込みコードをコピーしたら、WordPress エディターを使用して任意の投稿またはページに貼り付けるだけです。

埋め込みコードをコピーして、WordPress のサイドバーに Instagram ウィジェットを追加する場合は、WordPress ダッシュボードに移動します。次に、 外観»ウィジェットに移動します。

ウィジェット外観ダッシュボード

ウィジェット ページの左側に、使用可能なウィジェットのリストが表示されます。テキストウィジェット  を見つけて、サイトに表示するページの右側にドラッグします。 このチュートリアルでは、サイドバーに追加します。

テキストウィジェットをサイドバーにドラッグします

ウィジェットをサイトの目的の場所に配置したら、ウィジェットのドロップダウン矢印をクリックします。

ドロップダウンメニュー

これにより、先ほどコピーした Instagram 埋め込みコードを貼り付けることができるテキスト ボックスが開きます。埋め込みコードは、ビジュアル エディターではなくテキスト エディターに貼り付けてください 。

埋め込みコードの貼り付け

Instagram フィードのタイトルを追加することもできます。完了したら[ 保存]をクリック し ます 。

それで全部です。

ブログで Instagram ウィジェットをライブで表示できるようになりました。

Instagram サイドバー ウィジェット

上記の例からわかるように、WordPress に Instagram ウィジェットを手動で追加する場合、多くのカスタマイズ オプションはありません。

それでは、WordPress に Instagram ウィジェットを追加するためのより良い方法を見てみましょう。

WordPress に Instagram ウィジェットを追加する方法 (プラグインを使用)

Instagram ウィジェットを WordPress に追加する最も簡単で最良の方法は、プラグインを使用することです。Smash Balloon Instagram Feed Pro プラグインをお勧めし ます 。

instagram フィード プロ スマッシュ バルーン

Instagram Feed Pro は、  WordPress 向けの 最高評価 のInstagram プラグインです 。

この Smash Balloon プラグインを使用すると、数回クリックするだけで、WordPress ブロック エディターを使用するか、サイトの任意の場所にショートコードを貼り付けて、Instagram フィードをサイドバーのウィジェットとして簡単にブログの投稿またはページに追加できます。

さらに、Instagram Feed Pro には、強力でカスタマイズされた Instagram ウィジェットを作成するのに役立つ次のような優れた機能が付属しています。

  • 複数のレイアウト オプション – カルーセル、グリッド、ブリックワーク、ハイライトなどの組み込みのレイアウト オプションから選択します。 
  • ビジュアル モデレーション システム : 表示する投稿と非表示にする投稿を決定します。 
  • ソーシャル エンゲージメント : Instagram のストーリー、コメント、いいね、フォロー ボタンをフィードに表示します。 
  • レスポンシブデザイン : さまざまな画面サイズに自動的に調整され、フィードがモバイル フレンドリーになります。
  • 複数の Instagram フィード : サイト上のあらゆる種類の異なるフィードを必要に応じて表示します。 

Smash Balloon はプラグインの無料版も提供している ので、試してみることができます。

ただし、複数のレイアウト、コメントといいね、ハッシュタグ フィードなどの機能にアクセスするに は、プロ バージョンにアップグレードする必要があります 。

それでは、Smash Balloon を使用して WordPress に Instagram ウィジェットを追加する方法を段階的に見ていきましょう。 

ステップ 1: Instagram フィード プラグインをインストールする

まず、  Smash Balloon から Instagram Feed Proをダウンロード し、プラグインをインストールして有効にする必要があります。

まず、 WordPressプラグインのインストール方法に関するこの投稿で詳細な手順を確認して  ください  。 

ステップ 2: Instagram アカウントをプラグインに接続する

次に、Instagram アカウントを Smash Balloon プラグインとリンクする必要があります。これを行うには  、プラグインをダウンロードしてアクティブ化した後に表示される WordPress ダッシュボードのInstagram フィードボタンをクリックします。

これにより、Instagram フィード プラグインの [設定] ページが表示されます。青いボタン [  Instagram アカウントを接続する] をクリックします 。

コネクトインスタグラムアカウント

画面の指示に従って、Instagram アカウントを接続します。

最初のプロンプトでは、個人用 または ビジネス用の Instagram アカウントを接続するかどうかを尋ねられ ます 。

個人のビジネスアカウント

ハッシュタグ フィードやショッピング可能な投稿など、Smash Balloon Instagram フィードの一部の機能については、ビジネス用の Instagram アカウントが必要であることに注意してください。

後でいつでも変更できるので、今必要な Instagram アカウントの種類について心配する必要はありません。

Instagram アカウントの種類を選択し、[ 接続] をクリック して続行します。

それで全部です!Instagram アカウントが Instagram フィード プラグインに接続されました。 

ステップ 3: 表示する Instagram コンテンツを選択する

同じページで、Instagram ウィジェットに表示する Instagram コンテンツの種類を選択することもできます。

次の表示を選択できます。

  • 標準の Instagram フィード
  • 特定の公開ハッシュタグの写真を含むフィード
  • あなたがタグ付けされた写真のフィード
  • 複数の種類の飼料を含む混合飼料
インスタグラムフィードタイプ

最新の Instagram 投稿の単純なフィードを表示するには、[ユーザー アカウント] オプションを選択し、  [変更を 保存 ] をクリックします 。 

ステップ 4: Instagram ウィジェットのレイアウトを選択する

 Instagram フィード プラグインの [設定]ページに移動し、  [カスタマイズ] タブをクリックします 。

スマッシュバルーンカスタマイズカード

このページでは、次のようなカスタマイズ オプションを使用して、Instagram ウィジェットがブログでどのように表示されるかを決定できます。

  • 幅と高さ 
  • 背景色
  • 表示する写真の数
  • Instagramのバイオを表示/非表示
  • フォローボタンを追加する

Instagram ウィジェットのレイアウトの種類を選択することもできます。Smash Balloon の Instagram フィードでは、4 つの異なるレイアウト オプションから選択できます。

  • Grid  : 正方形の静止画像を含む標準グリッド
  • カルーセル : ユーザーがスクロールできる水平カルーセル
  • Masonry  – Instagram の写真を元の横または縦の形式で表示するギャラリー
  • ハイライト : 特定の写真がグリッド内で大きく表示されて強調表示されるギャラリー

このチュートリアルでは、次のような Grid レイアウトを選択します。

スマッシュバルーンインスタグラムグリッドレイアウト

必要なレイアウトのタイプを選択し、  [変更を 保存 ] をクリックします 。

ステップ 5: Instagram ウィジェットを WordPress に追加する

Instagramウィジェットをブログに追加する時が来ました!

Smash Balloon の Instagram フィード プラグインを使用すると、3 つの異なる方法でフィードを埋め込むことができます。

それぞれを見てみましょう。 

1.WordPress Instagramフィードブロック

WordPress ブロック エディターを使用して Instagram ウィジェットを Web サイトの新しいページに追加するには、まず [ ページ] » [新規追加] に移動し ます。

WordPress ブロック エディターで、 プラス (+)アイコンをクリック して WordPress ブロックを検索します。検索バーに「Instagram」と入力して、  WordPress フィード Instagram ブロックを見つけます 。

ワードプレスブロックウィジェット

ブロックをクリックしてページに追加します。

Instagram フィードが Web サイトでどのように表示されるかのプレビューが表示され、必要に応じて設定を変更できます。

ページを公開 して、Instagram フィード ウィジェットをブログでライブにします。

完成品の例を次に示します。

インスタグラムフィードスマッシュバルーン

同じ方法を使用して、サイトの既存のページまたは投稿に Instagram フィードを追加できます。 

2. ショートコード フィード Instagram

従来の WordPress エディターを使用している場合は、Instagram フィード ショートコードを使用して、サイトの投稿またはページにフィードを表示できます。

 Instagram フィード設定ページに移動し ます。[フィードを表示] タブ  で、提供されたショートコードをコピーします。

フィードショートコード

次に、ショートコードを投稿またはページ エディターに直接貼り付けるだけです。

ショートコードの貼り付け

公開]をクリックし て変更を保存し、サイトで Instagram フィードをアクティブにします。 

3. フィード Instagram ごとに WordPress をウィジェット化する

Instagram ウィジェットをフッターやメイン サイドバーなどのサイドバーに表示する場合は、Smash Balloon の組み込みの Instagram フィード ウィジェットを使用できます。 

 WordPress ダッシュボードから [ 外観] » [ウィジェット]に移動し ます。

左側で Instagram フィード ウィジェットを見つけて、選択したサイドバーにドラッグします。このチュートリアルでは、Instagram ウィジェットをメイン サイドバーに追加します。 

スマッシュバルーンウィジェット

設定では、タイトルを追加できます。完了したら  [ 保存 ] をクリックします 。 

サイトをプレビューすると、サイドバーに Instagram フィードが表示されます。 

サイドバー-インスタグラムフィード

結論です!

WordPress に Instagram ウィジェットを簡単に追加する方法を学習しました。Instagram フィードをブログに美しく表示することで、より興味深いコンテンツを読者に提供し、エンゲージメントを高め、ソーシャル メディアでの存在感を高めることができます。

Facebook フィードをブログにも表示しますか? WordPress に最適な Facebook プラグインのリスト をご覧 ください。また、WordPress に Facebook グループを埋め込む方法に関するチュートリアルを読むこともでき ます 。

 さらに役立つブログのヒントを得るために、メール ニュースレターを購読することを忘れないでください 。