Blog single

[T3EXT DAY] Plugin for Instagram

Photograph sharing in social community, Instagram, is trending rapidly. With more than 400 million dynamic clients, it is no big surprise more brands are jumping on board that Instagram prepares. While there are numerous business tools for Instagram, the inquiry for website designers turns out to be: how can you integrate Instagram in a website?

Key features of ns_instagram extension:

  • Super simple to set up
  • Display photos from multiple Instagram accounts in the same feed or in separate feeds
  • Completely responsive and mobile ready – layout looks great on any screen size and in any container width
  • Completely customizable – Customize the width, height, number of photos, number of columns, image size, background color, image spacing and more!
  • Display multiple Instagram feeds on the same page or on different pages throughout your site
  • Use the built-in shortcode options to completely customize each of your Instagram feeds
  • Display thumbnail, medium or full-size photos from your Instagram feed
  • Infinitely load more of your Instagram photos with the ‘Load More’ button
  • Includes a Follow on Instagram button at the bottom of your feed

1. Front-end view after plug-in installation

  • Instagram Gallery

  • Instagram Feeds

  • Instagram Phototile

3. Back-end view after plug-in installation

The extension needs to be installed as any other extension of TYPO3 CMS:

3.1 Get the extension

Step 1: Switch to the module “Extension Manager”.

Step 2: Get the extension -

  • Get it from the Extension Manager: Press the “Retrieve/Update” button and search for the extension key 'ns_instagram' and import the extension from the repository.
  • Get it from typo3.org: You can always get current version from https://extensions.typo3.org/extension/ns_instagram/ by downloading either the t3x or zip version. Upload the file afterwards in the Extension Manager.

Step 3: Now install the Extension.

3.2 Activate the TypoScript

Step 1: Go to Template Module.

Step 2: Switch to Root page.

Step 3: Select Info/Modify option from drop-down.

Step 4: Click on Edit the whole template record button.

Step 5: Switch to Includes tab.

Step 6: Search for Extension and after search click on extension name.

Verify that your selected extension move to the selected items.

3.3 Configuration

The extension ships some TypoScript code which needs to be included.

4. Instagram API Configuration

4.1 To activate the Instagram service for your TYPO3 site

Step 1: Signup with Tour Instagram Account at here. https://www.instagram.com/accounts/login/?next=/developer/

Step 2:"Register new Client ID" at there.

Step 3: Go to "Manage Clients" you will get "CLIENT_ID", "REDIRECT_URI" from there.

Step 5: Now you may get "Access Token" in URL. Copy that and Paste it in to this Extension.

4.2 Configuration

Step 1: Switch to the Template module and select Info/Modify.

Step 2: Switch to the root page of your site.

Step 3: Select Constant Editor from drop down.

Step 4: Select Category - PLUGIN.TX_NSINSTAGRAM_FEED (5) And PLUGIN.TX_NSINSTAGRAM_PHOTOTILE(5).

Step 5: Add Access Token and Add Jquery (Optional) in it.

Step 1: Go to page module.

Step 2: Select page where you want to add this Extension.

Step 3: Switch to Plugin tab.

Step 4: Open the General Plugins.

Step 5: Shift to plugin tab.

Step 6: Select Instram option as per the requirement.

5. Clear clearing

Please, clear cache from top panel 'Flush frontend caches' & 'Flush general caches'. It will be also great to clear cache from Install tool too.

6. Support

Feedback & Suggestions

Just download & try the EXT:ns_instagram extension. You can write down your feedback/suggestion/comments to below comment box. So, we will adapt it for next version of EXT:ns_instagram.

Now, show your beautiful Instagram Feeds at your great TYPO3 site

Contribute to TYPO3 by becoming my Patreon

As I love TYPO3, I would like to furnish TYPO3 people with informative content, tutorials, and experiences by composing regular TYPO3 blogs “as to give back to the community”.
To hold adding to our extraordinary OpenSource TYPO3 projects and network, I'm looking my Patreon www.patreon.com/sanjay_nitsan

Write comment

Name*

URL

Comment*

    No comments

Great things in business are never done by one person.

Get in Touch