README

The Instagram Feed block lets users display Instagram posts on a page.

Description

A powerful and flexible feed block for the WordPress block editor that connects to Instagram API to display your latest posts.

The block provides a complete Instagram integration with OAuth authentication, automatic token refresh, and customizable display options. It includes multiple blocks for different parts of an Instagram post (media, caption, etc.) and supports both list and grid layouts.

The icons are from Themify Icons.

Features

Instagram API Integration: Secure OAuth authentication with automatic token refresh
Flexible Layouts: Support for both list and grid display layouts
Customizable Posts: Control the number of posts to display
Modular Design: Separate blocks for media, captions, and other post elements
Automatic Caching: Built-in caching system for optimal performance

Installation

Manual Installation

Download the plugin ZIP file from the GitHub repository.
Go to Plugins > Add New > Upload Plugin in your WordPress admin area.
Upload the ZIP file and click Install Now.
Activate the plugin.

Install with Composer

To include this plugin as a dependency in your Composer-managed WordPress project:

Add the plugin to your project using the following command:

composer require pixelalbatross/instagram-feed-block

Run composer install to install the plugin.
Activate the plugin from your WordPress admin area or using WP-CLI.

Setup

Account Requirements

Your Instagram account must be a Business or Creator account
To convert your account: How to switch to a professional Instagram account

Step 1: Create App

Go to the Facebook Developers Portal and click Create App
Enter your app name (e.g., "My Website Social Feed" or "Company Social Media") and your contact email address
Click Next
Under Filter by, select Others
Choose Other as use case and click Next
Select Business as app type and click Next
Click Create app

Step 2: Configure App

Go to App settings > Basic:
- Add your Privacy Policy URL and Terms of Service URL
- Add your website domain to App domains: yourdomain.com
- Click Save changes
In the app dashboard, under Products, click Add Product
Click Set up in Instagram
Copy your Instagram App ID and Instagram App Secret (Do NOT use the credentials from App settings > Basic)
Click Set up under Set up Instagram business login
Add the following Redirect URL: https://yourdomain.com/instagram-feed-block/oauth-callback
Click Save

Step 3: Configure Plugin

Go to Settings > Instagram Feed Block in your WordPress admin
Enter your Instagram App ID and Instagram App Secret and click Save
Click Connect Instagram Account
You will be redirected to Instagram where you can log in with your username and password
After login, you will see a permissions window. The only permission required is the one that mentions "access media"
Click Allow
You'll be redirected back to WordPress with your connection configured

4. Add the Block

In the block editor, search for "Instagram Feed"
Add the block to your page or post
Configure the number of posts to display
Choose your preferred layout (list or grid)

Usage

Instagram Feed

The main block controls the overall feed settings:

Number of Posts: Set how many Instagram posts to display
Layout: Choose between list and grid layouts
Alignment: Support for wide and full-width alignments

Child Blocks

The Instagram Feed block includes several child blocks:

Post Template: Container for individual Instagram posts
Post Media: Displays the Instagram image or video
Post Caption: Shows the post caption text

Customization

The blocks support WordPress's built-in customization options:

Layout: Full layout support with custom spacing and gaps
Colors: Background and text color customization
Typography: Font family, size, and styling options
Spacing: Margin and padding controls
Borders: Border radius, color, width, and style options

Requirements

WordPress 6.7 or higher
PHP 8.2 or higher
Instagram Business or Creator account
Facebook Developer account
Valid Facebook App with Instagram product configured

Changelog

A complete listing of all notable changes to this project are documented in CHANGELOG.md.

pixelalbatross / instagram-feed-block

Maintainers

Details