How to Hotlink Animated GIF Files on the Cloud
Use Cloud Services for hotlinking your static files
Creating an Animated GIF presentation for my latest WooCommerce Plugin
Just recently I published my newest plugin; WooTabs at CodeCanyon. WooTabs is a WooCommerce plugin that lets you create Unlimited Tabs to your Product Page.
For example you can create a Video Tab or a Product Inquiry Tab, that way you keep your visitor attention for a longer time while at the same time you decrease product page bounce rates and increase sales.
Even though the plugin title explains itself I wanted to find a way to display visually how it worked. I created a YouTube Video showing WooTabs functionality but CodeCanyon doesn't(yet) allow embedding videos so I had to find another way to visualize my plugin functionality. Screenshots and images were out of the question too because they would make the Plugin page too lengthy.
While getting a time out from work I browsed to my G+ profile, in there from time to time I was amused by people in my circles posting animated gifs showing all kind of strange, funny and weird stuff.
Well, it didn't take long to think a scenario of me creating an animated gif that it would show how my WooTabs plugin worked, that way it could be embedded on my CodeCanyon sales page plus it would be a nice way to hop in the gif wagon that rules the web these days.
First step was to capture a video that showed how WooTabs worked both frontend and backend being careful not to be more than 50 seconds. Then I saved that video as .mp4 and used Free Video to Gif converter to convert it into an animated GIF.
Next step was to upload it on my server and finally link it to my CodeCanyon sales page.
I followed the same steps for my other WooCommerce plugin, WooWaitlist so in total I had two animated gifs hotlinked from CodeCanyon to my server. This was fun and I experienced an increase in sales so I was very happy.
Website bandwidth being sucked up by the animated GIF
[dropcap style="color"]Well that happy feeling didn't last long, the next day I got a warning from my server hosting panel that my website bandwidth monthly limits reached to 80%. Apparently my CodeCanyon plugins receive hundreds visits per day so each time they browse my plugin page they download my animated GIF's. This could explain why my site consumed almost 10GB of bandwidth in just 1 day when in the past I only needed 4-5 Gb's maximum per month.
I had to find a solution and fast since bandwidth is really expensive and it would reduce revenue from selling my plugins.[/dropcap]
How to Direct Link a file on the Cloud with Google Drive
Being in G+ and using Google Docs and Google Drive I already knew that I could share files between other Google users but I wasn't sure if I could really directly link my files(hotlink).
Finding a workaround for direct linking my files in Google Drive would mean that I could upload my animated GIF's there and then hotlink them to my CodeCanyon plugins saving bandwidth.
After searching a bit I did find a solution, you can read it below and use it as well!
First of all you must upload the file you want to hotlink and make sure its shared as Public. Then go and copy the share link that Google provides for the file. This should be something like:
https://drive.google.com/file/d/YOUR_FILE_ID/edit?usp=sharing
Copy "YOUR_FILE_ID" and paste it at the end of the following url replacing "YOUR_FILE_ID":
https://drive.google.com/uc?export=download&id=YOUR_FILE_ID
This will be the direct link to your file hosted in Google Drive, you can use it to download the file directly to your pc or hotlink it to your website/blog.
How to Direct Link a Google Document
Google Docs
After you share a Google Doc you will get a share link like the one below:
https://docs.google.com/document/d/YOUR_FILE_ID/edit?usp=sharing
Once more copy "YOUR_FILE_ID" and paste it in the following url:
https://docs.google.com/document/d/YOUR_FILE_ID/export?format=doc if its a Document
https://docs.google.com/document/d/YOUR_FILE_ID/export?format=doc if its a PDF
Keep in mind that you can also use "txt", "html" or "odt" for the download format.
Google Presentations
For hotlinking a Google Presentation, after making it Public copy "YOUR_FILE_ID" from the url below:
https://docs.google.com/presentation/d/YOUR_FILE_ID/edit?usp=sharing
and paste it in the following url(s):
https://docs.google.com/presentation/d/YOUR_FILE_ID/export/pptx if the presentation is in PowerPoint format
https://docs.google.com/presentation/d/YOUR_FILE_ID/export/pdf if the presentation is in PDF format
Google Spreadsheets
Make the Spreadsheet as Public, then take a look at the share link and copy "YOUR_FILE_ID" from the following url:
https://docs.google.com/spreadsheets/d/FILE_ID/edit?usp=sharing
and paste it in the urls below:
https://docs.google.com/spreadsheets/d/FILE_ID/export?format=xlsx if the presentation is in Excel format
https://docs.google.com/spreadsheets/d/FILE_ID/export?format=pdf if the presentation is in PDF format
In case you are curious how the animated GIF looks like: