JV Instagram

This guide will help you configure and install JV Instagram module, which display your  Instagram image on your Joomla site. This module is fully compatiple with Joomla 2.5 and Joomla 3x, so the parameter configuration is almost the same in two versions. This documentation is based on current latest version of Joomla 3.3. Check it out, you may find it useful!

Download

This extension is totally free! To download this extension, you need to sign up for free membership to get privilege to download this extension. 

After signing up, login to you account, go to download area where you can download the package within 2 clicks

 


 

installation

Once you have JV Instagram downloaded on your computer, navigate to Extensions >> Extension Manager to install the module

If the package has its name as unzip_first.zip. Please extract the package first. 

You can install the extensions by 3 ways, but I am choosing the first one - "Upload Package file", this is the quickest way to install extension on Joomla!,

Browse the package you downloaded, then click Upload & Install. JV Instagram installation is now sucessfully completed.

In case you are not familiar with extension installation or want to find out more about 3 ways of installation on both Joomla 2.5 and 3x, view the following link :

 


 

Enable the module

This is a very important section to make sure the module displayed in front-end.

To successfully enable the module, first, navigate to Extensions  >> Module Manager >> JV Instagram

Then do 3 must pass things:

- Publish the module.

- Select a position for the module.

 

- Assign the module to specific page(s)/menu item(s)

Select tab Menu Assignment in the bar below the module title. In this tab, there are four types that you can select: On all pages, No pages, Only the pages selected, On all pages except those selected. 

New installed module will be assigned on No pages by default, so you need to assign the module to specific pages/menu items. 

 


 

Instagram Basic Settings

Also in the backend, go to Extension >> Module Manager >> JV Instagram >> Tab Instagram Basic Settings. 

In this tab, you need to input Client ID, Client Secret and redirect URL then Click "Connect Instagram" and click on "Authorize" button on popup window.

The popup window will redirect to your website automatically. Please copy access_token in url popup window and paste in to "Access token" field

You can also:

- Use a diffrent layout from the supplied module or overrides in the template.

- Add module class suffix

- Load Jquery or not

- Use Image Box or not

To create Client ID and secret, please take the following stebs:

1. Create Instagrame Account if you haven't had one yet

Go to https://instagram.com/developer and

2. Create Client ID if you haven't had one yet

- Sign in using your account

- Click on "Manage Client" menu on the top right

- Click on "Register a New Client" and complete  the form: 

  • Application Name : Choose an appropriate name for your application, for example My Instagram Gallery.
  • Description : Write a few words that describe your application, for example "Sharing Instagram Photos".
  • Website : The URL of your website, for example https://www.mywebsite.com
  • OAuth redirect_url : the root URL of your website, for example https://www.mywebsite.com

After registering you will get Client information, for example:

 


 

Image Box Settings

In this tab, you can config imagebox, including:

- Select style: image or text

- Select custom image

- Select showing image: click or hover

- Select position

- Input open speed in ms

- Select corner style: Round or straight

- Select background color: light or dark

- Input box width and height in px

- Input z-index

 

 


 

Instagram Advanced Settings

In this tab, you can do the following:

- Setting image source

- Set number of images

- Set thumbnail size

- Select showing image or link with click on thumbnail

- Style CSS

- Show / hide likes and comment 

- Show or hide info

- Select position: top or bottom

- Select avatar

- Input intro text 1

- Input intro text 2