プラグイン

インスタのフィード投稿をワードプレスへの埋め込む方法を解説!プラグインで超簡単に

今回は、インスタをワードプレスに埋め込む方法について解説します!

 

ワードプレスで作成したサイトは、サイドバーに自身のSNSアカウントを貼り付けることができます。

 

ツイッターだけでなく、インスタのフィード投稿も埋め込みたいけどどうすればいいのか分からない・・・という人は多いのではないでしょうか?

 

インスタのフィード投稿は、プラグインを活用することで表示させることが可能なので、ぜひチェックしてみてください!

インスタをワードプレスに埋め込むプラグイン

インスタグラムのフィード投稿を、サイドバーに表示させるためにはプラグイン「Smash Balloon Social Photo Feed」を活用します。

 

 

以前は「Instagramフィード」という名前だったようですが、アプデに伴い名前も変更となりました。

 

「プラグイン」→「新規投稿」に入り、「Instagram」と検索することで一番最初に検索結果として表示されます。

 

他にもインスタグラムのフィード投稿を表示させることができるプラグインはありましたが、

今回ご紹介するプラグインが一番インストール回数が多く、評判もいいので今回はこちらのプラグインで説明させていただきます!

 

こちらのプラグインをインストールし、それが終わりましたら有効化も忘れずに!

プラグインでインスタをワードプレスに埋め込む方法

それでは実際にプラグインを使ってインスタのフィード投稿を表示させる作業に移りましょう!

 

作業自体は決して難しいものではありません。

 

大まかに分けて4つのステップでインスタのフィード投稿を表示させることができます。

  1. 自身のインスタアカウントと連携させる
  2. どのインスタを表示させるか選択する
  3. レイアウトを選択する
  4. ショートコードをコピーして任意の場所にペーストする

それぞれ詳しく解説しますね!

1.自身のインスタアカウントと連携させる

まず最初に、自分のインスタグラムのアカウントとプラグインを連携させるところからスタートします。

 

プラグインの画面を開いた時に表示されている青いボタンをクリックして下さい。

すると、「personal」と「buisiness」のいずれかを選ぶ項目に移るかと思いますが、上の「personal」を選んだ状態で「conect」をクリックして下さい。

 

その後、以下のような画面に移ります。

メディア(任意)の項目にチェックを入れた状態で、「許可する」をクリック!

 

その後ワードプレスの管理画面に戻り、自分が接続したいインスタのアカウントのIDの下に「このアカウントを接続する」というボタンが表示されるため、

ボタンをクリックしてワードプレスとインスタの連携は完了です!

2.どのインスタを表示させるか選択する

続いては、どのインスタのフィード投稿を表示させるのかを選択する作業に入ります。

 

今回解説するプラグインの有料版を使っていない限り、選択できる項目は「ユーザーアカウント」のみになっていると思います。

 

 

前の作業が完了している場合、すでに連携させたインスタのアカウントIDが入力されているはずです。

 

「ユーザーアカウント」が選択されている状態であることを確認した後、「変更を保存」をクリックしましょう!

 

なお、上記の画像に表示されている「新しい投稿を確認」そのほかの設定についてはそのままで構いません。

3.レイアウトを選択する

続いては、レイアウトを選択します!

 

まず、上記のタブにある「カスタマイズ」をクリックして画面を移ります。

 

 

「一般」にある「フィードの幅」はすでに「100%」になっているかと思うので、こちらは無視していただいて構いません。

 

この画面では、様々なレイアウトを設定することができますが、

  • 写真の数:9
  • 列の数:3
  • 画像の余白:5px

上記のような設定を一番オススメしています!

 

ちなみに上記の設定をしたインスタのフィード投稿が以下の通りです。

 

 

自分のサイトのイメージや、どれだけインスタを目立たせたいかを吟味した上で設定してみましょう!

 

設定が終わりましたら、「変更を保存」をクリックすることもお忘れなく!

4.ショートコードをコピーして任意の場所にペーストする

最後にショートコードをコピーして任意の場所にペーストする作業に入ります。

 

一通り設定が終わりましたら、「3.フィードの表示」のタブをクリックし、画面を移ります。

 

 

すると上記のような画面が出てくるので、「フィードの表示」にある

をコピーします。

 

「ウィジェット」のサイドバーなど、好きな箇所に先ほどコピーしたコードをペーストしましょう。

 

すると、インスタのフィード投稿が表示されるようになりました!

 

これで設定は完了です!

まとめ

自分のインスタのフィード投稿をワードプレスに表示させる方法について解説しました!

 

インスタのフィード投稿を表示させるには、プラグイン「Smash Balloon Social Photo Feed」(旧名:instagram feed)を使用します。

  1. 自身のインスタアカウントと連携させる
  2. どのインスタを表示させるか選択する
  3. レイアウトを選択する
  4. ショートコードをコピーして任意の場所にペーストする

上記の手順で設定が完了し、なおかつ数分程度なので「インスタのフィード投稿をサイドバーに表示させたい!」という方はぜひ設定しておきましょう!

メルマガでは、僕が週5日フルタイムからブログ×週3日アルバイトという働く時間を減らした毎日を実現するために、どのように考えて行動してきたのか具体的にお伝えしています。

メルマガ読者限定でブログ開設から収益化までの流れをまとめたコンテンツもプレゼントしていますのでぜひメルマガもチェックしてみてくださいね!

ゼロからブログで収入を得るための無料メルマガ
登録して見てみる