インスタグラムをWordPressに埋め込む方法 – プラグインを使って簡単実現!

インスタグラムをWordPressに埋め込む方法 – プラグインを使って簡単実現!

Ad

インスタグラムをWordPressに埋め込む方法

今回は、インスタグラムをWordPressに埋め込む方法をご紹介します。

無料のプラグイン「Smash Balloon Social Photo Feed」を使いますので、誰でも簡単に埋め込みができますよ♪

埋め込んだ後のページはこのようなイメージです。↓

インスタグラムをワードプレスへ埋め込みイメージ

こちらのサイトでは、PCとスマートフォンのどちらも写真2枚を横並びにして表示していますが、スマホとPCで表示を変えることもできます。その方法も、こちらのページ内でご紹介しますので、参考にしてみてくださいね♪

ギャラリーの代わりに。
簡易的なポートフォリオとして。
アルバム機能として。
最新情報・お知らせの代わりに。

Smash Balloon Social Photo Feedをインストール

ではさっそく、ワードプレスのプラグイン「Smash Balloon Social Photo Feed」をインストールしていきましょう。

Smash Balloon Social Photo Feedですが、以下のような特徴があります。

簡単にInstagramのフィードを、ワードプレスに表示できる(ショートコードで簡単)
Instagramの更新を自動で反映できる
レスポンシブ対応のため、スマホ用・PC用で表示を変えられる
無料で使える
表示のカスタマイズが細かくできる(写真の間隔・表示の枚数)
Smash Balloon Social Photo Feedは無料で使えて、設定や表示も簡単なところが、一押しのプラグインです!
ではインストール方法をみていきましょう。
ダッシュボード > 「プラグイン」> 「新規追加」をクリック
Instagramにアップされた写真を、WordPressブログに自動連携1
検索ボックスに「Smash Balloon Social Photo Feed」を入力してクリック
Instagramにアップされた写真を、WordPressブログに自動連携5
表示結果から「Smash Balloon Social Photo Feed」を選択して、「今すぐインストール」をクリック
Instagramにアップされた写真を、WordPressブログに自動連携6
インストールが完了したら「有効化」をクリック
Instagramにアップされた写真を、WordPressブログに自動連携7
以上で、インストールは完了です!
続いて、設定も行っていきましょう。
Ad

Smash Balloon Social Photo Feedの基本的な設定

簡単にプラグインをインストールできましたね。先ほど、「有効化」を行っているため、すでにダッシュボードの中にメニューが表示されています。
ダッシュボード > 「InstagramFeed」をクリック
Instagramにアップされた写真を、WordPressブログに自動連携8
紺色の「Instagram +Connect an Instagram Account」をクリック
Instagramにアップされた写真を、WordPressブログに自動連携9
Personal か Business か、Instagramのアカウントの種類を選びます
※今回はBusinessアカウントの連携方法になります。
Instagramにアップされた写真を、WordPressブログに自動連携10
青色の「○○さんとしてログイン」をクリック
※Businessアカウントの場合、Facebookとの連携が必須のため、ログイン中のFacebookアカウントの名前が表示されます。
Instagramにアップされた写真を、WordPressブログに自動連携11
連携する、Instagramのアカウント名をクリック > 「次へ」をクリック
Instagramにアップされた写真を、WordPressブログに自動連携12
連携するFacebookページをクリック > 「次へ」をクリック
Instagramにアップされた写真を、WordPressブログに自動連携13
アクセス許可の項目を確認 > 「完了」をクリック
Instagramにアップされた写真を、WordPressブログに自動連携14
「OK」をクリック
Instagramにアップされた写真を、WordPressブログに自動連携15
連携するInstagramのアカウントの横にチェック > 「Connect Accounts」をクリック
Instagramにアップされた写真を、WordPressブログに自動連携16
Instagram Accounts に、あなたの連携したInstagramのアカウントが表示されます
Instagramにアップされた写真を、WordPressブログに自動連携17
以上で基本的な設定は完了です。
お疲れ様でした。では、さっそくあなたの固定ページへインスタグラムのfeedを埋め込んでみましょう。

ワードプレスにInstagramを表示する

インストールから最初の設定が終わりましたので、さっそくInstagramのフィードをあなたのワードプレスに表示してみましょう。

表示方法は非常に簡単です。

[Instagram-feed]を表示した場所へ、追記するだけ

スクリーンショット 2020-03-14 12.11.38

コードを追加したページを表示してみましょう。

あなたのInstagramのフィードが表示されています。

 

 

Instagramの細かい表示をカスタマイズ

ここからは、インスタグラムを表示する際の細い設定をご紹介しています。

必要な方は、以下を参考に表示を変更してみてくださいね。

インスタグラムの同期設定

インスタグラムの投稿を、どれくらいの頻度で読み込むか設定できます。

デフォルトの設定は1時間毎になっていますので、必要な方はカスタマイズしてみましょう。

変更後が必ず「変更を保存」をクリックしましょう。

スクリーンショット 2020-03-14 12.10.55

表示のカスタマイズ

続いて表示のカスタマイズになります。

番号事にいくつか設定項目がありますので、ご自身の必要な部分を変更してみてくださいね。

Instagramにアップされた写真を、WordPressブログに自動連携2

  1. Width of Feed →インスタグラムを表示する幅を指定します。デフォルトはページの横幅いっぱいの100%。
  2. Height of Feed  →インスタグラムを表示する高さを指定します。デフォルトは表示なし。
  3. Background Color →インスタグラムを表示する背景色を指定します。
  4. Number of Photos →インスタグラムの表示する写真枚数を設定します。
  5. Number of Columns →インスタグラムの表示する写真のカラム数を設定します。1行に何枚の写真を表示するか設定します。
  6. Padding around images →画像と画像の間を設定します。デフォルトは5px。
  7. Disable mobile layout →レスポンシブ表示をオフにしたい場合は、チェックを入れましょう。PCとスマホと同じように表示されます。

 

 

インスタグラムをWordPressに埋め込む方法 まとめ

 

今回は、Smash Balloon Social Photo Feedを使ったインスタグラムのWordpressに埋め込む方法をご紹介しました。

プラグインを使えば誰でも簡単に、あなたのInstagramをワードプレスで紹介できますので、ぜひトライしてみてくださね♪

 

Ad
インスタグラムをWordPressに埋め込む方法 – プラグインを使って簡単実現!
最新情報をチェックしよう!
Ad