Instagram Widget For SDL Tridion Reference Implementation

SDL Tridion Reference implementation has been created with extensibility in mind, therefore it is possible to add new functionalities in the form of new modules. This module is designed to showcase the extensibility mechanism, adding a new Instagram widget that can be used in 3 Column and Full Width layouts

Homepage

Instafeed (http://instafeedjs.com) is used to integrate with Instagram API and encapsulates all logic to retrieve the images. Minor changes have been done to Instafeed source code to fix compatibility issues with bootstrap

Features

  • Independent Module CSS

  • Independent Module Configuration

  • Images retrieved configurable by the editor

  • Experience Manager Enabled

  • 2 Component Templates

    • Instagram Widget

    • Instagram Widget [3-Column]

  • 1 Schema

    • InstagramWidget

Installation


The following steps assume you already have a STRI installed and working, all paths refer to defaults. If you have not yet installed STRI, you can do it in less than 20 minutes

1. Download the zip file that you can find at the end of the article and extract it in your CMS server

2. Edit the file "\import\import.ps1" to set the proper credentials and run the script on the PowerShell console

Powershell

3. You will require an Instagram client id to be able to connect with Instagram API. If you don�t have one, you can get it at: http://instagram.com/developer/

4. Open �Instagram Configuration� component located in �\100 Master\Building Blocks\Modules\InstagramWidget\Admin� and enter your Client ID

Client Id

5. Publish the "Publish Settings" and "Publish HTML Design"pages located in �\400 Example Site\Home�

6. Open STRI solution Site.sln and copy \web\Areas folder into the root folder of you solution. Site.sln solution can be found on the src folder of the STRI Installation zip file

Solution

7. Rebuild and publish your Web Application. Make sure to uncheck �Delete all files prior to publishing�, or you will overwrite all configuration and Jar files!

Editorial Process example


Adding an Instagram widget is a simple process. To illustrate the process we will add a 3 Column widget to the homepage

1. Create a new component using InstagramWidget schema and fill content + metadata

New Component

2. Add the new component to the Homepage, replacing one of the 3 Column presentations and select the �Instagram Widget [3-Column]� component template

3. Publish the home page


 TIP: If the styles are not applied properly or you receive a configuration not found error, reload the web application configuration by accessing the admin page http://youwebsitedomain/admin/refresh 


 

Widget Alone


Developer
:    Angel Puntero
Company
License agreement
Tags
:    SDL,  Tridion,  reference,  implementation,  2013 SP1,  Instagram
Version
:   1.0
Source
:   Yes

About the Author
Angel Puntero
Senior Technical Consultant

Versatile consultant and specialist in content management systems. Angel has been working for SDL since 2012 and in SDL Tridion related implementations since 2008

SDL CMT division