TYPO3 CMS Integration & Extension development
Thomas Deuling

TYPO3 Instagram

Instagram integration for TYPO3

This Plugin enables you to display instagram media from user.

Requires:

  • CURL
  • Instagram API-Access

Get required Access data

First of all, you'll need an Instgram API account.

  1. Register as Instagram Developer

    Open Instagram Website and click the API link in footer menu (https://www.instagram.com/developer/register/).

    Instagram developer signup

    Enter the required data (website-domain and Displaying Feed-Data on Website.) and click Sign up.

  2. Register a new Client ID

    With that developer account, we need to register a new Client ID. Fill out the registration form. If your Website URL is like http://domain.tld, your valid redirect URI will be http://domain.tld?type=1514362271

    Instagram register a new Client ID

    Switch on tab Security. Here you've to check Disable implicit OAuth and uncheck Enforce signed requests.

    Instagram register a new Client ID security

    Finally solve the Captcha and click Register.

    Instagram register a new Client ID overview

    You'll be redirected to the overview page, where you need to continue by clicking on manage.

    Instagram Client ID details

    In this area you'll find th required Client ID and Client Secret. In case of using only own Instagram accounts, you don't need to switch to Production. The Sandbox mode works fine with own accounts.

Configuration

After installing and including of the required static templates, you need to configure your Instagram API data. For that configuration open the Constants editor or alternatively the Themes Module and select Instagram within the filter select box.

Instagram API configuration in Constants-Editor

Instagram API configuration in Themes

Simply enter your generated Client ID, Client Secret and Redirect URI.

Usage

Open the Page-Module and create a new plugin content element of type Instagram. In this content element you'll get some information about your Instagram API authorization status. If you don't have authorized yet, you'll receive an error message like this:

Instagram API not authorized

In order to authorize the API, simply click on Instagram API settings. This will open a configuration page where you can start the authorization by clicking Authorize. Now you're redirected to the Instagram-Website, where you've to login and authorize the API.

Instagram API not authorized

After an successfully authorization you're immediately redirected back to the configuration page. In case of an successfully authorization it appears Authorized! above the configuration buttons.

Instagram API not authorized

Finally your content element should look like this and you're able to use it:

Instagram API not authorized

Define another Instagram-Template

Add Page-TypoScript for creating an additional Template select box item:

TCEFORM.tt_content.pi_flexform.instagram_instagram.sDEF {
    settings\.template {
        addItems {
            CustomLayout = Custom-Layout Label
        }
    }
}

Duplicate the Default partials and modify them as you need:

Partials/Instagram/CustomLayout.html

Use instagram plugin by using TypoScript

Create a marker with the plugin

lib.instagram.owlCarousel = USER
lib.instagram.owlCarousel {
    userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
    pluginKey = Instagram
    pluginName = Instagram
    extensionName = Instagram
    vendorName = CodingMs
    controller = Instagram
    action = show
    settings < plugin.tx_instagram.view
    settings.template = OwlCarousel
    view < plugin.tx_instagram.view
}

Usage in other Fluid templates:

<f:cObject typoscriptObjectPath="lib.instagram.owlCarousel" />

FAQ

How to find a Instagram user id by username?

Use the tool on following page - just enter the username and it returns the related user id: https://codeofaninja.com/tools/find-instagram-user-id

Using Instagram media with OwlCarousel2

The required libraries will be loaded by a CDN.

Support

For paid support send an email to typo3(at)coding(dot)ms