Instagram Block

Quick links

1. Account Connection

2. Overview

3. Settings

Account Connection

Before you start using the Instagram Block, you must first connect it to your Instagram account. This step is necessary because the media from your Instagram feed cannot be pulled without a given permission.

If you already have an Facebook/Instagram Access Token, you can use it to connect your account by following these steps:

1. Navigate to Sana Panel → Settings in the WordPress Dashboard

2. Click the Sana Blocks tab

3. Turn off the “Generate Token Automatically” toggle and insert your token in the given field

4. Click the Connect button and you are done

If you don’t already have an access token, follow these instructions to generate one:

1. Navigate to Sana Panel → Settings in the WordPress Dashboard

2. Click the Sana Blocks tab

3. Click the Connect button and wait for the redirection

Once you are redirected to the Instagram website, log into your account.

Once logged in a popup will appear, asking you for permissions.

1. Make sure that the Content toggle is turned on

2. Click the Allow button

After giving permissions you will be redirected to the Access Token page where a new token will be automatically generated. No further action is required, simply wait a few moments unit you are redirected back to your Dashboard where your Instagram account is already connected.

Once your Instagram account is connected, you will have two new options available:

Active Connection – By default the current token is valid for 60 days (determined by Meta), before the expiration day you need to click the Extend Token button in order to maintain an active connection.

Update Schedule – Choose how often is your Instagram feed is checked for updates

Overview

In the Gutenberg editor, open the block section and click or drag the Instagram Block to the editor area. Main elements of the block are:

• Subtitle
• Title
• Paragraph
• Media
• Navigation

Settings

If the settings side panel is not visible while working on your page or post, click on the Settings icon in the top left corner of the editor toolbar. Once opened you will see all the available options of the selected block, organized into collapsible tabs.

General

• Content Align – Align the entire block content left, center or right
• Padding – Add top and bottom block padding
• Background – Choose a solid color or a background image

• On/Off toggle – Display or hide the element
• Text Align – Align text left, center or right within its own container
• Font Size – Choose from nine preset sizes or add a custom font size
• Text Color – Select a color for the subtitle, title and paragraph

• Linked Posts – Clicking on an image opens its respective Instagram post
• Show Post Description on hover – Post description appears as alt text on mouse hover
• Include videos – Video posts also appear in the carousel
• Show Icons – Display icons for each post type
• Autoplay – Carousel moves continuously by itself
• Number of Posts Shown – Choose how many post are visible in the carousel
• Shadow – Add a background shadow to the posts

• Position – Position the navigation buttons left, center or right
• Border Radius – Choose how round the button corners will be
• Background Color – Choose a solid color for your navigation buttons
• Arrow Color – Select a color for the navigation button arrows

• Hide on Desktop – Block is visible on mobile, but not on desktop screens
• Hide on Mobile – Block is visible on desktop, but not on mobile screens