プラグインなしでWordPressにInstagramのフィードを埋め込む方法
ホーム ブログ プラグインなしでWordPressにInstagramのフィードを埋め込む方法

プラグインなしでWordPressにInstagramのフィードを埋め込む方法

プラグインなしでWordPressにInstagramのフィードを追加する - コピー

プラグインを使わずにインスタグラムのフィードをワードプレスのウェブサイトに追加する簡単な方法を知りたいですか?

インスタグラムのフィードをサイトに表示することで、手間をかけずにアカウントの露出を高めることができます。また、見込み客とエンゲージする新鮮な方法を提供します。

さらに、私たちの調査によると、インスタグラムのコンテンツを見せることで、長期的には顧客のコンバージョン率を高めることができる。

これが私の個人的な経験に基づく簡単な答えです:プラグインなしでフィードを埋め込むことは、自分でアプリをコーディングする方法を知らない限り不可能です。

この記事では、プラグインを使わずにWordPressにInstagramの投稿を1つだけ 埋め込む方法を紹介する。

インスタグラムのフィードを埋め込むには、プラグインを使うのが一番簡単でいい。

ご心配なく、このプラグインを使ってもサイトが遅くなることはありません。超高速に設計されています。

この記事で

クイック比較プラグインとプラグインなし?

特徴スマッシュ・バルーンのインスタグラム・フィード・プロを使うプラグインを使用しない
🛠️ セットアップの複雑さ 超簡単セットアップ!5分以内にフィードを設定し、埋め込むことができます。アプリ開発者としての承認が必要で、複雑なコーディングを伴う。
コーディング要件 コーディング不要。非技術者に最適です!JavaScriptとHTMLを含む、かなりのコーディングが必要。
🚀 機能へのアクセス 複数のInstagramフィードやハッシュタグフィードなどの高度な機能にフルアクセス。最新の20枚の画像を1つのフィードに限定して表示する。
🎨 カスタマイズ レイアウトやスタイルを数クリックで簡単にカスタマイズできます!カスタマイズは、高度なコーディング・スキルがないと難しい。
ヘルプ&サポートWordPressへのInstagramフィードの埋め込みをサポートする親切なサポートチームへのアクセス専任のサポートはなく、試行錯誤するか、開発者を雇うことになる。
テイクアウトInstagramのフィードを素早く簡単に表示する方法をお探しですか?今すぐInstagram Feed Proをお試しください!プラグインを使用しない場合は、複雑なプロセスや制限を覚悟する必要がある。

プラグインなしでWordPressにInstagramの投稿を埋め込む方法

インスタグラムのフィードをプラグインなしでワードプレスに表示できるのは、まずインスタグラムのアプリ開発者として承認さ れた場合のみです。

とはいえ、プラグインを使わなくても、インスタグラムの投稿をWordPressに埋め込むのは簡単だ。さっそく始めよう。

ステップ1:表示したいインスタグラムの投稿を選ぶ

まず、インスタグラムのアカウントにログインする必要があります。ログイン情報をお持ちでない場合は、インスタグラムのプロフィールにアクセスしてください。

次に、ウェブサイトに埋め込みたいInstagramの投稿をクリックします。投稿の右上に、この⠇のような3つの点が表示されます

ドットをクリックし、表示されるメニューからEmbedを選択します。

埋め込みオプションのインスタグラム投稿

これで、インスタグラム投稿の埋め込みコードがポップアップで表示されます。投稿と一緒にキャプションも埋め込みたい場合は、ここで「キャプションを含める」オプションをチェックしてください。

その後、「埋め込みコードを コピー」ボタンをクリックしてください。

埋め込みコードを取得する

これでインスタグラムの投稿の埋め込みコードをコピーしました。このコードを投稿やページに貼り付けることができます。

ステップ2:ワードプレスに新しいページを作る

次に、WordPressのダッシュボードに移動し、ページ " 新規追加に移動して新しいページを作成します。

新しいページを追加する

代わりにWordPressの投稿を使うこともできます。その場合は、ダッシュボードエリアから投稿 " 新規追加に 進んでください。

新しい投稿を追加する

WordPressのエディターを開き、先ほどのInstagramの埋め込みコードを貼り付けます。

ステップ3:埋め込みコードを貼り付ける

埋め込みコードを貼り付けるには、まずプラスアイコン(+)をクリックし、カスタムHTML ブロックを選択します。

カスタムhtmlブロックの追加

埋め込みコードをカスタムHTMLブロックに貼り付けます 。インスタグラムの投稿がどのように見えるかを確認するには、上部にあるプレビュー ボタンをクリックしてください。

埋め込みコードをインスタグラムに貼り付ける

見た目に満足したら、「Publish 」をクリックすると、Instagramの投稿がウェブサイトに埋め込まれます。

インスタグラムの手動埋め込みでお困りですか?WordPressでInstagramの埋め込み問題を解決する方法をご紹介します。

これで完了だ!これで、プラグインを使わずにWordPressにInstagramの投稿を埋め込む方法がわかりました。

次の質問は、インスタグラムのフィードをウェブサイトに追加する際に、WordPressのプラグインを使うのと使わないのとでは、どちらがいいのか、ということだ。

インスタグラム・プラグインを使う3つの理由

もしかしたら、自分のウェブサイトでプラグインを使って問題になった人を知っているかもしれない。

おそらくインターネット上の不特定多数の人々から、プラグインはサイトの速度を遅くするから使わないほうがいいという、あまり役に立たないアドバイスを受けたのではないだろうか。

あるいは、以前あるプラグインを使ったことがあるかもしれない。しかし、ある問題で彼らの助けが必要なとき、誰もあなたの問題に対する解決策を教えてくれなかったのではないでしょうか?

プラグインを使いたくない理由が何であれ、真実は変わらない:

Instagramのフィードをウェブサイトに埋め込む際に、InstagramのWordPressプラグインを使用しない 場合、それははるかに困難で複雑です。

その本当の理由を3つ挙げてみよう:

1.プラグインなしではインスタグラムのフィードを表示するのは難しい

スマッシュバルーンに所属していなかった頃、インスタグラムのフィードを個人サイトに手動で埋め込むことを考えていた。

しかし、やり始めてみると、WordPressのソーシャルメディア・プラグインを使わないといけないので、ややこしいことに気づいた:

  • Instagramにアプリ開発者として登録する:Instagramはあなたのアプリケーションを審査し、基準を満たした場合のみ 承認する必要があります。やばい。
  • Instagram Developersのウェブサイトで新しいクライアントを登録する:さらに、暗黙認証を設定する必要があります。
  • アクセスコードを生成します:このためには、自分のアプリを認証し、メディアへのアクセスを許可する必要がある。
  • JavaScriptを使え:HTMLコードにも取り組む

最悪なのは?

せっかく時間と労力をかけて作ったのに、フィードに表示できるのは最後の20枚だけ 。なんとも残念だ。

一方、インスタグラムのフィードをワードプレスに埋め込むには、ワードプレスのプラグインを使えば簡単だ:

  • 使いやすいプラグインをダウンロードしてインストールしましょう:Smash BalloonのInstagram Feed Proプラグインを試すことができる。

5分もあれば、WordPressにInstagramのフィードを簡単に追加できる。そう、分かりにくいHTMLコードやJavaScriptに取り組むことなく!

さらに、数回クリックするだけで、インスタグラムのフィードがウェブサイト上でどのように見えるかをカスタマイズすることもできる。

また、Instagram Feed Proを使用している場合、フィードは自動的にウェブサイトのデザインをコピーし、ブランディングに合わせることができる。

ここからInstagram Feed Proを始めると、数分であなたのInstagramフィードを埋め込むことができます!

2.プラグインを使わないと時間がかかる

プラグインを使わずにインスタグラムのフィードをWordPressに追加したい?

インスタグラムのフィードを表示したいすべてのウェブサイトで暗黙認証を設定する必要がある。

つまり、インスタグラムのフィードを3つの異なるウェブサイトに表示したい場合、暗黙認証を3回行う必要がある。

インスタグラムのapiコードのサンプル

さらに残念なのは、アクセスも制限されていることだ。 自分のインスタグラムのフィードしか表示 できないのだ

自分が所有していないアカウントを表示したい場合はどうすればいいのか?

まず、そのアカウントの管理者に連絡し、自分のクライアントIDを取得してもらう必要がある。それから、前に述べたような複雑なプロセスを経なければなりません。復習のためにもう一度#1を見てください。

しかし、落ち込むことはない!良いニュースをお伝えします。

Smash BalloonのInstagram Feed Proのような優れたプラグインを使えば、Instagramのフィードをウェブサイトに表示するのはより簡単で、より速く、より良いものになる。

もうひとつ朗報がある。このプラグインを使えば、ウェブサイトに複数のフィードを表示することができます

表示したいインスタグラムのアカウントをプラグインに接続するだけで、あとはプラグインが処理してくれる。

マルチアカウント・インスタグラム

簡単だ。それは、数クリックでインスタグラムのコンテンツをサイトに統合できるように設計されたインスタグラムフィードプラグインを使うことにしたからだ。

3.プラグインがなければ、自力でやるしかない

上記の本当の理由を読んでもなお、プラグインを使わずにインスタグラムのフィードをウェブサイトに追加しようとしたらどうなるだろうか?

アプリ開発者としての登録やアクセスコードの生成に問題がある場合は、Instagramに直接お問い合わせください。

とはいえ、100%問題を解決してくれるという保証はない。

ウェブサイトのHTMLコードを間違えてしまったら?あるいはJavaScriptのやり方がわからない?

まあ、HTMLを勉強するか、開発者を雇うかのどちらかだが、これらの選択肢には多くの時間とお金がかかる。

もちろん、WordPressにシンプルなInstagramフィードを追加するためだけに何千ドルも投資する意味はない。

Smash BalloonのInstagram Feed Proプラグインを使用することを選択した場合、あなたは偉大な手の中にあることを知っているだろう。

instagram feed pro ユーザーレビュー

このプラグインのカスタマーサポートチームは、WordPressのエキスパートで構成されており、どのような段階でも喜んでお手伝いします。

1,000,000人以上のアクティブユーザーと 4.9つ星の高い評価を得ているこのプラグインは、何か正しいことをしているに違いないと思いませんか?

インスタグラムのユーザーレビュー

インスタグラムのフィードをウェブサイトに簡単に追加する方法をお探しなら、代わりにInstagram Feed Proプラグインを使うことができます。その方が簡単で速い。5分以内に設定し、フィードを表示することができますよ。

それに、プラグインを使うほうが、混乱したHTMLで貴重な時間を無駄にするよりもいい。

また、高価な開発者を雇うよりもずっと安上がりだ。

たった1つのInstagramフィードプラグインで、Instagram Feed Proを使用することもできます:

...などなど。Instagram Feed Proがあなたのためにできることすべてをここでチェックしてください

インスタグラムのフィードをウェブサイトに表示するのは、プラグインを使えば本当に簡単なのか?

質問に答えるために、次のセクションに進もうか?

インスタグラムのフィードをワードプレスに埋め込む方法

5分もかからずに、Instagram Feed Proプラグインを簡単にセットアップして、あなたのサイトにフィードを表示することができます。その方法をご紹介しよう:

ステップ1:Instagram Feed Proをダウンロードしてインストールする

まず、Instagram Feed Proを入手する必要がある。そして、あなたのWordPressウェブサイトにインストールしてください。

プラグインのインストール方法がわからない?WordPressプラグインのインストールに関するチュートリアルをご覧ください。

プラグインをインストールして有効化したら、次のステップに進んでください。

ステップ2:新しいインスタグラムフィードを作成する

その後、プラグインを使ってインスタグラムのフィードを作成できる。

まず、WordPressの管理ダッシュボードからInstagramのフィード " すべてのフィードに 移動します。

このページで、新規追加ボタンをクリックします。

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

インスタグラムのフィードタイプを3つのオプションから選択できるようになりました:

複数のオプションを選択し、異なるフィードタイプを1つにまとめることができます。

フィードの種類を選択したら、「次へ」をクリックして次に進みます。

このチュートリアルでは、ここでユーザーのタイムラインを選択します。

フィードタイプを選択 instagramフィードプロ

数回クリックするだけで、プラグインがあなたのために作成する新しいInstagramフィードができあがる。ステップ3に進み、Instagramのアカウントに接続することができる。

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

次に、このプラグインにクリエイターまたはビジネスアカウントを接続するかどうかを選択できます。

もっと詳しく知りたい方は、Instagramアカウントのアップグレードに関する便利なガイドをご覧ください。

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

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

インスタグラムの接続には2つのタイプがあります:

  • ビジネス・ベーシック: プロフィールから写真やリールを埋め込む
  • ビジネスアドバンス:ハッシュタグフィードやショッパブルフィードなど、フィードの種類を増やすことができます。

オプションを選んだら、「接続 」をクリックして次に進む。

インスタグラムの接続タイプを選択する

FacebookかInstagramを開き、アカウントの接続を完了する。

このチュートリアルでは、先に進み、Instagramと接続するをクリックします。

インスタグラムの基本プロフィールに接続する

Instagramのコンテンツを埋め込むことができるように、プラグインに読み取り専用のアクセス権を与えることができるようになりました。このアクセス権では、Smash Balloonはあなたの投稿を見ることができるだけで、変更を加えることは一切できません。

だから、スマッシュ・バルーンの使用はまったく問題ない

ポップアップの「許可」 ボタンをクリックして、読み取り専用アクセス権を与える。

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

プラグインはあなたをウェブサイトに戻すので、新しいフィードをInstagramに接続し終えることができる。

次へ」 ボタンをクリックすると、このインスタグラムアカウントが新しいフィードのソースとして確認される。

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

ステップ4:新しいインスタグラムのフィードをカスタマイズする

Instagramアカウントに接続すると、ライブプレビュー付きのビジュアルフィードエディターでフィードが開きます。

インスタグラム・フィード・プロ用ライブ・フィード・エディター

左側には、Instagramフィードのカスタマイズオプションが表示されています。これらのオプションを使用して、フィードのレイアウト、ヘッダーのスタイル、配色、投稿のスタイルなどを変更できます。

インスタグラムフィードのカスタマイズオプションを変更すると、カスタマイザーの右側にあるライブプレビューでどのように見えるかを確認できる。

さっそくインスタグラムのフィードをデザインしてみよう。

私は通常、インスタグラムのフィードのレイアウトをパーソナライズすることから始める。まずこれを行うには、フィードレイアウトオプションをクリックしてカスタマイズを始める。

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

フィードのレイアウトを4つのオプションから選択できるようになりました:グリッド、カルーセル、メイソンリーハイライトです。

フィード・レイアウト・オプション・インスタグラム・フィード・プロ

最初のオプションは、インスタグラムの投稿を行と列で表示するグリッドレイアウト です。

すべての写真が同じサイズなので、このレイアウトを選ぶとインスタグラムのフィードがきれいに見える。

インスタグラムフィードのグリッドレイアウト

カルーセルレイアウトを 使えば、Instagramのスライダーをウェブサイトに表示できます。そうすることで、訪問者があなたのサイトと交流する別の方法を提供し、エンゲージメントを高めることができます。

インスタグラム用カルーセルレイアウト

インスタグラムの投稿をオリジナルの比率で表示したいですか?それなら、メイソンリーレイアウトを 選べばいい。

インスタグラムのギャラリーをウェブサイトに埋め込み、訪問者に写真全体を見せることができます。

インスタグラムのフィードレイアウト

最後に、特定のインスタグラム投稿を非常に目立たせることができるハイライト・レイアウトが ある。このレイアウトを使えば、ショッピング可能なインスタグラムフィードでベスト商品をアピールすることができます。

インスタグラムのハイライトレイアウト

レイアウトを選んだら、忘れずに「変更を保存」をクリックしてください。

メインのカスタマイズ・オプションに戻るには、小さなカスタマイズ・ ボタンをクリックします。

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

その後、Color Schemeオプションをクリックして、Instagramフィードの色を選ぶことができる。

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

インスタグラム・フィード・プロでは、4つの異なる配色から選ぶことができます:

  • テーマからの継承:ウェブサイトの色を継承
  • 明るい:暗いフォントとともに明るい背景を表示する。
  • ダーク:暗い背景と明るい文字色を選ぶ。
  • カスタム:Instagramフィードのすべての色を手動で選ぶ
インスタグラム・フィード・プロの配色オプション

配色に満足したら、「保存」をクリックします。

このようにして、残りのカスタマイズ・オプションを使って、投稿レイアウト、ヘッダー・スタイル、フィード・サイズ、ライトボックスなどを設定することができる。カスタマイズが終わったら、もう一度保存を クリックする。

ステップ5:ウェブサイトにインスタグラムのフィードを埋め込む

いよいよInstagramのフィードをウェブサイトに埋め込む時が来た。このプラグインを使えば、2つの超簡単な方法があります:

  • インスタグラムのフィードをページに埋め込む
  • インスタグラムのフィードをサイドバーやフッターに埋め込む

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

あなたのライブフィードエディタからInstagramのフィードを埋め込むことができます。開始するには、上部の埋め込み ボタンをクリックしてください。

インスタグラム・ウィジェットをワードプレスに埋め込む

次に、新しいポップアップでインスタグラムのフィードを埋め込む場所を選択できます。ページに 追加ボタンをクリックして次に進みます。

インスタグラムのフィードをページに追加する instagram feed proインスタグラムのフィードをページに追加する instagram feed pro

次に、インスタグラムのフィードを表示するページを選択し、追加ボタンをクリックします。

ページにInstagramフィードを追加する

このプラグインは、Instagramのフィードを埋め込むことができるように、そのページにあなたを送ります。

そのためには、小さなプラス(+)アイコンをクリックし、新しいコンテンツブロックをページに追加する。

新しいワードプレスブロックを追加する

検索バーで「Instagram」を探し、検索結果のInstagram Feed オプションをクリックする。

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

最後にPublishを クリックすると、インスタグラムのフィードが公開される。

このチュートリアルのステップに従うだけで、あなたのWordPressページにInstagramのフィードが表示されます。これでウェブサイトを開いて、インスタグラムのフィードがどのように見えるかを確認できる。

ワードプレスのインスタグラムフィード例

続いて、インスタグラムのフィードをウェブサイトのサイドバーやフッターに埋め込む方法を見てみよう。

また、InstagramフィードをInstagramウィジェットとしてサイドバーやフッターエリアに埋め込むこともできる。

まず、ライブフィードエディターでInstagramのフィードを開きます。まだ開いていない場合は、WordPressのダッシュボードを使用してInstagramのフィード " すべてのフィードに移動します。

先ほど作成したInstagramのフィードをクリックする。

ライブフィードエディタでインスタグラムのフィードを開く

ライブフィードエディターでインスタグラムのフィードが開くのが見えます。

右上の埋め込み ボタンをクリックして、フィードの埋め込みを開始します。

インスタグラム・ウィジェットをワードプレスに埋め込む

その後、フィードを埋め込む場所を尋ねるポップアップが表示されます。

ポップアップで、ウィジェットに追加ボタンをクリックします。

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

プラグインはウィジェットページを 開くので、Instagramフィードウィジェットを追加できる。

インスタグラムのフィードをサイドバーに埋め込むには、サイドバーパネルを クリックしてください。

サイドバーパネルを開いてソーシャルメディアウィジェットを埋め込む

フッターにインスタグラムのフィードを埋め込みたい場合は、フッターパネルをクリックしてください。

このチュートリアルでは、インスタグラムのフィードをウェブサイトのフッターに埋め込みます。

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

ここでプラスアイコン(+)をクリックして新しいウィジェットを追加し、オプションからInstagramフィードウィジェットを 選択する。

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

あなたのウェブサイトにInstagramフィードウィジェットを公開するために更新を クリックしてください。

ウェブサイトを開くと、それがどのように見えるかを見ることができる。

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

📽️ ボーナスヒント:ウェブサイトにInstagramリールを簡単に埋め込む

ワードプレスサイトにソーシャルフィードを表示する無数のユーザーを支援してきた私は、インスタグラムのリールのようなダイナミックなコンテンツを追加することで、エンゲージメントに素晴らしい効果があることを知っている!

リールはコンテンツを新鮮に保つだけでなく、高い到達率のおかげでより多くの訪問者を引き寄せる。

Instagramのリールをウェブサイトに統合することで、魅力的な動画体験を提供し、ユーザーのブランドとの交流を長続きさせ、サイトの魅力と視聴者の定着率を高めることができます。

Smash Balloon Instagram Feed Proプラグインを使用すると、リールを埋め込む最も簡単な方法です。シンプルさを念頭に置いて設計されているので、技術的なスキルがなくてもリールを追加できます。数回クリックするだけです!

インスタグラムのリールをウェブサイトに埋め込む方法については、次の記事を読んでほしい。

それで終わりだ!

この記事では、プラグインを使わずにインスタグラムの投稿をウェブサイトに追加する方法を学んだ。

プラグインを使ってインスタグラムのフィードをワードプレスに埋め込む方法も知っているので、アカウントのエンゲージメントを高め、ウェブサイトのトラフィックも増やすことができる。

インスタグラムのフィードをウェブサイトに表示する最も簡単な方法をお探しですか?

Smash BalloonのInstagram Feed Proを今すぐ始めましょう!

さらに一歩進んで、すべてのソーシャルメディアのフィードを表示したいですか?次の記事では、WordPressにソーシャルメディアのフィードを追加する方法をご紹介します。

インスタグラムのリールの再生回数を増やす方法については、次の記事も気に入っていただけるかもしれない。

最後に、この記事を楽しんでいただけたなら、ソーシャルメディア・マーケティングのチュートリアルをもっと見るために、ツイッターや フェイスブックで私たちをフォローしてください。

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

コメントを追加する

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