pixelalbatross/instagram-feed-block

dev-main 2025-10-31 11:17 UTC

Requires

• php: ^8.2
• composer-plugin-api: ^2.3
• yahnis-elsts/plugin-update-checker: ^5.6

Requires (Dev)

• phpcompatibility/php-compatibility: dev-develop as 9.99.99
• phpcompatibility/phpcompatibility-wp: *
• phpstan/phpstan: ^1.11
• pixelalbatross/coding-standards: dev-main
• szepeviktor/phpstan-wordpress: ^1.3

GPL-3.0-or-later

• Pixel Albatross
• Sérgio Santos

README

An advanced block that lets you display Instagram posts on a page or post, with configurable layout and feed options.

Description

The Instagram Feed Block is a flexible WordPress block that lets you display Instagram posts directly on any page or post.

It connects to the Instagram API using OAuth authentication, handles automatic token refresh, and provides customizable display options.

The plugin includes multiple blocks for different parts of an Instagram post, such as media and captions, and supports both list and grid layouts.

This setup makes it easy to integrate Instagram feeds while giving full control over how posts are displayed in the editor.

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

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

Install with Composer

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

1. Add the plugin to your project using the following command:

composer require pixelalbatross/instagram-feed-block

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

Setup

You'll connect your Instagram Business or Creator account to your website using a Facebook App. This allows the plugin to fetch and display your Instagram feed securely.

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

All Instagram API access goes through the Facebook Developers platform. You'll create a Facebook App that connects to your Instagram Business or Creator account.

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

Step 2: Configure App

1. 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
2. In the app dashboard, under Products, click Set up in Instagram
3. Copy your Instagram App ID and Instagram App Secret (Do NOT use the credentials from App settings > Basic)
4. Click Set up under Set up Instagram business login
5. Add the following Redirect URL (replace yourdomain.com with your site’s domain): https://yourdomain.com/instagram-feed-block/oauth-callback
6. Click Save
7. Go to App Roles > Roles
8. Click Add People
9. Select Instagram Tester role
10. Search for the account connected to your Instagram and click Add
11. The person must accept the invitation:
    • Go to Instagram
    • Go to Settings > Apps and websites > Tester Invites
    • Accept the invitation

Step 3: Configure Plugin

1. Go to Settings > Instagram Feed Block in your WordPress admin
2. Enter your Instagram App ID and Instagram App Secret and click Save
3. Click Connect Instagram Account
4. You will be redirected to Instagram where you can log in with your username and password
5. After login, you will see a permissions window. The only permission required is the one that mentions "View profile and access media". All others you can leave unchanged or toggle off.
6. Click Allow
7. You’ll be redirected back to WordPress. Your connection will appear as Connected in the plugin settings.

4. Add the Block

1. In the block editor, search for "Instagram Feed"
2. Add the block to your page or post
3. Configure the number of posts to display
4. 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.