This Instagram module enables you to share the feed of an Instagram user. A feed of a number of images is being displayed, you can set the number of images by yourself. You can customize the look and feel of the feed by using the CSS (described in the instagram.js file).
Important note: Within the module folder you can find the file instagramfeed.json. This file contains the feed of a Weborama Instagram account. Please replace this json file with your own feed > https://www.instagram.com/user/media/
(user is your username). Save this file as instagramfeed.json. When your creative is ready, and you are about to notify the flight to our Sales and Traffic department, please mention that your are making use of an Instagram feed, and include the link of your live feed: https://www.instagram.com/user/media/. By using a proxy tool your feed will be updated every 5 minutes once the creative is live (done by the Weborama Traffic team).
It is not possible to use hashtags for this feed. If you would like to make use of a hashtag feed, there are other (custom, not predefined) options: 1) you create your own hashtag feed by using the Instagram API, please note that you need to have an Instagram Client ID. If you have a Client ID you can also create a hashtag feed easily by using the external library Instafeed.js. 2) If you do not have a Client ID you can also add (saved) images to your HTML file, and set an exit click to the hashtag page, for example: #amsterdam.
- Download the attached ZIP file (instagram.zip).
- Add the following script to your .html file, in the <head> after the other scripts
<script type="text/javascript" src="instagram.js"></script>
- Call this function when the document is ready:
createFeed();
- Add this div tag to your body, within the stage div:
<div id="ig-images"></div>
Set positioning within the CSS part referring to the same div ID. - Add the following CSS of the feed images to your HTML file:
.ig-img {
position: relative;
display: inline-block;
width: 85px;
height: 85px;
margin: 5px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
You can edit the width and height of the images by using the CSS above. Make sure that the ig-images div has the position value 'absolute'. - Set the number of images that you would like to show within the settings in the instagram.js file (var nrImages).
- Note. Do not forget to upload the JavaScript and JSON file to the Weborama Previewer together with your other files.
Comments
0 comments
Please sign in to leave a comment.