MENU
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ

カテゴリー

  • 趣味
  • WordPress
  • 本棚
  • プログラミング
  • 日記
  • WEBデザイン
  • フリーランス

タグ

Adobe Illustrator Gatsby.js HTML/CSS MySQL Node.js Python SWELL WordPressプラグイン おすすめツール エックスサーバー セキュリティ バレットジャーナル 確定申告 開発環境

アーカイブ

  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年8月
  • 2020年10月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年8月
  • 2019年5月
  • 2019年2月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2017年10月
プログラミングとデザインでものづくりを楽しむブログ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
  1. ホーム
  2. WordPress
  3. InstagramフィードをWordPressに表示させるプラグイン

InstagramフィードをWordPressに表示させるプラグイン

2022 3/26
WordPress
2021-10-21 2022-03-26

WordPressサイトにインスタグラムの最新投稿を表示させるにはどうしたらいいですか?

エミ

「Smash Balloon Social Photo Feed」を使うと簡単にインスタグラムのフィードをウィジットなどに表示できます!

この記事は、こんな方におすすめです!
  • Instagramの画像をWordPressのサイドバーやフッターに表示させたい
  • InstagramのフィードをWordPressサイトに埋め込みたい
目次
スポンサーリンク

WordPressプラグイン「Smash Balloon Social Photo Feed」でできること

Smash Balloon Social Photo Feedはインスタグラムの投稿を自動で表示してくれるプラグインです。

オプションで表示項目を調節できるので、サイトのデザインに合わせてフィードを表示させることができます。

※プラグイン設定時にインスタグラムのアカウント情報が必要です。

Smash Balloon Social Photo Feedの機能
  • Instagramアカウントと連携し、フィードを表示できる
  • フィードの幅、高さ、背景色、表示する写真の枚数、列や行数を自由に設定できる
  • フィードヘッダー、プロフィール文章、さらに読み込む、フォローボタンなどの表示/非表示を調節できる

インスタグラムの表示手順〜Smash Balloon Social Photo Feedの設定〜

プラグインのインストール

管理画面のプラグイン>新規追加から、Smash Balloon Social Photo Feedをインストールし、有効化します。

Smash Balloon Social Photo Feedの設定

Instagramアカウントと連携

管理画面のサイドバーに「Instagram Feed」が追加されるので、設定を開きます。

Smash Balloon Social Photo Feedの設定

設定画面の「Instagramアカウントを連携する」ボタンをクリックします。

Smash Balloon Social Photo Feedの設定

ブラウザでSmash Ballonのサイトが開きますので、Connectボタンを押します。

Smash Balloon Social Photo Feedの設定

Instagramのアカウントのメールアドレス/パスワードを入力しログインします。(すみません、画像はないです。)

許可するを押します。

Smash Balloon Social Photo Feedの設定

WordPressの管理画面に戻りますので、アカウントを接続するボタンを押します。

Smash Balloon Social Photo Feedの設定

インスタグラムアカウントと連携できました。

Instagramフィードを表示させる

投稿/固定ページに表示する場合には、ブロック>Instagram Feedを選びます。

サイドバーやフッターに表示する場合には、ウィジットでInstagram Feedを選択します。

ウィジットが追加されたところ

instagram-feedがフィードを表示するショートコードなので、削除しちゃうとウィジットの表示がされません。

ページでの表示

オプションで、Instagramフィードの表示レイアウトを変更する

オプションを設定すると、フィードに表示する内容やレイアウトを変更できます。

オプションで変えられること
  • フィードの幅、高さ
  • 表示する写真の枚数、列数、写真周りの余白
  • 写真の表示順(ランダム、新着順)、写真の解像度、モバイルレイアウトの有効/無効
  • フィードヘッダーの表示/非表示、自己紹介の表示/非表示、自己紹介文、アバター画像、ヘッダーの文字色、ヘッダーサイズ
  • 「さらに読み込む」ボタンの表示/非表示、ボタンのテキスト、文字色、背景色
  • 「Instagram をフォロー」ボタンの表示/非表示、ボタンのテキスト、文字色、背景色

Instagram Feed>設定の「3.フィードの表示」のタブでオプションが確認できます。

投稿/固定ページの場合には右側のショートコード設定にオプションを入れて、「変更を適用」ボタンを押すとと表示のレイアウトを変更できます。

ウィジットの場合は、instagram-feedの後にオプションを追記していきます。

下記のように、フッターに一列横長で表示させても可愛いかもしれません。

[instagram-feed imageres=full num=8 cols=8 imagepadding=0 showheader=false showbutton=false showfollow=false]

※numとcolsの数を揃えることで1列表示にしています

Smash Balloon Social Photo FeedでInstagramフィードを簡単表示

以上、Instagramのフィードを簡単に表示できるWordPressプラグイン「Smash Balloon Social Photo Feed」の設定方法でした。

この記事のまとめ
  • Instagramの投稿を自動でWordPressに表示するには、プラグイン「Smash Ballon Social Photo Feed」が便利
  • プラグインを有効化したら、Instagramアカウントと連携し、Instagram-Feedのブロックを表示させたい箇所に入れる
  • オプションで表示レイアウトを変更できる

こまやかにレイアウトを変更できるので、WordPressサイトに合わせたInstagramフィードを表示できるのでオススメです。

WordPress
WordPressプラグイン
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • 簡単にWordPressサイトをコピーする方法【All-in-One WP Migration】
  • WordPressをサブディレクトリにインストールする手順

関連記事

  • 【2022年版】Smash Balloon Social Photo Feedの使い方〜インスタグラムを表示できるプラグイン〜
    2022-03-25
  • WordPressでホームページを作れるようになるまでに私が学んだこと
    2022-01-30
  • 【図解】WordPressのテーブル構造はどうなっているの?
    2021-12-03
  • WordPressの投稿に管理者用メモをいれるプラグインを作る
    2021-11-29
  • 記事をランダム表示するウィジェットを作る
    2021-11-27
  • Snow Monkey Formsでお問合せフォームを作成する
    2021-11-17
  • WordPressプラグインを作ってみる。はじめの一歩。
    2021-11-10
  • 【初心者向け】WordPressを安全に使いたい!Wordfence Securityの設定方法
    2021-10-31
Zero Forest
カテゴリー
  • WordPress (30)
  • プログラミング (17)
  • WEBデザイン (6)
  • フリーランス (7)
  • ライフログ (10)
    • 趣味 (2)
    • 本棚 (3)
    • 日記 (5)
タグ
Adobe Illustrator (2) Gatsby.js (3) HTML/CSS (7) MySQL (1) Node.js (2) Python (2) SWELL (1) WordPressプラグイン (10) おすすめツール (3) エックスサーバー (4) セキュリティ (3) バレットジャーナル (2) 確定申告 (1) 開発環境 (3)
  • サイトマップ
  • サイトポリシー

© Zero*forest

目次
閉じる