<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="ui large secondary pointing menu"> <a class="active item" data-tab="first"><i class="instagram outline icon"></i>Instagram</a> <a class="item" data-tab="second"><i class="comments outline icon"></i>DIRECT</a> <a class="item" data-tab="third"><i class="list icon"></i>ACTIVITY</a> <div class="ui right item"> <div class="ui search transparent icon input"> <input type="text" placeholder="Search ..." class="prompt" /><i class="search link icon"></i> </div> </div> </div> <div class="ui bottom attached tab active" data-tab="first"> <div class="ui container"> <div id="instafeed" class="ui three column doubling centered grid container"></div> </div> </div> <div class="ui bottom attached tab" data-tab="second"> <div class="ui middle aligned divided list"> <div class="item"> <div class="right floated content"> <div class="ui button">Add</div> </div> <img class="ui avatar image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"> <div class="content"> Lena </div> </div> <div class="item"> <div class="right floated content"> <div class="ui button">Add</div> </div> <img class="ui avatar image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"> <div class="content"> Lindsay </div> </div> <div class="item"> <div class="right floated content"> <div class="ui button">Add</div> </div> <img class="ui avatar image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"> <div class="content"> Mark </div> </div> <div class="item"> <div class="right floated content"> <div class="ui button">Add</div> </div> <img class="ui avatar image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"> <div class="content"> Molly </div> </div> </div> </div> <div class="ui bottom attached tab" data-tab="third"> <div class="ui large feed"> <div class="event"> <div class="label"> <img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"> </div> <div class="content"> <div class="summary"> <a class="user"> Elliot Fu </a> added you as a friend <div class="date"> 1 Hour Ago </div> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 4 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil icon"></i> </div> <div class="content"> <div class="summary"> You submitted a new post to the page <div class="date"> 3 days ago </div> </div> <div class="extra text"> I'm having a BBQ this weekend. Come by around 4pm if you can. </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 11 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"> </div> <div class="content"> <div class="date"> 4 days ago </div> <div class="summary"> <a>Helen Troy</a> added <a>2 new illustrations</a> </div> <div class="extra images"> <a><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"></a> <a><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"></a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 1 Like </a> </div> </div> </div> </div> </div>

$(function(){ // tabbed menus $('.menu .item').tab(); // first script to pull posts var accessToken = '2374801533.97f1825.9e25972bb0c444e893ac48c6fe32025e'; // use your own token $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) { $.each(insta.data,function (photos,src) { if ( photos === 20 ) { return false; } // template $( '<div class="column">' + '<div class="ui centered fluid card">' + '<div class="image">' + '<img src="' + this.images.standard_resolution.url + '" />' + '</div>' + '<div class="content">' + '<a class="header">' + this.user.full_name + '</a>' + '<div class="meta">' + '<span class="date">' + this.filter + ' Filter' +'</span>' + '</div>' + '<div class="description">' + this.user.username + '</div>' + '</div>'+ '<div class="extra content">' + '<span class="right floated">' + '<i class="heart outline icon">'+ '</i>' + this.likes.count +' likes'+'</span>' + '<span class="left floated">' + '<i class="comments outline icon">'+ '</i>' + this.comments.count +' comments'+'</span>' + '</div>' + '</div>'+ '</div>' ).appendTo('#instafeed'); }); }); // script to for search var accessToken = ''; // use your own token $('.ui.search') .search({ type : 'category', minCharacters : 3, apiSettings : { onResponse: function(githubResponse) { var response = { results : {} } ; // translate GitHub API response to work with search $.each(githubResponse.items, function(index, item) { var language = item.language || 'Unknown', maxResults = 8 ; if(index >= maxResults) { return false; } // create new language category if(response.results[language] === undefined) { response.results[language] = { name : language, results : [] }; } // add result to category response.results[language].results.push({ title : item.name, description : item.description, url : item.html_url }); }); return response; }, url: '//api.github.com/search/repositories?q={query}' } }) ; });