WordPress

WordPressでInstagramを埋め込みする方法

※ 当サイトではアフィリエイト広告を利用しています

WordPressでInstagramを埋め込みする方法アイキャッチ画像

WordPressでホームページ制作を行う時にInstagramとの連動がかなり人気となってきています。

WordPressでInstagram導入方法を理解して実際に使用していきましょう。

Smash Balloon Social Photo Feed」というプラグインを活用して埋め込みを行なっていきます。

この記事を読むと...
  • WordPressへInstagramを埋め込む方法が分かる
  • Instagramを埋め込むことでのメリット・デメリットが分かる
  • Instagramのカスタマイズ方法が分かる

 

ホームページにInstagramを埋め込むとは

Instagram実投稿

上記の画像の様にWordPressの投稿画面上にInstagramの投稿表示を行うイメージです。

 

ホームページにInstagramを埋め込むメリット

アクティブにInstagramの投稿を行うことによってユーザーから興味を持ってもらいやすくなります。

ホームページとInstagramの様なSNSを活用することでPV数の増加、お問い合わせの増加が期待できます。

 

ホームページにInstagramを埋め込むデメリット

ホームページにInstagramを埋め込んだとしても投稿が全くされていなければ、ユーザーは逆に不信感をもってしまいます。

Instagramを導入する場合は更新頻度を安定させましょう。

 

ホームページにInstagramを埋め込む方法

プラグインを活用してInstagramとの連動を行います。

使用するプラグインは以下の「Smash Balloon Social Photo Feed」というプラグインで簡単に導入することができます。

プラグイン【Smash Ballon】

 

導入の流れは以下となります。

 

  1. Smash Balloon Social Photo Feedを追加する
  2. 自分のInstagramと紐付けを行う
  3. Instagramの表示方法を選択する
  4. ショートコードをコピーして固定ページに貼り付けを行う
  5. 実際に表示されているか確認する
  6. 表示崩れがあれば修正する

 

次に導入手順について詳しく解説します。

 

step
1
Smash Balloon Social Photo Feedを追加する

Instagram導入手順1

 

step
2
自分のInstagramと紐付けを行う

Instagram導入手順2

 

Instagramアカウントに接続を行う為に「新規追加」をクリック。

 

Instagram連動

 

Personal」をクリックします。

※Businessアカウントを使用している方は「Business」をクリックします

Instagram連携方法手順

 

Connect with Instagram」をクリックすることで自動的に自身のInstagramアカウントに紐付けることができます。

 

Instagram連携手順

 

 

step
3
Instagramの表示方法を選択する

Instagram投稿連動方法

 

フィードレイアウトにて表示方法を選択します。

 

投稿フィードレイアウト

 

グリッド」で表示を行います(その他の表示も可能ですが有料となります)

 

Instagramフィード投稿

 

デスクトップ表示時の「投稿数」、「」をそれぞれ入力します。

個人的に見栄え良くてスッキリするのは

投稿数:6

列:3

上記表示は以下の画像となります。

 

Instagramレイアウト画像

 

 

step
4
ショートコードをコピーして貼り付けを行う

Instagramショートコード貼り付け

 

個別ページ部分に先ほどコピーしたショートコードを以下の様にペーストしていきます。

 

Instagramショートコード貼り付け

 

 

step
5
実際に表示されているか確認する

Instagram実投稿

step
6
表示崩れ部分を修正する

Instagramアイコン位置修正

カスタム追加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アカウントを立ち上げて連動しておこう!

 

  • この記事を書いた人
アバター画像

こうだい

兼業でWeb制作事業|31歳|本業畑違いで知識0から学習開始→1年目で初案件獲得→2年で月の兼業受注金額70万円達成|4年目で100万円達成(今ここ)|兼業でも稼げることを確信|Web制作メンター|制作費無料のホームページ制作事業運営|コーディング・ホームページ制作のご依頼もお待ちしております

-WordPress
-, ,