Skip to content

Instantly share code, notes, and snippets.

@Yogatopia

Yogatopia/Index.html

Last active October 5, 2015 15:07
Show Gist options
  • Save Yogatopia/039b33c0da78d21023df to your computer and use it in GitHub Desktop.
Save Yogatopia/039b33c0da78d21023df to your computer and use it in GitHub Desktop.
Download ZIP
Instafeed.js
Raw
index-latest.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Instagram.js</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="node_modules/instafeed.js/instafeed.min.js"></script>
<style>
body{
font-family: 'Roboto', sans-serif;
}
#instagram .instaIMG img {
margin-right: 20px;
margin-bottom: 18px;
}
#caption_container {
font-size: 20px;
padding-top: 10px;
height: 110px;
/*border: 1px solid red;*/
}
#caption {
/*border: 1px solid green;*/
}
</style>
</head>
<body>
<article>
<div id="instagramWidget" style="display: none;">
<h1>#tmobile4g</h1>
<div id="instagram"></div>
<div id="caption_container">
<div id="caption"></div>
</div>
</div>
</article>
<script>
var i = 1,
nameTag = "tmobile4g",
filterTag = /skateboarden|nkskateboarden/gi;
//filterTag = /kitesurfen|zwembad|kitesurf|kiten/gi;
var feed = new Instafeed({
get: 'tagged',
tagName: nameTag,
clientId: '',
target: 'instagram',
sortBy: 'none',
template: '<a class="instaIMG" target="_blank" title="{{caption}}" href="{{link}}"><img src="{{image}}" /></a>',
resolution: 'thumbnail',
after: function() {
$(".instaIMG").hover(function() {
$("#caption").hide().html($(this).attr("title")).fadeIn("fast");
},function(){
$("#caption").hide();
});
if($.trim($('#instagram').html()).length) {
$("#instagramWidget").show();
}
},
error: function(error){
console.log("Error message: " + error);
},
filter: function(image) {
var match = image.tags.join(',').match(filterTag) || [];
var matchTxt = image.caption.text.match(filterTag) || [];
if(i<=5) {
if (match.length || matchTxt.length) {
i++;
return true;
}else if (image.type == "video"){
return false;
} else {
return false;
}
}else{
return false;
}
}
});
window.onload = function () {
feed.run();
};
</script>
</body>
</html>
Raw
Index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Instagram.js</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="node_modules/instafeed.js/instafeed.min.js"></script>
<style>
body{
font-family: 'Roboto', sans-serif;
}
#instagram .instaIMG img {
margin-right: 20px;
margin-bottom: 18px;
}
#caption_container {
font-size: 20px;
padding-top: 10px;
height: 110px;
/*border: 1px solid red;*/
}
#caption {
/*border: 1px solid green;*/
}
</style>
</head>
<body>
<article>
<div id="instagramWidget" style="display: none;">
<h1>#tmobile4g</h1>
<div id="instagram"></div>
<div id="caption_container">
<div id="caption"></div>
</div>
</div>
<hr>
<h1>@armandlacle</h1>
<div id="instagramFeed"></div>
<div id="messageFeed">
<p></p>
</div>
</article>
<script>
var i = 1;
var feed = new Instafeed({
get: 'tagged',
tagName: 'tmobile4g',
clientId: '',
target: 'instagram',
sortBy: 'none',
limit: '15',
template: '<a class="instaIMG" target="_blank" title="{{caption}}" href="{{link}}"><img src="{{image}}" /></a>',
resolution: 'thumbnail',
success: function(results){
console.log("Success");
},
after: function() {
$(".instaIMG").hover(function() {
//$("#caption").hide().html("<p>" + $(this).attr("title") + "</p>").fadeIn("fast");
$("#caption").hide().html($(this).attr("title")).fadeIn("fast");
},function(){
//$("#caption").hide().html("&nbsp;");
$("#caption").hide();
});
$("#instagramWidget").show();
},
error: function(error){
console.log("Error message: " + error);
},
filter: function(image) {
//return image.tags.indexOf('skateboarden') >= 0;
//return image.caption.text.indexOf('skateboarden') >= 0;
var filterImageText = image.caption.text;
var filterImage = image.caption.text.indexOf('Skateboarden') >= 0;
var filterImageTag = image.tags.indexOf('skateboarden') >= 0;
console.info(i++,"---------------------------");
console.log("Full return: ", image);
//console.log("FilterImageText: ", filterImageText);
console.log("FilterImage in text: ", filterImage);
console.log("FilterImage in tag: ", filterImageTag);
if(image.type == "video"){
return false;
}else if (image.caption.text.indexOf('skateboarden') >= 0){
return image;
}else if(image.tags.indexOf('skateboarden') >= 0) {
return image;
}else {
return false;
}
}
});
var feedUser = new Instafeed({
get: 'user',
userId: "---",
accessToken: '---',
target: 'instagramFeed',
resolution: 'low_resolution',
template: '<a class="instaFeedImg" target="_blank" title="{{caption}}" href="{{link}}"><img src="{{image}}" /></a>',
after: function() {
var el = document.getElementById('instagramFeed');
if (el.classList)
el.classList.add('show');
else
el.className += ' ' + 'show';
},
error: function(error){
console.log("Feed Error: " + error);
}
});
window.onload = function () {
feed.run();
//feedUser.run();
};
</script>
</body>
</html>
Raw
Others.js
var feed = new Instafeed({
resolution: 'standard_resolution',
filter: function(image) {
image.random_size = 460; // <- generate a random number here
return true;
},
template: '<img src="{{image}}" style="width: {{model.random_size}}px; height: {{model.random_size}}px;" />'
});
feed.run();
//------------------------------------------------------------------------------
var randomNo = 0;
var feed = new Instafeed({
get: 'user',
userId: UID,
clientId: 'ID',
accessToken: 'Token',
resolution: 'low_resolution',
filter: function(image){
randomNo = Math.floor((Math.random() * 75) +25);
document.getElementById('imagetemplate').style.width = randomNo+"%";
return image.tags.indexOf('Tester');
},
template: '<a href="{{link}}"><img src="{{image}}" id="imagetemplate"/></a>'
});
feed.run();
//------------------------------------------------------------------------------
var hashtagFeedOptions = {
target: 'insta-hashtag-feed',
get: 'tagged',
resolution: 'standard_resolution',
template: '<div class="insta-obj"><div class="img-container"><a href="{{link}}" class="img-link"><img data-type="{{model.type}}" src="{{image}}" class="insta-img" /></a></div><div class="meta-data"><span class="likes">{{likes}}</span><span class="comments">{{comments}}</span><p>{{caption}}</p></div></div>',
after: function() {
$("#insta-hashtag-feed img").each(function(index, image) {
var type = $(this).attr('data-type');
if (type === 'video') {
$(this).closest('div').append("<span class='video'></span>");
}
});
}
};
// 2. Add extra values to your options
hashtagFeedOptions.tagName = 'football';
hashtagFeedOptions.limit = 2;
hashtagFeedOptions.clientId = 'client_id';
// 3. Instanciate Instafeed then run it !
var hashtagFeed = new Instafeed(hashtagFeedOptions);
hashtagFeed.run();
//------------------------------------------------------------------------------
var feed = new Instafeed({
template: '<img data-type="{{model.type}}" src="{{image}}" />',
after: function() {
$("#instafeed a").each(function(index, image) {
var type = $(image).attr('data-type');
if (type === 'video') {
...
} else {
...
}
});
}
});
feed.run();
//------------------------------------------------------------------------------
function getMultipleTags (tags) {
var feeds = [];
for (var i=0, len=tags.length; i < len; i++) {
feeds.push(new Instafeed({
// rest of your options
get: 'tagged',
tagName: tags[i],
target: "instafeed-" + tags[i]
}));
}
return feeds;
}
// get multiple tags
var myTags = getMultipleTags(['glass', 'wood', 'rock']);
// run each instance
for(var i=0, len=myTags.length; i < len; i++) {
myTags[i].run();
}
//------------------------------------------------------------------------------
//Use regular expressions in filter:
//simple: "tagone" or "tagtwo" /tagone|tagtwo/gi
filter: function()
{
// get array of matches or an empty array if it fails
var match = image.tags.join(',').match(/tagone|tagtwo/gi) || [];
if(match.length) {
return true;
}
return false;
}
//Also works for plurals, say I want "plant", "plants", "cat", "cats"
/plant[s]{0,1}|cat[s]{0,1}/gi
/plants[s]*/
//would work but would also get "plantsssss" but maybe desirable sometimes anyway.
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
Raw
Video-template.js
<script type="text/javascript">
var tagname= 'acroyoga';
$(document).ready(function() {
var userFeed = new Instafeed({
get: 'tagged',
sortBy: 'most-liked',
tagName: tagname,
clientId: 'foobar',
limit: 60,
resolution: 'standard_resolution',
filter: function(image) {
if (image.type == 'image') {
image.template = '<img src="' + image.images.standard_resolution.url + '" />';
} else {
image.template = '<video width="100%" controls loop><source src="' + image.videos.standard_resolution.url + '" type="video/mp4"/></video>';
}
return true;
},
template: '<div id="header">{{model.template}}</div><br><div id="footer"><a href="http://instagram.com/{{model.user.username}}">@{{model.user.username}}</a> - <a href="{{link}}"><span class="EmojiInput mj40" title="Heavy Black Heart ❤"></span> {{likes}} <span class="EmojiInput mj660" title="Speech Balloon "></span> {{comments}}</a><br>{{caption}}</div><br>',
});
userFeed.run();
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
userFeed.next();
}
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment