Skip to content

Instantly share code, notes, and snippets.

@abonzer

abonzer/anonymous instagram viewer

Created April 8, 2020 20:03
Show Gist options
  • Save abonzer/109fe5198bcecd0b8f55feb43778f4d4 to your computer and use it in GitHub Desktop.
Save abonzer/109fe5198bcecd0b8f55feb43778f4d4 to your computer and use it in GitHub Desktop.
Download ZIP
View Instagram Page without an account ? view accounts on Instagram without being logged in ( withot android App).
Raw
anonymous instagram viewer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Instagram Downloader</title>
<style>
.postURL:focus {
border: 2px solid #6f6f6f!important;
}
.postURL{
background: #fafafa;
border: 2px solid #dce4ec;
font-size: 16px;
line-height: 18px;
margin-top: 10px;
overflow: hidden;
outline: none;
padding: 14px 27px;
text-overflow: ellipsis;
width: calc(100% - 60px);
display: block;
border-width: 2px;
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
box-shadow: none;
color: #2c3e50;
}
.instasearch{
background-color: #2c3e50;
height: 50px;
font-size: 20px;
border: none;
margin: 10px auto;
width: 100%;
color: #eee;
border-radius: 5px;
cursor: pointer;
}
.card {
background-color: #fafafa;
border: 1px solid rgba(var(--b6a,219,219,219),1);
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
max-width: 280px;
padding: 6px;
margin: 6px;
display: inline-block;
}
@media only screen and (max-width: 1562px) {
.card {
width: calc(25% - 26px);
max-width: 391px;
}
}
@media only screen and (max-width: 1256px) {
.card {
width: calc(33.33% - 26px);
max-width: 419px;
}
}
@media only screen and (max-width: 950px) {
.card {
width: calc(50% - 26px);
max-width: 425px;
}
}
@media only screen and (max-width: 644px) {
.card {
width: 100%;
max-width: 650px;
}
}
.videoDownload{
background-color: #3F51B5;
font-size: 18px;
color: #eee!important;
padding: 6px;
text-align: center;
}
.dimg {
width: 100%;
background: url(https://d2cfd8a5-a-62cb3a1a-s-sites.googlegroups.com/site/abonzerimg001/loading-spinner-animated-gif-10.gif) no-repeat scroll 0 0;
}
</style>
</head>
<body>
<div>
<img border="0" data-original-height="493" data-original-width="1600" src="https://4.bp.blogspot.com/-oa2vr0oCDhM/XodPVG-jaSI/AAAAAAAAGBk/a9cBzv8CbIU-Sd1NzQawbcsH-zBAMWcyACLcBGAsYHQ/s920/512x512bb.jpg" width="100%" />
<input id='postURL' class="postURL" placeholder="Enter Instagram Link" type="text" value="" />
<div id="msgBox" style='padding: 4px; color: #f44336eb;'></div>
<button class="instasearch" onclick="submit()">DOWNLOAD</button>
</div>
<section>
<div id="result"></div>
<div id='pagefooter'> Copy image or video link from Instagram and put it on the field given on the top. </div>
</section>
<script>
function submit()
{
var msgBox = document.getElementById("msgBox");
var result = document.getElementById("result");
var url = document.getElementById("postURL").value;
var validateURL ='none';
var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
var regex = new RegExp(expression);
if (url) {
if (url.match(regex) ) {
msgBox.innerHTML = "wait...";
var nURL = url.split('?')[0] +'?__a=1';
getInstagramUserID(nURL);
} else {
msgBox.innerHTML = "Enter a valid image or video link.";
}
} else {
msgBox.innerHTML = "Enter Instagram image or video link.";
}
}
var instaMedia;
function fetchURL(url)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var getJSON= JSON.parse(this.responseText);
if (getJSON.data.user.edge_owner_to_timeline_media.edges) {
instaMedia = getJSON.data.user.edge_owner_to_timeline_media.edges;
document.getElementById("result").innerHTML = '';
getMedia(0,10);
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function getInstagramUserID(url)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var getJSON= JSON.parse(this.responseText);
if (getJSON.graphql.shortcode_media) {
var userID = getJSON.graphql.shortcode_media.owner.id;
var instaURL = 'https://instagram.com/graphql/query/?query_id=17888483320059182&variables={"id":"'+userID+'","first":20000,"after":null}';
fetchURL(instaURL);
} else if (getJSON.graphql.user) {
var userID = getJSON.graphql.user.id;
var instaURL = 'https://instagram.com/graphql/query/?query_id=17888483320059182&variables={"id":"'+userID+'","first":20000,"after":null}';
fetchURL(instaURL);
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function getMedia(s, e)
{
for (s ; s<e; s++) {
if (instaMedia[s].node.__typename == "GraphImage") {
var imageLink = instaMedia[s].node.display_url;
updateResult("Image", imageLink);
}else{
var postURL = "https://www.instagram.com/p/"+instaMedia[s].node.shortcode+"/?__a=1";
fetchPostMedia(postURL);
}
}
document.getElementById("pagefooter").innerHTML = '<div id="loadNextPage" onclick="nextpage('+e+')" style=" background-color: #E91E63; font-size: 16px; padding: 10px 20px; color: #fff; cursor: pointer; margin: 12px auto; width: 100px; text-align: center; ">Load More</div>';
}
function nextpage(e){
document.getElementById("pagefooter").innerHTML = '<div id="waitForPage" style=" background-color: #E91E63; font-size: 16px; padding: 10px 20px; color: #fff; cursor: pointer; margin: 12px auto; width: 100px; text-align: center; ">Wait...</div>';
var s = e;
var e = s+10;
getMedia(s,e);
}
function updateResult(type, url)
{
if (type=='Video') {
var elem = '<div class="card"><video style="width: 100%; height: auto;" controls> <source src="'+ url +'" type="video/mp4"> Your browser does not support HTML5 video.</video></div>';
} else if (type=='Image') {
var elem = '<div class="card"><img src="'+ url +'" class="dimg" style="width: 100%; height: auto;"></div>';
} else {
var elem = '<div class="card">Sorry, Something went wrong.</div>';
}
document.getElementById("result").innerHTML = document.getElementById("result").innerHTML + elem ;
document.getElementById("msgBox").innerHTML = '';
document.getElementById("postURL").value= '';
}
function fetchPostMedia(url)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var getJSON= JSON.parse(this.responseText);
if (getJSON.graphql.shortcode_media) {
var media = getJSON.graphql.shortcode_media;
if (media.__typename == "GraphVideo") {
var videoLink = media.video_url;
updateResult("Video", videoLink);
} else if (media.__typename == "GraphSidecar") {
var albumJSON = media.edge_sidecar_to_children.edges;
for (var i = 0; i < albumJSON.length; i++) {
if (albumJSON[i].node.__typename == "GraphImage") {
var albumLink = albumJSON[i].node.display_url;
updateResult("Image", albumLink);
} else if (albumJSON[i].node.__typename == "GraphVideo") {
var albumLink = albumJSON[i].node.video_url;
updateResult("Video", albumLink);
}
}
}
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment