Stilero Webdesign

Joomla instaGallery Documentation

Rate this item
(0 votes)
This documentation helps you set up and install the module instaGallery, that helps you display your Instagram images on your Joomla site.

This documentation is valid for all versions of instaGallery.

Installation

Install the plugin like any other extension. For details on how to install extensions, look at the installation guide at the Joomla community.

Create the module

To add the module on your website, go to extensions > module manager and click on New to create the module. Click on the module that says instaGallery.

Choose a name for your module and a position, where you want the gallery to be displayed.

Setup Instagram

A bug in Internet Explorer stops the setup from working in some cases. Use FireFox or Chrome for the first setup of the plugin.

Login to your developer account

The first step you need to do is to setup Instagram to work with your module. Go to the Instagram settings tab and click on the Register your application-link.

instagram settings

You will now be redirected to the Instagram page for developers. To login as a developer, you simply use the same login details that you use to login to Instagram.

Create your application

When you're logged in as a developer on Instagram, you'll find a "register your application" button on the frontpage. Click on this button to create your application. If you don't see the frontpage, just go the the page http://instagram.com/developer/

In the upper right corner you click on the "register new client" button.

Fill in the following:

 

  • Application Name - Choose an appropriate name for your application, for example My InstaGallery
  • Description - Write a few words that describe your application, for example "Displays Instagram images on my Joomla site".
  • Website - The URL of your website, for example http://www.mywebsite.com
  • OAuth redirect_url - the root URL of your website. Copy the Redirect URI from the InstaGallery module settings, and paste here. It is crucial that this adress is exactly the same as you have in the module settings, otherwise the module won't work.
Click on "Register" to finish your registration.

Authorize the application

On the Instagram developer page, you'll now find the Client ID and Client Secret of your new Instagram application.
Copy the Client ID from the Instagram page, and paste in the module settings field for Client ID.
Do the same procedure with the Client Secret, and the "Connect to Instagram" button will now appear.

 

Click on the Connect to Instagram button, and the app redirects you to Instagram where you must authorize the app to use your account. Just click on the Authorize button to complete the authorization. Don't forget to save before you continue.

Setup the Module

Click on the tab with the Basic Options, to setup the module.

Image type

This setting handles the type of images that you want to display from Instagram.

 

  • Recent user images - This will display the latest images that You've shared on Instagram.
  • User feed - Displays the latest images from you and the people you follow, from your stream. This basically displays the images you would find on the home page of the Instagram mobile app.
  • User likes - Displays the latest images that you've liked.
  • Most popular - Displays the currently most popular images on Instagram.

Num of images

Set the number of images that you want to display in your gallery. You can set a number between 1 and 30. The maximum of 30 is due to Instagram limitations.

Thumb size (px)

Set the thumb size in pixels. You can use a value between 1 and 150 pixels.

Pre-text

If you want to display an introtext before your image, you can enter this here. You can also use HTML tags here to further style your text.

Post-text

If you want to display a text after your image, you can enter this here. You can also use HTML tags here to further style your text.

Tips

Multiple gallery types

Add multiple InstaGallery modules to your website and choose different image types for each module.

Multiple accounts

You can add as many InstaGallery modules as possible on your website, and it's also possible to use different Instagram accounts for each module. To use different accounts you would simply just log out of Instagram after creating the first module. Then login to a different account during the creation of the next module and so on.

Use with Widgetkit and other extensions

The module follows Joomla MVC standard, and is fully customizable. This means that you could easily override the standard template, and even make the module work with extensions like Widgetkit. My personal photography website is for example using the Yootheme's Widgetkit with the polariod effect: http://www.ilovephoto.se/index.php/sv/instagram with the following code in the template override

<div class="wk-gallery wk-gallery-wall clearfix polaroid ">
<?php foreach ($userInfo as $image) { ?>
<a class="" href="/<?php echo $image['full'];?>" data-lightbox="group:25-4fa6cb3aaf15c" title="<?php echo $image['caption'] ?>"><div><img src="/<?php echo $image['thumb'] ?>" alt="image1" height="150" width="150" /><p class="title"><?php echo $image['caption'] ?></p></div></a>
<?php } ?>
</div>

Troubleshooting

On some servers Instagram doesn't accept the redirect_uri.
 
If Instagram complains about incorrect redirect URI, you can try changing the redirect URI 
from 
yourExactAdminAdress
to
yourExactAdminAdress/modules/mod_instagram/helpers/catcher.php
 
in both the plugin settings and in your Instagram app.
Daniel Eliasson

A programmer and webdesigner with over 15 years of experience in different programming languages with a toolbox consisting of: Objective C, JAVA, C++, PHP and many more techniques.

Media

instaGallery Setup

Stilero on Twitter

Follow Stilero Webdesign

 

 

Google+