How to host an HTML file on Dropbox

Dropbox logo

Since starting to play with WordPress.com I’ve discovered many great things about it (and continue to find things I love about it almost daily). One task I was recently trying to tackle I was unable to do within WordPress.com no matter what I did though.

The task at hand was embedding <iframe> code into a page that would connect to a service and allow people to search real estate listings. To my surprise, WordPress.com does not allow the use of <iframe> code (or a bunch of other code that WordPress.com feels could be a security risk to everyone using their platform). A more common example of <iframe> code is if you want to embed a video from Vimeo on your site (there is an easy workaround for that).

After a few days of trying to hack the code to get it to work I decided I could add the <iframe> to a simple HTML file and link my site to that instead. But since I’m using WordPress.com, I don’t have any server space to host the HTML file. Then I discovered I could use Dropbox to host the file and it worked flawlessly.

1. Using your browser, login to Dropbox and go to your Public folder (if you don’t have a Public folder create a new folder and call it Public).

Dropbox - Public Folder

2. Once in your Public folder press the Upload button near the top-right and then select Choose files. Find your HTML file you saved on your computer to upload. Once uploaded, press Done.

Dropbox - Upload

Dropbox - Choose file

Dropbox - Done

3. Now that your file is uploaded to your Public folder click anywhere in its row to highlight it (don’t click the file name). Once highlighted click Share link near the top.

Dropbox - Highlight

4. After the Share ‘file-name window pops up select Get link.

Dropbox - Get Link

5. Your link will then be copied to your clipboard. Open Notepad (Windows) or TextEdit (Mac) and paste your link.

6. Your link will look something like this when pasted:

https://www.dropbox.com/s/z9gwnxc9lmtgdc9/vimeo.html

Sharing this link will only allow someone to download the HTML file you created and won’t open the file as a web page. In order to have it run as a web page you need to remove the https://www.dropbox. part and replace it with dl.dropboxusercontent. creating a link that looks like this:

http://dl.dropboxusercontent.com/s/z9gwnxc9lmtgdc9/vimeo.html

And that’s all it takes to host an HTML file on Dropbox!

Was this post helpful? Have something to add to it? Leave a comment below, drop me an email at brian@bamcat.com or Tweet me @bamcat.

Advertisements
Tagged with: , , , , , , ,
Posted in WordPress
4 comments on “How to host an HTML file on Dropbox
  1. JenT says:

    Thanks for writing that up, but WordPress.com supports Vimeo easily. http://en.support.wordpress.com/videos/vimeo/ Can you give other examples?

Share your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: