Advertisement

Instagram Image & Video Downloader Tool Script

Photo of author
Rohit Baidya

नमस्कार दोस्तो! स्वागत है आपका Techly360 ब्लॉग में।तो आज के इस आर्टिकल में हम बात करने वाले है How to Create Instagram Image & Video Downloader Tool के बारे में। and ये Instagram Image & Video Downloader Javascript क्या है & इन्हें हम कैसे Use कर सकते है। तो इन सभी बातों को हम इस Article में जानेंगे। तो बने रहिये इस Article में और जानिए पूरे Details में।

Advertisement

What is Instagram?

So दोस्तों अगर आपको नही पता की ये Instagram क्या है और इससे क्या होता है| तो मैं आपको बता दूँ की एक Instagram एक Social Media Platform है|

मैं आपको बता दूँ की जिस प्रकार से Whatsapp फेसबुक कम्पनी का है| तो ये Instagram भी फेसबुक कम्पनी का ही है|

जैसे आप फेसबुक में अपनी Photos & Videos Share करते है| ठीक उसी प्रकार से आप इस Instagram में भी शेयर कर सकते है|

इस Instagram को लोग बहुत ही बड़ी मात्रा में इस्तेमाल करते है| यही नही लोग इसे Playstore से भी बड़ी मात्रा में डाउनलोड करते है|

Advertisement
instagram image downloader, image downloader for instagram, instagram image downloader online, instagram image and video downloader

➤ Free Privacy Policy Generator Tool For Adsense

➤ Fix Data-Vocabulary Schema Breadcrumbs Error

Instagram Image & Video Downloader

So दोस्तों हमने उपर पढ़ा की ये Instagram क्या है| तो अभी हम जानेंगे की ये Instagram Image & Video Downloader क्या है?

तो अगर आपको नही पता तो मैं आपको बता दूँ की Official Instagram में लोग जो भी Image & Video शेयर करते है|

उसे हम डाउनलोड नही कर सकते है| तो इसी के लिए हमे इस Instagram Image & Video Downloader की जरूरत पड़ती है|

इस Downloader की मदद से हम आसानी से किसी भी Instagram Video & Image Download कर सकते है|

बहुत से लोग गूगल पर Instagram image Downloader या Image Downloader for Instagram भी सर्च करते है|

ताकि we लोग अच्छे टूल का इस्तेमाल कर सके| तो वैसे तो इन्टरनेट पर बहुत से Instagram image Downloader Online Tool उपलब्ध है|

Advertisement

➤ Add Floating Ads in Blogger Sidebar

➤ Change Bullet Style in Blogger Template

Preview Of Save Insta Photos & Videos Program

SO दोस्तों मैंने निचे एक Instagram Image Downloader का Preview Gif उपलब्ध कराया है| इसको देख के आप जान सकते है की कैसे आप Instagram से Video Download कर सकते है|

Instagram Video Downloader, Download Instagram Videos Online, Online tool to download Instagram videos

How to Create Instagram Image & Video Downloader Tool in Blogger

So दोस्तों अभी हम यह जानेंगे की कैसे हम ब्लॉगर में इस Instagram Video & Image Downloader Tool बना सकते है|

तो अगर आप यह जानना चाहते है की कैसे हम इस टूल को बना सकते है| तो निचे दिए गये स्टेप्स को आप दध्यानपूर्वक फॉलो करे|

मैं आपको बता दूँ अगर आप इस टूल को बनाते है| और आपका डोमेन Adsense approved है या आप किसी अन्य ads नेटवर्क का इस्तेमाल करके पैसे भी कम सकते है|

Step 1 – सबसे पहले आपको निचे दिए गये Blank Template के कोड को कॉपी करना है|

Advertisement
<?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 2 – अब आपको डैशबोर्ड में जाकर थीम में जाकर Edit Theme पर क्लिक करना है|

Step 3 – अब आपको पहले के कोड को हटाकर कॉपी किया गया कोड पेस्ट करना है|

अब मैंने निचे कुछ Scripts उपलब्ध कराय है| जिन्हें आपको ध्यान से अप्लाई करना है| अगर आपको नही पता की इन कोड को कैसे इस्तेमाल करना है|

तो निचे मैंने एक विडियो उपलब्ध कराय है| जिसे देख के आप आसानी से इन कोड को इस्तेमाल कर सकते है|

JavaScript for Instagram Image & Video Downloader

Advertisement
<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

Advertisement
<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'/>

Instagram Downloader Tool Full Tutorial

निष्कर्ष – आपको यह Instagram Image & Video Downloader Javascript Tool For Blogger का आर्टिकल कैसा लगा।आप नीचे कमेंट बॉक्स में कमेंट करके जरूर बताएं।या किसी प्रकार का Suggestion देना भी चाहते है तो आप नीचे Comment Box में अपनी राय हमारे साथ Share कर सकते है।

लेटेस्ट अपडेट्स पाने के लिए Techly360 को Facebook, Twitter और Instagram पर फॉलो करे. और वीडियोज देखने के लिए YouTube पर सब्सक्राइब करे.

instagram image downloader, image downloader for instagram, instagram image downloader online, instagram image and video downloader

5 thoughts on “Instagram Image & Video Downloader Tool Script”

Leave a Comment

Copy link
CopyCopied
Powered by Social Snap