- Sunday, August 14, 2016

How to Create a Download Link on Wordpress and Blogger

I keep wanting to give out free downloads, but I have struggled finding a way to provide downloads on a blog. Looking for an easy button like a plug-in has proven to be the hard way.

I've tried several plug ins for Wordpress, but every time Wordpress updates, they stop working. Not good. I also tried downloading from Google Drive, but they changed that so all my old links no longer work. That's the problem with depending on other places. They change things. Stuff stops working when they do.

Picture of Wild Cat Necklace with Links and a lioness's face with text How to Create Download Buttons and Links on Wordpress and Blogger


People provide free downloads for many reasons, but the popular reason is to bribe people with a free thing for their email address.

Downloads you can provide include

  • PDF's
  • Music
  • Video
  • Photoshop Elements
  • Fonts
  • Word Document Templates
ANY COMPUTER FILE you find in your folders.

For purposes of this article, I'm trying to help people have a DOWNLOAD button that once clicked, it just downloads the file.


STEP 1: Get your File on the Internet and Get its Address

Name your file


MAKE SURE you name your file in your hard drive something that is internet friendly.
  • Use underscores instead of spaces
  • Avoid any characters besides text and numbers
  • Use all lower case
  • And for purposes of SEO, you probably want a keyword in the name. 
You can get away with using symbols and upper case, but it's harder to remember, and depending on which method you go with, there's a chance you'll need to remember the exact file name. 

Move Your File to the Internet


Most files that end with JPG, GIF, and PNG, you can upload as a media file in your blog's gallery. Wordpress also allows PDFs to be uploaded right into the media gallery.

Whatever file you want to provide for download, you upload the file to a server. Basically your computer has a storage space, but the internet can't access your computer's storage unless you somehow let them, but you don't want that. So you have to move it to a storage space that the internet can access, and since most of us are not hosting companies, the best thing is to find a place that's on the internet to store your stuff.

But the end result, your primary goal with this step is to obtain a web address that starts with html:// and ends with a file like .jpg or .mp3 or .docx.

 FOR BLOGGER 


Blogger blogs are hosted by Google for free, and they do not have a place to directly upload files to. You will have to find a 3rd party place to host your files.

I personally struggled finding any method that works well beyond DROPBOX. This is why...

Updated for June 2019... Why aren't my files downloading anymore?


Some things were updated in Spring of 2018 making it difficult or impossible to download things that have a different web address than the one you're on. See the problem is when you upload a photo to your blog, Blogger saves it to a completely different web domain than the one your blog is on. So all photos and just about any files you save at a 3rd party location (like Google Drive) is a cross origin problem in Blogger. HTML just doesn't like that shit anymore, or maybe it's Chrome because that would just be irony if the issue is only in Chrome.

Here's a quote from StackOverflow...


UPDATE: As of spring 2018 this is no longer possible for cross-origin hrefs. So if you want to create <a href="https://i.imgur.com/IskAzqA.jpg" download> on a domain other than imgur.com it will not work as intended. Chrome deprecations and removals announcement


I honestly am just completely too stupid to fully understand what that means. I've read several places talking about this, and NONE OF IT MAKES SENSE TO ME! So I 'm just going to skip the bull shit and give you the one hack that I managed to make work for Blogger.

The only hack I can find is to go Drop Box.

DropBox Hack -- Direct Download Links not Working 


You can use DropBox's free plan.

  1. Upload to DropBox
  2. Click to Share
  3. Create a Link
  4. Copy Link

Paste your link the way they have it. After your file name like svg or doc, it should have a ? and some other stuff like

 https://www.dropbox.com/s/kjphdfsvzxa6uzr/SocialMedia.otf?dl=0 

Change the d1=0 to raw=1

 https://www.dropbox.com/s/kjphdfsvzxa6uzr/SocialMedia.otf?raw=1 

And that should work.

You can upload almost any file to dropbox.

Now I will add that I found a blog post here that suggests washing Google Drive's shareable links through THIS TOOL in order to get a direct link. I've not tried it. 


FOR SELF HOSTED 


Some places that provide hosting provide access to your files or some kind of file manager. Some places do not. In my experience, Go Daddy and Dreamhost did NOT provide any kind of file manager and required that I use a 3rd party FTP. Lyrical Host DOES provide a file manager, and if you decide to switch you can save 10% with coupon code: BeHappy 

Definitely make sure here that the file you wish to upload is named something internet friendly with no spaces. It's best to keep it to lowercase letters, numbers, and underscores. You can still do it if it's not, but it's easier without adding 20% to things.

FILE MANAGER


If your hosting company provides a place to access your website files, you can go there. You basically find the public folder usually titled HTML or at Lyrical Host, they call it Public_html ...

There you can choose to create a new folder for organization and ease reasons. I created one called DOWNLOADS. I also have FONTS (to install fonts on my site).

In the folder where you want your file to be, where you can find it again later if you want to, and try to be pretty decisive about this because moving the file will change the link's address, go ahead and upload the file to that folder.

The address is usually  yoursite.com/folderinhtml/filename.file 

So if you uploaded the file Foxy.TTF to your folder DOWNLOADS in your public_html or html folder, it will be

 Yoursite.com/DOWNLOADS/foxy.ttf 

If you named your folder BLUEBALLS it would be

 Yoursite.com/BLUEBALLS/filename.file 

In essence, it's

Yoursite.com/ENTIRE DIRECTORY or PATH OF FOLDERS IN HTML FOLDER/filename.file

but you don't include HTML or public_html's folder in it...

You may want to plug that in the navigation bar and go to that file just to make sure it works. If it's web page at all (usually files that end in html, svg, jpg, png, or pdf), it will open up as a page. If not (such as files like otf, docx), it will just automatically download it.

NO FILE MANAGER >>> 3rd PARTY FTP


A: Install Filezilla 


For Self-Hosted Wordpress blogs, the best way to handle a means to upload and edit your website's direct files is through an FTP so that the file is stored on your server or hosting service. I use Filezilla

B: Connect Filezilla


Once you've installed Filezilla, you may have to call your hosting to find out how to obtain the information you need to connect Filezilla from your computer to the files in your site, but most hosting providers show this on the website under your account somewhere. 

The Filezilla program wants to know a few things (right under the toolbars before the status box)
  • Host
  • Username
  • Password
  • Port
In GoDaddy, I had to go to Gateway, From there, I click on my wordpress site's settings, from there, I click the tab SSH & SFTP, and there it lists those things. You have to click the toggle button to turn your password from stars/dots to an actual password before copying and pasting. Then just copy and paste the information to the right places.

In most sites, it's listed under anything that has the letters FTP, like on Go Daddy, it was SFTP. Some hosting providers lock your FTP, and you can request to unlock it for a certain amount of time. If you can't figure it out, you're probably going to have to contact customer service with your hosting provider, and it's a HOSTING thing, not a domain thing.

Once you have the information in place to connect filezilla, click the QuickConnect button.

You should then get four window boxes underneath the status box. The two on the left is your hard drive on your computer, and the two on the right is the drive on your web site. This kind of works like file explorer on your computer. The top windows are file folders while the bottom windows give actual files.

In navigating through Filezilla, double clicking on the folder with three dots/periods will take you back a folder. You can also single click the folder on the top box to open the contents in the bottom box.

C: Upload File


I'm not sure if it really matters where the folder is...

I generally have put my stuff in either the html folder, or the wp-content one. The wp-content folder should be in your html folder.

I also then create folders to organize what I'm about to upload as if I were just organizing folders on my computer's hard drive. This place is really just your website's hard drive.

The first time you do this, you probably want to create a Downloads folder that you can use in the future. Right click anywhere in the bottom right box, and choose "Create a New Directory." Name your file (maybe "downloads" all lower case, think html address). You do not have to create a new directory for each file you want to upload. This is just for the first time. After this, you can upload the file to this folder. If you plan on providing a lot of downloaded material, you may decide to make additional directories to organize your files, such as a directory for music and one for documents.

But you want to make sure you are organizing this just the way you want it because if you move these files, you will break your download buttons on your site. Of course, you can update the links on your site, but in my experience, it's a pain in the ass.

The next step is basically to drag the file into the folder. Open your destination folder on the right side. Find your file you want to upload in the bottom box on the left. Drag and drop that file from the left (your hard drive) to the right (your site).

D: Get File Address


I can't find an easy way to copy and paste your file address completely from filezilla, but here's how to obtain the file address.

You basically have to manually type out the address.

  1. The address will start out with http://www.yoursite.com
  2. Then forward slash all the file folders (AKA Directories) to your document/file.

Tip: Under where it says remote site in the top right hand of the boxes, you can highlight wp-content and all the information after that and paste it. BUT this is only good for the second half of the address. So you will have to type out the info with 1. and then paste the info for 2. Then forward slash and type in the name of the file.

So it could look something like this: http://www.mysite.com/wp-content/uploads/downloads/file.jpg

So if you uploaded the file Foxy.TTF to your folder DOWNLOADS in your public_html or html folder, it will be

Yoursite.com/DOWNLOADS/foxy.ttf

If you named your folder BLUEBALLS it would be

Yoursite.com/BLUEBALLS/foxy.ttf

If you use more than one folder such as putting BLUEBALLS into your wp-content folder, then it would be...

Yoursite.com/wp-content/BLUEBALLS/filename.file

In essence, it's

Yoursite.com/ENTIRE DIRECTORY or PATH OF FOLDERS IN HTML FOLDER/filename.file

but you don't include HTML or public_html's folder in it...

You may want to plug that in the navigation bar and go to that file just to make sure it works. If it's web page at all (usually files that end in html, svg, jpg, png, or pdf), it will open up as a page. If not (such as files like otf, docx), it will just automatically download it.

STEP 2: Create Code for Download


This is where life gets tricky. Essentially, if you just link to the file, the computer usually knows to just download that file.

Wherever you want the download to appear, in most places like blogs or pages in Wordpress or Blogger, just highlight the text and link to your file, and open link in new tab. At least that's how it used to be.

If you want to roll with html...

This goes in the HTML section of your  blog post / page / widget...

If that doesn't fully work, you may need to add the word Download to it after the file as W3Schools suggested, but I haven't had to do that with any of my files yet.

This goes in the HTML section of your  blog post / page / widget...

The other idea that works with this html5 structure is if you want to change the name of the download as it downloads you can do...

This goes in the HTML section of your  blog post / page / widget...

 <a href="path_to_file" download="proposed_file_name">Download</a>  

Here's an example of a font file using the dropbox hack...

DOWNLOAD FONT FROM FILE

Another code I have found that also works is...

This goes in the HTML section of your  blog post / page / widget...

 <a download="socialmediafont" href="https://www.dropbox.com/s/kjphdfsvzxa6uzr/SocialMedia.otf?raw=1" target="_blank">  


Do you want it to have a pretty Download Button? 


All you got to do really is link your link to a picture instead of text. Or you can design a button in CSS and link that...

Create a Download Button


Draw a picture of a download button or find one on the web that you are allowed to use. Upload it to your pictures in your media gallery or insert picture on blogger. I'm going to use this picture from wikimedia commons....


That one shouldn't download anything.

To get the address of the image file... 


You can get that on Blogger by uploading the image, and then insert it into your post, set it to original size, and then right click and choose copy image address, and then delete the image from your compose area. I actually keep an on-going blog post draft of images just to get the image address.

In wordpress, you can upload the image to your gallery and if you look at the details on the right, find the address after URL.

Code for Image and Download

Pick ONE of these to go in the HTML section of your  blog post / page / widget...

Most places, this is fine...

 <a href="https://MyFileForDownload.mp3"><img src="MyImageURL.jpg"></a>   

or other method I find working better on blogger though the top method does work...

 <a download="socialmediafont" href="https://www.dropbox.com/s/kjphdfsvzxa6uzr/SocialMedia.otf?raw=1" target="_blank"><img src="https://4.bp.blogspot.com/-Ir0fiQPW0vw/V7DOK2-iNtI/AAAAAAAADnU/Op4mS7oaPFcqwslUEb4vmsFk1SguCZuRgCLcB/s320/wikimedia%2Bcommons%2Bdowload%2Bbutton.png" /></a>  

It should look and behave like this...




If you want to create a download button, you can use CSS for your whole website to design a button... First you want to create the CSS to style the button in your blog's main CSS. The following is the code for my buttons on this blog, and it pulls from the variable that lets me set the blog's color in "Customize" as opposed to html. You can change that $(scheme.color) to any #HEX.

THIS code is for CSS in your entire blog's theme. In blogger, it's usually in the bskin, and sometimes that's closed off with <bskin>...</bskin> and you have to click the 3 dots to get it to show all the codes. In Wordpress, it's usually in the theme's files, but most themes allow you to add CSS styles to the theme in the Customize section (or you can create a new CSS file in your directory / file manager with your hosting), and I recommend that because if you change your actual theme's CSS, you may lose those changes with every theme update.

 .button {  
      font: $(body.font);  
      text-transform: uppercase;  
      background-color: $(scheme.color);  
      padding: 7px 15px;  
      text-decoration: none !important;  
           border-radius: 2px;  
      overflow: hidden;  
      cursor: pointer;  
      display: inline-block;  
      color: #fff !important;  
 }  

Then use html to apply the code... So the following code goes in the HTML section of your  blog post / page / widget...

You can skip the div style by deleting the div style words in the <div  style...> and delete the end div </div>, but I went ahead an added it so you can center your button without thought.

 <div style="text-align: center;">  
 <a class="button" a download="socialmediafont" href="https://www.dropbox.com/s/kjphdfsvzxa6uzr/SocialMedia.otf?raw=1" target="_blank">Download Social Media Icons Font</a></div>  

SO it would look and behave like this...



Some Sources:


Stack Overflow: Chrome Download Attribute Not Working
Stack Overflow: How to Trigger a File Download 
W3 Schools: How to Download Link
Where I found the DropBox Hack


Hot Pink Fuscia  background with half a pink daisy on top, and half a white daisy with pink center on the bottom. Text overlays on a white square pinned with a white heart saying How to Provide Direct Downloads on blogger and wordpress. Designed for Pinterest. Title text in various shapes and colors on top a white background with a wild cat necklace and a photo of a face of a lioness Text overlay How to get direct download links kind of girly looking on top of gold diamond shape outlines on top of image of flowers on a boat.