WEBサイト制作

WordPressサイトに自身の最新インスタ写真を自動表示!埋め込み方法解説

イメージ

WordPressサイトにインスタグラムの写真を掲載する(埋め込む)方法をご紹介します。

  1. 記事のなかに1つのインスタ写真を埋め込む
  2. 記事内やフッターなどにインスタの一覧写真を埋め込む(写真は自動更新

前者は、インスタ側で埋め込みコードをコピーし、そのコードをWordPress投稿画面の「カスタムHTML」ブロックにペーストすればOKです。

後者は、プラグインを使って実現できます。今回はこちらの方法を解説していきます!

「Smash Balloon Social Photo Feed」プラグインのインストール

管理画面にログインし、「プラグイン」から「新規追加」をクリック。

イメージ

キーワードに「Smash Balloon Social Photo Feed」を入力してプラグインを検索。
(プラグイン:https://ja.wordpress.org/plugins/instagram-feed/

イメージ

「Smash Balloon Social Photo Feed」の「今すぐインストール」をクリックします

イメージ

インストールが完了すると「有効化」ボタンが表示されます。「有効化」をクリックします。
これでインストールは完了です。

設定画面へ

「Smash Balloon Social Photo Feed」の「設定」画面へ進みます。

イメージ

「ソースを追加」をクリックして、自身のInstagramアカウントへの接続を行います。

イメージ

インスタグラムと連携

自身のアカウントタイプを選択します。

イメージ

通常のユーザーは「Personal」をクリックします。
※企業用アカウントの場合は「Business」をクリック。

イメージ

「Connect with Instagram」をクリックします。

イメージ

自身のインスタグラムのアカウントにログインを行います。

イメージ

WordPressのプラグインから、今回ログインしたインスタグラムの写真・キャプションデータ等へアクセスできるようにします。

「許可する」をクリックし、

イメージ

「Yes, It is my domain」をクリック。

イメージ

これで、接続(追加)の完了です。

インスタの一覧写真(埋め込みフィード)を作成

埋め込み手順は2段階です。

  1. 写真を何枚出すかなど表示方法・見た目を決め(フィードを作成)、ショートコードを取得します。
  2. ショートコードを、サイトの表示したい箇所(投稿画面、ウィジェットなど)に貼り付けます。

まず、1段階目を行います。

イメージ

「すべてのフィード」「新規追加」をクリック。

イメージ

「ユーザータイムライン」を選択し、「次へ」

イメージ

インスタグラムのアカウントを選択し、「次へ」

イメージ

プロフィール写真は自動で読み込まれないので、サイトに表示したい場合は、ここで設定します。プロフィール写真をサイトに表示させない場合は、設置不要です。

イメージ

サイトに表示させる見た目を決めます。
レイアウト、写真の枚数、「Load More」「Follow」ボタンの有無などを選択します。

メモ
ここまで案内はしていませんでしたが、このプラグインは、無料版と有料版があります。有料版は、レイアウトなどの選択肢が増えて、自由に表示方法をカスタマイズできます。ただし、無料版でも十分、活用できると思います。

イメージ

レイアウトが決まったら、「埋め込み」をクリックし、ショートコードを「コピー」します。

この後、コピーしたショートコードを、サイトの表示したい箇所(投稿画面、ウィジェットなど)に貼り付けを行いますが、貼り付けの前に、少し補足です。

インスタ側で写真・投稿が追加された場合、サイトに表示するインスタ写真も自動で更新されます。この更新間隔を設定する画面が以下です。

イメージ

更新するタイミングを設定します。一応、更新頻度をあげるとサイトの負荷は増えていくので、適度なところで設定しましょう。

インスタの一覧写真を埋め込み

さて、2段階目(最終段階)です。
先ほどコピーしたショートコードを、サイトの表示したい箇所(投稿画面、ウィジェットなど)に貼り付けを行います。

イメージ

今回は投稿画面の「ショートコード」ブロックに貼り付けています。

イメージ

サイトに表示したイメージです。
こういう感じの写真が、フッターなどにあるとオシャレな感じになりますね。


インスタ写真をサイトに埋め込むと、インスタの紹介ができるのはもちろん、サイトがより印象的になります。最新のインスタ写真を自動で取り込んで、サイトをブラッシュアップしてみてはいかがですか?

Share

ブログランキング

記事が参考になったら応援クリックしていただけると励みになります。


にほんブログ村 IT技術ブログ WordPressへ