The Joomla! Community Magazine™

How to Create an Instagram Feed Widget in Joomla

Written by | Tuesday, 01 October 2013 00:00 | Published in 2013 October
Adding an Instagram feed to a Joomla site is easier than you probably think, and has the potential to really amplify a site's appeal. Here's why feeds can be a great addition, and step-by-step instructions for adding one.

There are two surefire ways to make a website interesting: keep it current, and keep it visual.

Are these concepts revolutionary? Hardly.

For a while now, web trends have embraced fluidity in design and presenting a stream of freshly updated content to users. Designers are constantly innovating and developing new ways to pique our ever-shortening attention spans.

As for me, I'm not a professional designer. I recently started building my first Joomla site, which has been a labor of love. Despite my nascent technical abilities, I've tried to embrace bigger concepts like imagery and "freshness" wherever possible on my site and learn as I go.

To harness both of these ideas, I tried adding an Instagram feed to a module on my homepage. Whenever I upload an image to my Instagram account, it displays at the bottom of my site's homepage like this:

instagram-image
Don't get too distracted by those bacon wrapped chicken poppers, because we've got skills to learn.

I have to confess, most of the Joomla abilities I have were learned through persistent Googling and patient YouTube tutorial watching. I've gotten great advice from people I'll never be able to personally thank, so I'm returning the favor by putting out (what I hope is) some helpful guidance of my own.

Here's a step-by-step guide to create and add your own Instagram feed widget to a Joomla site:

  1. Select an embed code provider from the handful you can find via search (I used SnapWidget

  2. Create the widget you'd like by entering your Instagram user name. In SnapWidget you can customize display options like thumbnail size, background color (you could make the color blend into your module if wanted), border, sharing buttons, and more. If you want, you can set the widget to only display images you upload with a specific hashtag.

    instagram-widget-create
  3. Preview your widget and make any adjustments needed. Here are a few variations of my feed:

    instagram-feed-preview  instagram-feed-preview  instagram-feed-preview
  4. Click "Get Widget" and copy the embed code in entirety

    instagram-feed-embed
  5. Head on over to your Joomla back end, and go into the Module Manager

    joomla-module-manager
  6. Create a new Custom HTML module

    html-module
  7. Give your module a title. Keep in mind this title will be displayed in the module on your page unless you select the Hide option. Set the module to published, and select a position (where it will display on your page)

    joomla-new-module
  8. Select the "Custom Output" tab, and paste your embed code from SnapWidget (HTML not working? Go into your Global Configuration Pannel from the System drop down in the top left of your window, and change your Default Editor to CodeMirror)

    insert-embed-code
  9. Select the "Menu Assignment" tab and choose which pages you'd like the module to display on

    module-assignment
  10. Hit the green Save button in the top left. Head back to your site and check it out!

Keep in mind that you can always change the position of your module to have the feed appear on a different part of the page. But beware, if you set your module to a different position your feed will not automatically fit to the new module size.

For example, when I switch my module from "Bottom A" position to "Innerbottom", it displays like this:


Not so great. So, if you change your module position, remember to change your image dimensions by generating a new embed code with the adjusted sizes.

Can't get enough Instagram? You can also embed single images with the new embedding tool Instagram introduced a few months ago. Learn about it here.

Happy sharing!

Read 18268 times
Tagged under Designers, English
Shannon Good

Shannon Good

Hello there! I'm Shannon, an Inbound Marketing Consultant at Savvy Panda and jInbound, and Instructor at Master Inbound. I enjoy driving growth for businesses through customized Inbound solutions, and learning new things each day about the evolving online marketing ecosystem.

Find me on Twitter, LinkedIn and Google+ to connect!