WordPressにInstagram（インスタグラム）のタイムラインを埋め込むのは簡単です！
＼こんなイメージになります／
SNSのタイムラインをWebサイトに表示させる事で、SNSとの相乗効果が見込めます。
検索以外のアクセス流入を獲得できるようになるので是非やっておきたいですね。
めもちゃんサイト上でもSNSが見えるって映えるしね！！
というわけで、やり方を解説していきます！
Instagramのタイムラインはプラグインで埋め込む
ここで解説するのは、WordPressのプラグインを使用する方法です。
今回使用するのは「Smash Balloon Social Photo Feed」というプラグインです。
このプラグインは、WordPressとInstagramを接続して、Instagramフィードを埋め込むことができます。
めもちゃん埋め込みコードをコピペするだけでホームページに設置することができるので、便利です！
めもちゃん有料版もあるのですが、無料版でOKです！
1. プラグインのインストール方法
プラグインをインストールします。
プラグインはこちら
▶︎Smash Balloon Social Photo Feed
1.管理画面の「プラグイン」＞「新規追加」から、右上の検索欄にプラグイン名を入力します。
2.「今すぐインストール」をクリックします。
3.インストールが完了したら「有効化」をクリックします。これでインストール完了です。
めもちゃん「有効化」したら自動で初期設定画面に移動します
2. Smash Balloon Instagram Feedの初期設定
プラグインとInstagramを連携します。
1.プラグイン の初期設定画面です。下記ボタンをクリックして次に進みます。
2.「新規追加」をクリックします。
3.個人用途かビジネス用途か聞かれます。「Personal」をクリックします。
4.「Connect with インスタグラム」をクリックします。（その下のメール配信のチェックは外してOKです）
5.Instagramの情報をプラグイン に提供して良いか聞かれるので、承認します。
（このスクショは2回目なので違う見え方になりました）
6.自分のサイトのアドレスがこれであっているか確認されるので、「Yes」をクリックします。
7.Instagramアカウントと連携できました。「Next」をクリックします。
8.欲しい機能を聞かれます。「Next」をクリックします。
8.追加のサービスをインストールするか聞かれます。全部外して「Install」をクリックします。
9.有料版（Pro）になるか確認されますが、無料でいいので一番下のボタンをクリックします。
10.初期設定が完了しました。
めもちゃんこれでInstagramの読み込みができるので、次の見出しの「フィード」作成ができるようになります！
3. Instagramのフィードを作成する
1.プラグインのダッシュボードにて、「新規作成」をクリックします。
2.ユーザータイムラインが選択されているので、そのまま「次へ」をクリックします。
3.「ソースを選択」をクリックします。
4.タイムライン のソースを追加を行います。
ソースとなるアカウントをクリックし、「追加」をクリックします。
5.「次へ」をクリックします。
6.Instagramのフィード作成ができました。プレビュー画面が登場します。
めもちゃんインスタにあげた画像が出てきました！
4. フィードをカスタマイズする
1.フィードのカスタマイズ画面です。「フィードレイアウト」をクリックします。
2.フィードレイアウトの設定をします。
▼このサイトでは、下記数値に設定しています。
レイアウト：グリッド
余白：5
投稿数：デスクトップ12・モバイル12
列：デスクトップ3・タブレット3・モバイル2
3.ヘッダーの設定をします。
プロフィール画像のアップロードとテキストを入力します。
4.「保存」をクリックして、カスタマイズ設定は完了です。
5. サイトにInstagramを埋め込む
1.埋め込み用のショートコードを発行します。
カスタマイズ画面の右上にある「埋め込み」をクリックします。
2.埋め込みフィードのショートコードをコピーします。
3. WordPressの管理画面へ。
「ショートコード」のブロックを作成し、URLを入力し、保存します。
4. タイムラインが表示されるようになりました。
めもちゃんやったー！インスタのタイムラインが表示されました！！！
めもちゃん…せっかくなら、デザインをちょっと変えたいな
枠線を追加する場合
このサイトの場合、X（旧：Twitter）が隣にあるので、そのタイムラインデザインと枠線の色を合わせました。
管理画面の「外観」＞「テーマファイルエディター」からスタイルシートへ行きます。
下記コードを入力して、保存します。
▼コードはこちらをコピペしてください
.Instagram_flame {
border-radius: 10px;
border: solid 1px #cfd9dd;
background-color: #ffffff;
padding: 10px;
}
▼コードの解説
.Instagram_flame {
border-radius: 10px; ←フレームの角丸を設定
border: solid 1px #cfd9dd; ←1pxの線、色はこのコードの灰色
background-color: #ffffff; ←枠の内側、フレームの背景色は白色
padding: 10px; ←フレームの中に10pxの余白を作る
}
めもちゃんこれでInstagramのフィードの、フレームデザインを変更できました！
まとめ：さいごに
Instagramのタイムラインを埋め込む方法、実行できましたか？
便利なプラグインがあるのでありがたいですね。活用していきましょう！
めもちゃん自分を発信するためのSNS、上手くサイトに組み込めれば見た目も映えます！
楽しくWordPressサイト運営をしていきましょう！
以上、メモノテからお送りしました！
＼関連記事／
