Do you want to create a Google Drive direct download link generator for your website? If yes, then you are in the right place. Today we will learn to make a webpage that will be able to convert Google Drive link to direct download link.
In this exciting tutorial, we will show you how to create a powerful webpage that can instantly transform any Google Drive link into a direct download link. Say goodbye to complicated sharing processes and hello to effortless file sharing! Get ready to revolutionize your Google Drive experience with our step-by-step guide on creating your very own Google Drive direct download link generator.
Let's dive in and unleash the magic!
What is a Direct Google Drive Link?
A Google Drive direct download link is a modified URL that, when clicked, immediately prompts the file to be downloaded rather than previewed in Google Drive's viewer. Typically the link we share from Google Drive gives options to view or download the file. It is a great feature I must say. But when you are trying to make a download process professional, it is not a good way to download files. Not only that but also it wastes time.
What a Google Drive to direct link generator does is, modify the shared link of Google Drive. So that if someone visits the link, it triggers a direct download pop-up instead of giving the users the option to preview or download the file.
Overview of the GDrive to Direct Link Conversion Process
Before we start creating Google Drive to direct link generator, let's understand how it works. Actually, you don't need a generator to create a direct download link from the Google Drive link. You can do it manually by modifying the Google Drive link.
https://drive.google.com/file/d/your-file-id/view?usp=drive_link
You can modify the originally generated Google Drive link to make it look similar to the below one.
https://drive.google.com/uc?export=download&id=your-file-id
Now this link will work as a Google Drive Direct download link. Just replace the part I have marked with the actual file-id of your Google Drive link. If you are wondering what is file-id, it looks like sometimes like 15aqpLRHww7 and each Google Drive link has a different file-id.
Although we can convert the Google Drive link into a Google Drive direct link manually without any converter or generator, to make the process simple and fast we use a generator. Sometimes we need to work with a lot of Google Drive links. In those cases, the Google Drive direct link generator is a handy tool.
Steps to Create Direct Google Drive Download Link Generator
Follow the steps below to add this generator to your website. You can also add this website on WordPress or any other type of website.
First of all login to your Blogger dashboard and create a new page. Then switch to HTML view from the top left corner. Then just copy the codes below and paste them there.
|
| Generator page |
This style will work on any webpage.
<style>
/* Google Drive Dircet Link Generator by siteguide.xyz */
.wc-gd-gnrt input[type=text],.wc-gd-hsl input[type=text]{position:relative;width:100%;line-height:1em;font-size:12px;color:#455065;background:#ebeff3;margin-top:5px;padding:15px;padding-left:130px;border-radius:5px;border:none;outline:0}
.wc-gd-gnrt:before,.wc-gd-hsl:before{content:'GDrive Link';background:#ff0033;position:relative;color:#fff;padding:14px 20px;top:42px;z-index:2;border-radius:5px}.wc-gd-hsl:before{content:'Direct Link'}
button.wc-gd-btn{display:inline-block;align-items:center;justify-content:center;padding:15px 20px;outline:0;border:0;border-radius:4px;line-height:1em;color:#fefefe;background-color:#ff0033;font-size:14px;font-weight:bold;white-space:nowrap;overflow:hidden;margin-top:25px;box-shadow:0 2px 5px rgb(70 68 68 / 80%)}
button.wc-clear,button.wc-copy{border-radius:4px;box-shadow:none;margin-right:10px padding:15px 20px;outline:0;border:0;line-height:1em;color:#fefefe;background-color:#ff0033;font-size:14px;font-weight:bold}#wclsn-gdrv{display:none}
</style>
<div class='wc-gd-gnrt'>
<input id='wc-inp-url' placeholder='https://drive.google.com/file/d/xxxx...' type='text'/>
</div>
<div style='text-align: center'>
<button class='wc-gd-btn' id='wc-gd-btnid' type='submit'>Create Direct Link</button>
</div>
<div class='wc-gd-hsl'>
<input id='wc-hsl-url' type='text' readonly='readonly'/>
<button class='wc-gd-btn wc-copy'>copy</button>
<button class='wc-gd-btn wc-clear'>clear</button>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Get references to elements
const generateBtn = document.getElementById("wc-gd-btnid");
const inputUrl = document.getElementById("wc-inp-url");
const outputUrl = document.getElementById("wc-hsl-url");
const copyBtn = document.querySelector(".wc-copy");
const clearBtn = document.querySelector(".wc-clear");
// Function to generate the direct download link
generateBtn.addEventListener("click", function() {
const inputDriveUrl = inputUrl.value.trim();
if (inputDriveUrl) {
const fileID = extractFileID(inputDriveUrl);
if (fileID) {
const directLink = generateDirectLink(fileID);
outputUrl.value = directLink;
} else {
outputUrl.value = "Invalid Google Drive URL";
}
} else {
outputUrl.value = "Please enter a Google Drive URL";
}
});
// Function to extract the file ID from Google Drive URL
function extractFileID(url) {
const match = url.match(/\/file\/d\/([A-Za-z0-9_-]+)/);
return match ? match[1] : null;
}
// Function to generate the direct download link
function generateDirectLink(fileID) {
return `https://drive.google.com/uc?export=download&id=${fileID}`;
}
// Function to copy the direct link to the clipboard
copyBtn.addEventListener("click", function() {
outputUrl.select();
document.execCommand("copy");
alert("Link copied to clipboard!");
});
// Function to clear the output URL
clearBtn.addEventListener("click", function() {
outputUrl.value = "";
});
});
</script>
Conclusion
By following this tutorial, you have unlocked a whole new world of convenience and efficiency for your website visitors. No longer will they need to go through the hassle of navigating through Google Drive folders or dealing with confusing sharing settings. With just a few simple steps, you can now provide them with a seamless experience of directly downloading files from your webpage.
Post a Comment