Skip to content

Instantly share code, notes, and snippets.

@iamphill

iamphill/Instagram.md

Last active Aug 29, 2015
Embed
What would you like to do?
Instagram shadow DOM
<html>
<head>
<script src="instagram.js"></script>
</head>
<body>
<instagram-box></instagram-box>
</body>
</html>
var css = '@import "/css/style.css";';
define([], function () {
var url = 'https://api.instagram.com/v1/tags/brockhole/media/recent?client_id=CLIENT_ID&count=12';
var Instagram = Object.create(HTMLElement.prototype);
Instagram.createdCallback = function () {
this.root = this.createShadowRoot();
// Append CSS
var style = document.createElement('style');
style.textContent = css;
this.root.appendChild(style);
// Get data
this.getData();
};
Instagram.getData = function () {
var self = this;
// Create JSON script element
var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
var script = document.createElement('script');
script.src = url + '&callback=' + callbackName;
// Create JSONP callback
window[callbackName] = function (data) {
delete window[callbackName];
self.root.removeChild(script);
self.dataCallback(data);
};
this.root.appendChild(script);
};
Instagram.dataCallback = function (d) {
var self = this;
// Loop data
var holder = document.createElement('div');
holder.className = 'row no-gutter';
d.data.forEach(function (insta) {
// Create new Instagram element
var div = document.createElement('div');
div.className = 'col-xs-6 col-sm-3';
// Create link
var link = document.createElement('a');
link.href = insta.link;
link.target = '_blank';
// Create image
var img = document.createElement('img');
img.src = insta.images.standard_resolution.url;
img.className = 'img-responsive';
link.appendChild(img);
div.appendChild(link);
// Append
holder.appendChild(div);
});
this.root.appendChild(holder);
};
var InstagramBox = document.registerElement('instagram-box', {
prototype: Instagram
});
});

Instagram Shadow DOM

This creates a new element instagram-box element which displays 12 recent images with a specific tag.

Taken out of a project due to the polyfill failing in IE9. Works natively in Chrome, needs polyfilled for all other browsers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.