How to Create Instagram Image & Video Downloader Tool in Blogger
3
How to Create Instagram Image & Video Downloader Tool in Blogger
Step 1:
Copy below code and paste it in Themes >> Customise >> Edit HTML.First, remove all codes which are already present in the Edit HTML section and then paste the below codes.
Edit HTML
<?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:
Go to layout >> Add a Gadget >> HTML/Javascript.Copy below Javascript code and paste it in the content area of the gadget and the title will remain blank.
Javascript
<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>Step 3:
Go to layout >> Add a Gadget >> HTML/Javascript.Copy below HTML code and paste it in the content area of the gadget and the title will remain blank.
HTML
<!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>Go to layout >> Add a Gadget >> HTML/Javascript.
Copy below HTML code and paste it in the content area of the gadget and the title will remain blank.
Now go to Themes >> Customise >> Edit HTML.
Note: Below code is three times in the Edit HTML section so find it & remove it all.
Copy below HTML code and paste it in the content area of the gadget and the title will remain blank.
CSS
<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>Now go to Themes >> Customise >> Edit HTML.
Step 4:
Press Ctrl + F and find the below code and remove it from the Edit HTML section.Note: Below code is three times in the Edit HTML section so find it & remove it all.
Extras
<b:include name='quickedit'/>