Social networks are very useful in web project promotion and communication with the customers. But they can be very handy as the source of media content for a website. Instagram is a natural photo stream of of visual experience and updates. It would be a mistake to skip it as a media source for a web project.

In this post I would like to introduce “Social photo blocks” WordPress plugin that provides shortcodes and Guttenberg blocks that allow to incorporate Instagram images into your WordPress blog. Here are some basic examples of Guttenberg blocks:

Photo grid:

Photo slider:

Art-Deco building
#pizza
Just a road

As usual, first thing that should be done – “Social photo blocks” plugin should be installed from the WordPress Plugins page. Or it can be downloaded from the plugin page and installed manually.

As far as plugin should be integrated with your existing Instagram account/feed. To do this, you should have the following:

  • A Facebook Developer Account;
  • An Instagram account with photos;
  • Your public WordPress website.

Create Facebook App

Go to developers.facebook.com, click My Apps, and create a new app. Once you have created the app and are in the App Dashboard, navigate to Settings > Basic, scroll the bottom of page, and click Add Platform.

Choose Website, add your website’s URL, and save your changes. You can change the platform later if you wish, but for this tutorial, use Website.

Configure Instagram Basic Display

Click Products, locate the Instagram product, and click Set Up to add it to your app.

Click Basic Display, scroll to the bottom of the page, then click Create New App.

In the form that appears, complete each section using the guidelines below.

Display Name

Enter the name of the Facebook app you just created.

Valid OAuth Redirect URIs

You should take this URL from the Social Photo Blocks plugin settings on you website.

For example: https://website.com/wp-content/plugins/social-photo-blocks/oauth_redirect.php

After you enter a URL, save your changes and check the URL again; we may have appended a trailing forward slash depending your URL structure. Copy the complete URL somewhere since you will need it in later steps to get authorization codes and access tokens.

Deauthorize Callback URL

This URL is not used by the plugin, so you can fill it with some.

For example: https://website.com/wp-content/plugins/social-photo-blocks/deactivate.php

Data Deletion Request Callback URL

This URL is not used by the plugin, so you can fill this with the same as deauthorization one.

App Review

You can skip this section, as far as we are not going and will not have to publish this Facebook App.

Now we should have Instagram App ID and Secret.

Social Photo Blocks Plugin Configuration

Fill the configuration form with the Instagram App ID and Instagram App Secret that were obtained on the previous step and click “Save”.

Now you should click “Login with Instagram” to grant your WordPress website some permissions to access your Instagram account.

It is important to mention here, that rights are granted to your website directly, not some third party service that will be able to collect information about you.

And that is it. Now you can click “Refresh cache” button and start using Guttenberg blocks and shortcodes.

Plugin will keep refreshing cache by itself but this can take up to 15 minutes to see the latest photos from Instagram on your website. This is required to increase the speed of your website and reduce the number of requests to Facebook API. Limits of Facebook API are quite high, but they still exist.

Instagram photo grid on a WordPress website