WordPressでホームページ制作を行う時にInstagramとの連動がかなり人気となってきています。
WordPressでInstagram導入方法を理解して実際に使用していきましょう。
「Smash Balloon Social Photo Feed」というプラグインを活用して埋め込みを行なっていきます。
- WordPressへInstagramを埋め込む方法が分かる
- Instagramを埋め込むことでのメリット・デメリットが分かる
- Instagramのカスタマイズ方法が分かる
目次
ホームページにInstagramを埋め込むとは
![Instagram実投稿](https://tips-log.com/wp-content/uploads/2023/09/Instagram実投稿.jpg)
上記の画像の様にWordPressの投稿画面上にInstagramの投稿表示を行うイメージです。
ホームページにInstagramを埋め込むメリット
アクティブにInstagramの投稿を行うことによってユーザーから興味を持ってもらいやすくなります。
ホームページとInstagramの様なSNSを活用することでPV数の増加、お問い合わせの増加が期待できます。
ホームページにInstagramを埋め込むデメリット
ホームページにInstagramを埋め込んだとしても投稿が全くされていなければ、ユーザーは逆に不信感をもってしまいます。
Instagramを導入する場合は更新頻度を安定させましょう。
ホームページにInstagramを埋め込む方法
プラグインを活用してInstagramとの連動を行います。
使用するプラグインは以下の「Smash Balloon Social Photo Feed」というプラグインで簡単に導入することができます。
![プラグイン【Smash Ballon】](https://tips-log.com/wp-content/uploads/2023/06/プラグイン【Smash-Ballon】.jpg)
導入の流れは以下となります。
- Smash Balloon Social Photo Feedを追加する
- 自分のInstagramと紐付けを行う
- Instagramの表示方法を選択する
- ショートコードをコピーして固定ページに貼り付けを行う
- 実際に表示されているか確認する
- 表示崩れがあれば修正する
次に導入手順について詳しく解説します。
step
1Smash Balloon Social Photo Feedを追加する
![Instagram導入手順1](https://tips-log.com/wp-content/uploads/2023/09/インストール方法.png)
step
2自分のInstagramと紐付けを行う
![Instagram導入手順2](https://tips-log.com/wp-content/uploads/2023/09/Instagram導入手順2.jpg)
Instagramアカウントに接続を行う為に「新規追加」をクリック。
![Instagram連動](https://tips-log.com/wp-content/uploads/2023/09/Instagram連動.png)
「Personal」をクリックします。
※Businessアカウントを使用している方は「Business」をクリックします
![Instagram連携方法手順](https://tips-log.com/wp-content/uploads/2023/09/Instagram連携方法.png)
「Connect with Instagram」をクリックすることで自動的に自身のInstagramアカウントに紐付けることができます。
![Instagram連携手順](https://tips-log.com/wp-content/uploads/2023/09/Instagram連携手順.png)
step
3Instagramの表示方法を選択する
![Instagram投稿連動方法](https://tips-log.com/wp-content/uploads/2023/09/Instagram投稿方法.jpg)
フィードレイアウトにて表示方法を選択します。
![投稿フィードレイアウト](https://tips-log.com/wp-content/uploads/2023/09/Instagramフィードレイアウト.jpg)
「グリッド」で表示を行います(その他の表示も可能ですが有料となります)
![Instagramフィード投稿](https://tips-log.com/wp-content/uploads/2023/09/Instagramフィードレイアウト2.jpg)
デスクトップ表示時の「投稿数」、「列」をそれぞれ入力します。
個人的に見栄え良くてスッキリするのは
投稿数:6
列:3
上記表示は以下の画像となります。
![Instagramレイアウト画像](https://tips-log.com/wp-content/uploads/2023/09/レイアウト画像.jpg)
step
4ショートコードをコピーして貼り付けを行う
![Instagramショートコード貼り付け](https://tips-log.com/wp-content/uploads/2023/09/ショートコード貼り付け.png)
個別ページ部分に先ほどコピーしたショートコードを以下の様にペーストしていきます。
![Instagramショートコード貼り付け](https://tips-log.com/wp-content/uploads/2023/09/Instagramショートコード貼り付け.png)
step
5実際に表示されているか確認する
![Instagram実投稿](https://tips-log.com/wp-content/uploads/2023/09/Instagram実投稿.jpg)
step
6表示崩れ部分を修正する
![Instagramアイコン位置修正](https://tips-log.com/wp-content/uploads/2023/09/アイコン位置修正.jpg)
カスタム追加CSSに以下コードを記載すると表示崩れが解消されます。
/* Instagramアイコンずれ修正*/
#sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo, #sb_instagram .sb_instagram_header .sbi_header_hashtag_icon .sbi_new_logo, .sb_instagram_header .sbi_header_img_hover .sbi_new_logo, .sb_instagram_header .sbi_header_hashtag_icon .sbi_new_logo {
top: 30%;
}
#sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn a {
margin: 0;
}
これでWordPressサイトにInstagramのフィード投稿が表示できました!
Instagramを新規で投稿すると連動してサイト内のInstagram投稿も更新される様になります。
まとめ
Smash Balloon Social Photo Feedを活用することで簡単にInstagramとホームページを連携することができます。
事業サイトを構築した際はビジネス用のInstagramアカウントを立ち上げて連動しておこう!