• Home
  • /
  • Blog
  • /
  • [T3EXT DAY] Plugin for Instagram

[T3EXT DAY] Plugin for Instagram

 

[T3EXT DAY] Plugin for Instagram (EXT:ns_instagram)

What does it do?

Plugin to display gallery, feeds and phototile with clean, customizable and responsive feeds from multiple Instagram accounts.

It's awesome TYPO3 extension which provides you a very attractive frontend display of Instagram images in different view (eg., gallery, phototile) at your TYPO3 website.

1. Instagram Gallery

Typo3-NsInstagram-Gallery

2. Instagram Feeds

Typo3-NsInstagram-Feeds

3. Instagram Phototile

Typo3-NsInstagram-Phototile

1. Overview:

Extension Key: ns_instagram
Extension URL: https://extensions.typo3.org/extension/ns_instagram/
Documentation: https://docs.typo3.org/typo3cms/extensions/ns_instagram/
Support: https://github.com/nitsan-technologies/ns_instagram/issues
Version: 1.0.0
Category: Frontend Plugin
TYPO3 version: (6.0.0 - 8.9.99)

2. Installation:

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

2.1. Install Extension from EM:

  • Switch to the module “Extension Manager”
  • 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 http://typo3.org/extensions/repository/view/ns_instagram/current/ by downloading either the t3x or zip version. Upload the file afterward in the Extension Manager.

Typo3-NsInstagram-install-1

2.2. Preparation: Include static TypoScript:

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

  • Switch to the root page of your site.
  • Switch to the Template module and select Info/Modify.
  • Click the link Edit the whole template record and switch to the tab Includes.
  • Select [NITSAN] NsTwitter (ns_instagram) at the field Include static (from extensions):

Typo3-NsInstagram-install-2

3. Instagram API Configuration

3.1. To activate the Twitter 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.

Typo3-NsInstagram-config-1-1

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

Typo3-NsInstagram-config-2-2

Step 4: Replace "CLIENT_ID" and "REDIRECT_URI" in below URL which you get from there.
https://www.instagram.com/oauth/authorize?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&scope=basic+public_content&response_type=token

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

Typo3-NsInstagram-config-3

Configuration

  • Step 1: Switch to the root page of your site.
  • Step 2: Switch to the Template module and select Info/Modify.
  • Step 3: Select Category = PLUGIN.TX_NSINSTAGRAM_FEED (5) And PLUGIN.TX_NSINSTAGRAM_PHOTOTILE (5)
  • Step 4: Add Access Token and Add Jquery (Optional) in it.
  • Step 5: Now Add plugin in to page where you want to show your Instagram Feeds. Checkout following Screen-Shots.

Typo3-NsInstagram-config-4-1

Typo3-NsInstagram-config-4-2

Typo3-NsInstagram-config-4-3

Typo3-NsInstagram-config-4-4

Typo3-NsInstagram-config-4-5

Typo3-NsInstagram-config-4-6

4. Clear Cache:

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

5. 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

 

Sanjay Chauhan - TYPO3 Technopreneur

Sanjay Chauhan - TYPO3 Technopreneur

A young technology enthusiast and entrepreneur. At 24, he co-founded NITSAN – a TYPO3 Agency in Bhavnagar, India. He is sought-after marketing face of NITSAN, is accredited with the management of customer-service teams, collaborations with agencies and clients, projects executions, and more. A tech guy in every sense of the word, Sanjay is the real TYPO3 Guru at NITSAN.


Leave A Comment

Read Also