WordPressサイトにインスタグラムの写真を掲載する(埋め込む)方法をご紹介します。
- 記事のなかに1つのインスタ写真を埋め込む
- 記事内やフッターなどにインスタの一覧写真を埋め込む(写真は自動更新)
前者は、インスタ側で埋め込みコードをコピーし、そのコードを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段階目を行います。
「すべてのフィード」>「新規追加」をクリック。
「ユーザータイムライン」を選択し、「次へ」。
インスタグラムのアカウントを選択し、「次へ」。
プロフィール写真は自動で読み込まれないので、サイトに表示したい場合は、ここで設定します。プロフィール写真をサイトに表示させない場合は、設置不要です。
サイトに表示させる見た目を決めます。
レイアウト、写真の枚数、「Load More」「Follow」ボタンの有無などを選択します。
レイアウトが決まったら、「埋め込み」をクリックし、ショートコードを「コピー」します。
この後、コピーしたショートコードを、サイトの表示したい箇所(投稿画面、ウィジェットなど)に貼り付けを行いますが、貼り付けの前に、少し補足です。
インスタ側で写真・投稿が追加された場合、サイトに表示するインスタ写真も自動で更新されます。この更新間隔を設定する画面が以下です。
更新するタイミングを設定します。一応、更新頻度をあげるとサイトの負荷は増えていくので、適度なところで設定しましょう。
インスタの一覧写真を埋め込み
さて、2段階目(最終段階)です。
先ほどコピーしたショートコードを、サイトの表示したい箇所(投稿画面、ウィジェットなど)に貼り付けを行います。
今回は投稿画面の「ショートコード」ブロックに貼り付けています。
サイトに表示したイメージです。
こういう感じの写真が、フッターなどにあるとオシャレな感じになりますね。
インスタ写真をサイトに埋め込むと、インスタの紹介ができるのはもちろん、サイトがより印象的になります。最新のインスタ写真を自動で取り込んで、サイトをブラッシュアップしてみてはいかがですか?