Download the PHP package andersbjorkland/instagram-display-extension without Composer

Instagram Display Extension

Author: Anders Björkland Contact: [email protected] Twitter: @abjorkland

This Bolt extension can be used to display your Instagram posts on your website. Add {% include '@instagram-display-extension/_div.html.twig' %} to a template where you want to display it.

An example usage with the base-2021 theme:

The resulting section would look like this: In this example the results_per_page is set to 2.

Installation:

When installing this extension, there will be two tables added to your database:

• bolt_instagram_token - used for storing your instagram token.
• bolt_instagram_media - used for storing meta-information about Instagram images and video.

When using this extension, you will be fetching media via Instagram Basic Display. A Facebook developer account is required. You can then create an app with the Instagram Basic Display product. Use https://mydomain.com/extensions/instagram-display/ for "Valid OAuth Redirect URIs" field. Use https://mydomain.com/extensions/instagram-display/deauthorize for "Deauthorize Callback URL" field. Once this is done, you will find Instagram App ID and Instagram App Secret. Add these as environment variables on the form as:

This extension will look for these environment variables and use them when you authenticate your website with your Instagram account, and on the api-calls to fetch media from your Instagram account.

If you need to add a table manually you can execute these commands:

• MySQL:

• SQLite:

• PostgreSQL:

A note on PostgreSQL: If you haven't set up using it previously you may have to update config/packages/doctrine.yaml and change doctrine:dbal:charset to utf8 if it was configured with utf8mb previously. Look into changing this if you see an exception with invalid value for parameter "client_encoding": "utf8mb4".

Removing

If you don't want to be using the Instagram Display Extension, you may want to remove the corresponding database tables.

• MySQL

• SQLite

• PostgreSQL

You may also want to remove any media files stored from Instagram. Clear these in public/files/instagram, the command for this is:

Using the Twig thumbnail function generates images under the directory public/thumbs. You'll find the Instagram media files under the thumbs-subdirectory corresponding to your chosen thumb-size. Using the default size will place the media-files at public/thumbs/400×300×c. Clear this directory with:

Configuration

The configuration file is found at config\extensions\andersbjorkland-instagramdisplayextension.yaml.

• You can configure upload location, though default files/instagram is recommended to make the thumbnail-function work.

• Specify if you want the default style for the twig-partial (_div.html.twig) to be active.

• Specify height and width for the media-files. This will crop the image to the specified dimensions. Setting either to null will keep the media file's original aspect ratio. Setting both to null will keep the image's original size.

• Dictate what colors to use for the pagination button and links.

• Determine if you want to show video media, and weather it should be stored on your server.

Feedback is Welcome

Please reach out to me at [email protected] if you have suggestions for features or improvements. You may open issues and push requests for said issues as well.

If you want use this code in your own extension you are free to do so as it is licensed under the MIT-license. Remember to provide the same generous license for the parts that is based off of this though.