Home
Script

Instagram Image & Video Downloader Tool Script

Instagram Image & Video Downloader Tool

Hello friends! Welcome to your cyberchipe journal. Thus, during this article, we tend to square measure about to state the way to produce Instagram Image & Video Downloader Tool during this article. And what's this Instagram Image & Video Downloader Javascript & however will we tend to use them. Thus we are going to understand these things during this article. thus keep during this article and understand additional details.

Instagram Image & Video Downloader Tool Script


What is Instagram?

So friends, if you are doing not understand what this Instagram is and what happens with it. Thus let Pine Tree State tell you that an associate degree Instagram could be a Social Media Platform.

Let Pine Tree State tell you the method Whatsapp belongs to the Facebook company. Thus this Instagram additionally belongs to the Facebook company.

Like you share your photos & videos on Facebook. Within the same method, you'll share during this Instagram too.

People use this Instagram in terribly massive quantities. Not solely this, folks transfer it in massive quantities from Playstore additionally.

Instagram Image & Video Downloader

So, friends, we tend to scan higher than what's this Instagram. Thus currently, we are going to understand what this Instagram Image & Video Downloader is?


So if you are doing not understand, then let Pine Tree State tell you that no matter what image & video folks share on the official Instagram.

We cannot transfer it. Thus for this, we'd like this Instagram Image & Video Downloader.

With the assistance of this downloader, we can simply transfer any Instagram video & image.

Many people additionally search Instagram image Downloader or Image Downloader for Instagram on Google.

So that we can use sensible tools. So, there square measure several Instagram image Downloader online tools out there on the net.

Preview Of Save Insta Photos & Videos Program

SO Friends, I even have provided the Preview Gif of associate degree Instagram Image Downloader below.

By observance of this, you'll knowledge you'll transfer videos from Instagram, the way to produce Instagram Image & Video Downloader Tool in Blogger.

How to Create Instagram Image & Video Downloader Tool in Blogger

So friends, currently, we are going to the knowledge we can produce this Instagram Video & Image Downloader Tool in Blogger.

So if you wish to understand, however, we can build this tool. Thus follow the steps given below fastidiously.

Let Pine Tree State tell you if you create this tool. And your domain is Adsense approved. Otherwise, you will cut back on cash by victimization the other ads network. Is

Step one - initial of all, you have got to repeat the code of the Blank example given below.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:responsive='true' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
 <meta content='width=device-width, initial-scale=1' name='viewport'/>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[

     body{background:#fff}

   ]]></b:skin>
   </head>
   <body>
   <b:section class='main' id='main' showaddelement='yes'/>
   </body>
   </html>

Step two - currently, you have to travel to the theme in Dashboard and click on Edit Theme.

Step three - currently, you have got to get rid of the previous code and paste the derived code.

Now I even have provided some scripts below. That you have got to use fastidiously. If you are doing not knowledgeable about using these codes.

So below, I even have provided a video. Seeing this, you'll simply use these codes.

JavaScript for Instagram Image & Video Downloader


<script>
const _ = e => document.querySelector(e);
const render = _('.result');
 
 
// create video
const createVideo = data => {
  let v = document.createElement('video');
  v.id = "instavideo";
  v.src = data.content; 
  v.controls = true;
  v.autoplay = true;
 
  // create info
  let info = document.createElement('p');
  info.textContent = "Click the right button on video and select save as.";
 
  render.innerHTML = ""; 
  render.appendChild(v);
  render.appendChild(info);
};
// create image
const createImg = data => {
  // create image
  let i = document.createElement('img');
  i.id = "instaImg";
  i.src = data.content;
 
  // create info
  let info = document.createElement('p');
  info.textContent = "Click the right button on the image and select save image..";
 
  render.innerHTML = ""; 
  render.appendChild(i);
  render.appendChild(info); 
 
};
 
// extract html
const getMedia = () => {
  render.innerHTML = "<div class='image-placeholder'></div>";
  // get input value
  let url = _('input').value;
  if (url) {
    fetch(url).
    then(r => r.text()).
    then(r => {
      // render html
      render.innerHTML = r;
      // wait, find meta and create video or image
      let w = setTimeout(() => {
        let v = _('meta[property="og:video"]');
        if (v) {
          createVideo(v);
        } else {
          let img = _('meta[property="og:image"]');
          if (img) {
            createImg(img);
          } else {
            document.body.innerHTML = body;
            alert('Error extracting Instagram image / video.');
          };
        }
        clearTimeout(w);
      }, 200);
    });
  } else {
    _('input').setAttribute('placeholder', 'Invalid address, use a proper Insagram link');
 
  }
};
</script>

HTML Script Instagram Image & Video Downloader

<!doctype html>
  Instagram Downloader
  <link rel="stylesheet" href="style.css" />

  <main>
    <header class="navbar">
      <input type="text" value="" placeholder="Paste link here..." />
      <button class="search" onclick="getMedia()">Get</button>
    </header>
    <section class="result">
      <div class="image-placeholder"></div>
      <p> Copy image or video link from Instagram and put it on the field given on the top. </p>
    </section>
  </main>
  
  <script  src="function.js"></script>
</!doctype>

CSS Script Instagram Image & Video Downloader

<style>
* {
  box-sizing: border-box;
}
html, body {
  position: relative;
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: "consolas",monospace;
  font-size: 14px;
  line-height: 1.5;
  background: #f9f9f9;
  color: #333;
}
code {
  background: #208bfd;
  color: #f9f9f9;
  padding: 0.1em 0.5em;
  border-radius: 4px;
}
.image-placeholder {
  margin: auto;
  width: 89%;
  max-width: 500px;
  display: block;
  height: 380px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(https://webdevtrick.com/wp-content/uploads/image-placeholder.png);
}
@media (max-width: 420px) {
  .image-placeholder {
    width: 320px;
    max-width: 320px;
    height: 280px;
    background-size: contain;
    background-position: top left;
    background-attachment: scroll;
  }
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4em;
  background: #208bfd;
  margin: 0 auto;
  text-align: center;
  color: #f9f9f9;
}
::placeholder {
  color: #212121;
}
input {
  display: inline-block;
  width: 100%;
  max-width: 50%;
  max-width: calc(100% - 8em);
  min-height: 2.8em;
  padding: 0.5em;
  margin: 0.5em 0;
  background: #f3f3f3;
  border-color: #208bfd;
  border-width: 1px;
  color: #212121;
  transition: all 500ms ease;
}
input:focus, input:hover {
  border-color: #208bfd;
  transition: all 500ms ease;
}
 
@media (min-width: 420px) {
  input {
    max-width: 50%;
  }
}
.search {
  display: inline-block;
  padding: 0 1em;
  text-align: center;
  min-width: 2.8em;
  height: 2.8em;
  margin: 0;
  background: #208bfd;
  border: 2px solid #212121;
  color: #f9f9f9;
  transition: all 500ms ease;
}
.search:focus, .search:hover {
  background: #212121;
  border-color: #f9f9f9;
  cursor: pointer;
  transition: all 500ms ease;
}
.result {
  margin: 0 auto;
  padding: 4em 1em;
  max-width: 40em;
}
.result video, .result img {
  width: calc(100% - 4em);
  margin: 2em;
}
.result .download {
  text-decoration: none;
  display: inline-block;
  padding: 0.5em 1em;
  background: #208bfd;
  border-color: #208bfd;
  border-width: 1px;
  color: #f9f9f9;
  transition: all 500ms ease;
}
.result .download:focus, .result .download:hover {
  background: #208bfd;
  border-color: #f9f9f9;
  cursor: pointer;
  transition: all 500ms ease;
}
@media (max-width: 600px) {
  .result {
    position: absolute;
    top: 4em;
    left: 0;
    right: 0;
    height: calc(100% - 10em);
    overflow-y: auto;
    max-width: 40em;
    background: #f9f9f9;
    margin: auto;
  }
}
footer {
  width: 100%;
  margin: 2em auto;
  text-align: center;
}
 
@media (max-width: 600px) {
  footer {
    position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    height: 2em;
  }
}
</style>


<b:include name='quickedit'/>

[sp_easyaccordion id=”3874″]
Conclusion - however, did you wish this text of Instagram Image & Video Downloader Javascript Tool For Blogger. You need to tell by commenting within the comment box below. Or, if you wish to administer some reasonable suggestion, you'll share your opinion with the USA within the comment box below is.

1 comment

  1. Your post is very good, I am very impressed to read your post, thank you very much