InstagramをWordPressに埋め込むプラグイン【Smash Balloon Social Photo Feed】

ABOUTこの記事をかいた人

兵庫県加古川市在住の3児の父親です。
・ブログのサポート(月額会員制スポット
・某コミュニティの技術サポート
オルゴナイトのネットショップ店長

アニメやマンガ好きで、子供の影響か?ギターの練習を再開しましたw

口座やカードの自動取り込みが優秀すぎて、隙間時間に仕訳ができておすすめです^^

 

フリーランスの支払いトラブルを未然に防止


どうも、がみたか(@gamitaka02)です!

さまざまなSNSがある中で利用している人の多いInstagramですが、「自分のブログにも表示させたい!」という人は結構いらっしゃいます。

僕が提供している「ブログリリーフ」や技術サポートとして常駐している「デジタルマーケティングスクール(旧ブログマーケティングスクール」でも定期的に質問として上がってくるので、「InstagramをWordPressに埋め込む方法」を解説していきたいと思います。

がみたか
このサイトにもサイドバーにInstagramのフィードを表示しています。(プライベートな写真ばかりですが…)

InstagramをWordPressに埋め込む手順

InstagramをWordPressに埋め込む方法として、プラグイン「Smash Balloon Social Photo Feed(旧Instagram Feed)」というプラグインを使うのが一番わかりやすく、初心者向けかと思います。

ここでは、そのプラグイン「Smash Balloon Social Photo Feed」を使った埋め込みについて解説していきたいと思います。

手順1:プラグインのインストール

まずはプラグイン「Smash Balloon Social Photo Feed」をインストールしないと始まりません。

偉大な冒険家
ここはお馴染みの作業だな!

1.ダッシュボードにて「プラグイン」→「新規追加」の順にクリック。

2.検索欄に「Smash Balloon Social Photo Feed」と入力し、該当のプラグインを「インストール→有効化」します。

3.有効化されると、ダッシュボードのサイドメニューに「Instagram Feed」という項目が表示されます。

偉大な冒険家
「Smash Balloon 〜」だと長いからここは前のままなんだなw

手順2:Instagramのアカウントを連携させる。

次にプラグインとInstagramのアカウントを連携するのですが、連携時に「Personal(個人)」「Business(ビジネス)」の2種類ありますが、ここでは「Personal(個人)」での連携について解説していきます。

がみたか
Instagramのアカウントが「Business(ビジネス)」であれば、連携の流れが少し変わりますが、そちらで連携しても良いかと思います^^
「Business(ビジネス)」で連携すると後で解説する、「アイコン」と「自己紹介」が自動で入力されます。

1.「Instagram Feed」をクリックし、「Instagramアカウントを接続する」をクリック。

2.「Personal」を選択して「Connect」をクリック。

3.「許可する」をクリック。

4.「このアカウントを接続する」をクリック。

5.Instagramアカウントに表示されれば、無事に連携が成功しています。

手順3:Instagramのフィードを実際に設置してみる

Instagramアカウントの連携ができたら、まずはWordPressに設置してみます。

がみたか
場所はどこでも良いですが、ウィジェット(サイドバー、フッター)に設置することが多いのでそちらで解説していきますね^^

1.「外観」→「ウィジェット」を開き、好みの場所(「サイドバー」か「フッター」がおすすめ)に「テキスト」を設置する。(テキスト入力できるものなら何でも良い)

「テキスト」ウィジェットにプラグインでInstagramを表示させるショートコード

[instagram-feed]

を入力し、ウィジェットを保存する。

2.デフォルト状態だとこのように表示されます。(20枚、4列)

・PC表示

・スマホ表示

デフォルト状態だと「アカウントのアイコン」「自己紹介」が設定されず、スマホで見た時も大きい画像が20枚も並ぶため、あまりスマートではありません(^_^;)

そこで、プラグインから設定を変更し、少しでも見やすくしていきます。

手順4:「Smash Balloon Social Photo Feed」の設定を変更する。

デフォルトの状態では

・画像の配置が「20枚、4列」
・アカウントのアイコンが無い
・アカウントの自己紹介が空欄

となっているので、これをプラグインの「カスタマイズ」の項目から設定を自分好みに変更していきます。

1.「カスタマイズ」のタブをクリック。

ここでは設置したフィードの「背景色」を変更することができますので、お好きな色にしてください。

偉大な冒険家
何もしない場合は背景色は透明になるぜ!

2.この「レイアウト」が表示される画像の項目になります。(ここでは「12枚、3列」に設定)

この「モバイルレイアウトを無効化」にチェックを入れることで、3列以上で設定した時のスマホ表示でも勝手に1列表示になりません。(2列表示に設定した場合はスマホでも2列で表示される)

3.設定変更後はこのような表示になります。

・PC表示

・スマホ表示

これでPC・スマホ共に、個人的には見やすいレイアウトになりました^^

4.「写真」の項目では「新着順」もしくは「ランダム」で表示するか選択することができます。

5.「ヘッダー」の項目では「自己紹介」と「アカウントのアイコン(カスタムアバター)」を設定します。

がみたか
自己紹介はInstagramアカウントのものをコピペすると長くなってしまうので再編集もしくは新規で作成することをお勧めします(^_^;)

6.アイコンに使用する画像を「メディア」→「メディアライブラリ」にアップロードします。

7.割り当てられた画像URLをコピーし、先ほどの「カスタムアバター」の項目に貼り付けます。

8.フィードのヘッダー部分がこのように表示されました。

9.クリックすると表示画像が増える「さらに読み込む」ボタンはここで設定を変更できます。

10.Instagramのプラフィール画面へのリンク「フォロー」ボタンはここで設定を変更できます。

11.「フィードの表示」タブでは、ショートコードを使った様々なカスタマイズ表示について説明があります。

大半は「カスタマイズ」タブでの設定で事足りるので、「PCとスマホで表示をガッツリ変えたい!」という場合に使うと良いでしょう。

12.「その他ソーシャルフィード」では「Facebook」「Twitter」「Youtube」の埋め込みができますが、このページでは「Instagram」についての解説なので割愛させていただきますm(_ _)m

InstagramをWordPressに埋め込むプラグイン:まとめ

自分のブログにSNSのフィードを埋め込んで活動をアピールするのは良いことだと思います。

プラグインを使って、このページの手順に沿っていただけると簡単に設置できますので、Instagramをブログに設置したい方は是非お試しください!

ただし、これらのフィードを読み込むのにJavascriptを使用しているため、Googleのサイトスピード計測「PagePpeed Insights」のスコアが若干落ちてしまうことがあるので、このことを頭の片隅に置いておくと良いでしょう。
がみたか
とはいえ、あくまでもGoogleが決めるスコアなので体感速度が遅くなければ大きな問題ではないでしょう^^

それでは、今回はこの辺で!

また次の記事でお会いしましょう^^

ブログ運営者のためのサポート保険!

ブログのトラブルや困ったことに時間を取られて

自分のやるべきことが出来ていない人のためサービスです!


『ちょっと困った』時のスポットサポート!

WordpressやWebに関する「ちょっと困った」を、

30分 4,400円〜で解決するサービスです!


Wordpressのお引越し!

安心・安全・快適で、ブログサポーターがおすすめする、

Xサーバーへのお引越しを代行します!


ブログサポーターがみたかでは、
アフィリエイター様を募集しています!

記事が気に入ったらシェアをお願いします^^