Web Content Instagram Carousel

Have you ever thought that Liferay could use a little more Instagram? With the power of the Instagram API and the mighty Alloy-UI resource it is possible to integrate Instagram onto your page. Better yet, you can create a carousel to hold the images! See this page for more information about the Alloy-UI carousel. See this great blog post on how to create a carousel for use as a web content display.

 

A web content dispaly consists of two elements, the structure and the template. I will show you the structure to use for both 6.1.x and the newly released 6.2.x. Without any further delay, the structure!

 

Structure

• 6.1.x
• 6.2.x

 

As you can see, there is a difference between the structures for both versions. In this template I am giving the user the option to pick the number of photos to display from Instagram (note that the maximum of photo's that can be displayed is 20), and the option to choose how long each photo will be displayed. If you take a look at the Instagram API you can see that it would also be possible to include options for tags, types of media, likes, comments, etc. For more information about how to include those feel free to leave a comment and I can create a blog post about how to incorporate those features. The best way to figure out how to get it to work is experimenting with the API.

 

                                                   

 

 

Template

 

 

 

 

 

 

As you can see, I am creating some basic styles for the Carousel. Note that you can change all of these styles for whatever you want. You may be asking yourself where a user might find the User Id and Access Token information. These are given out by Instagram. The best way to aquire these is to sign up for developer access with Instagram here. The site will list information about the different end-points (comments, likes, tags) and also how to access various information to display on your page. 

 

There you have it, a beginner and basic Instagram Alloy-UI Carousel, if you have any questions feel free to ask and I encourage you to explore more of the API. It is really cool! For a live demo of the carousel check out World Imapct, I created the carousel for their site. Thanks for reading, see you next time!

 

 

 

 

 

 

 

 

 

[Suraj Bihari]

Thanks Travis!

[Jessica Pertuz]

Thanks Travis! do you have an example with hashtag?

[Travis Cory]

Hello Jessica,

You would end up substituting the variable for the url with a new url variable.

var url = "https://api.instagram.com/v1/users/"+{tag-name}+"/media/recent/?count="+count+"&access_token="+token+"";

This would return photos based on hashtag. Currently the instagram api allows for one hashtag search at a time.

[renush aath]

This is the public using application of clock widget windows 10 is very helpful in every daily routine cause time application https://setclockwindows.com/ for better coincidences.