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.

Setting a static page as your WordPress.com homepage

While I’m not a huge fan of static entry pages on blogs, there are many reasons why someone would want one. A real estate agent may want their photo, tagline, and contact info to be prominent, or a charity may want to promote an upcoming fundraiser. Whatever the reason, setting your WordPress.com homepage to a static page is a very simple thing to do.

1. Under Pages in your Blog Admin section select Add New.

WordPress.com - Add New Page

2. Give your new page a name, such as “Home”.

3. Enter the info you want to appear in the body section.

WordPress.com - Homepage

4. On the right-hand side set the page to Home under Page Attributes.

WordPress.com - Page Attributes

5. Uncheck Allow comments and Allow trackbacks and pingbacks on this page and also uncheck Show likes and Show sharing buttons. These areas are found under the body section.

WordPress.com - Likes and Comments

6. Publish your page.

7. Create a second page called “Blog” (NOTE: This page can be called anything you want, but if you want your URL for your blog posts to be domainname.com/blog it needs to be named “Blog”). You do not need to put any content into the body section or edit any other settings for this page.

8. After you’ve published your “Blog” page go to Settings > Reading on the left-hand side of the WordPress.com Blog Admin section.

WordPress.com - Reading

9. At the top of the Reading Settings section is an area called Front page displays. Select A static page and from the dropdown for Front page choose “Home” and for Posts page select “Blog”.

WordPress.com - Reading Settings

10. Save your settings by clicking Save Changes at the bottom of the section.

Now when people visit your site they will see the “Home” page you created and will have to click a link to your “Blog” page to see your posts.

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.

Adding a Favicon to a WordPress.com blog

One of the most common questions I hear about WordPress.com is how you can add a Favicon to your blog. If you don’t know what a Favicon is, it is the little image that appears in the browser bar beside your URL or on the browser tab (it stands for Favourite icon). It’s also used to represent your site when someone bookmarks you. The default Favicon on a WordPress.com blog is the blue and white WordPress logo, which can get lost if you have many tabs or windows open. So while it might sound like a small thing, if you want to stand-out from the crowd it’s a good idea to have your own mark.

NOTE: WordPress.com doesn’t use the term Favicon and instead calls it a Blavatar (as in Blog Avatar). WordPress.com also uses the image you upload to represent your blog in other areas other than the Favicon spot. Moving forward I will now refer to this as the Favicon/Blavatar image.

Creating your Favicon/Blavatar image

For best results when creating an image for your Favicon/Blavatar keep it square and clean. I found that using an image 300 x 300 pixels gave me great results (a Favicon is only 16 x 16 pixels, but since WordPress.com will use the image elsewhere you want it to be a bit larger when you upload it).  When I say keep it clean, I mean don’t use a wild drawing or graphic as your image won’t show up properly and will end up looking like a smudge. I went with a simple @ symbol as my image as you can see in this screenshot:

@bamcat Favicon

WordPress.com will only accept a jpeg or a png file as the Favicon/Blavatar image and the file should be as small as possible so it doesn’t slow your site down.

Adding your Favicon/Blavatar image in WordPress.com

1. Under Settings in the WordPress.com Blog Admin section select General.

Wordpress Favicon/Blavatar

2. On the General screen to the right is an area called Blog Picture / Icon. Select Browse to find your image and then select Upload Image.

wordpress-blogpicture

3. Once your image is uploaded you will be prompted to crop it. If you uploaded a square image just select Crop Image without doing anything else.

Wordpress - Crop Image

5. You now have a Favicon/Blavatar image!

Wordpress - All Done

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.

Adding a Custom Domain Name in WordPress.com

You’ll notice my site is now bamcat.com — a domain name I’ve owned for many years. It looks much better than bamcat.wordpress.com and is also easier for people to find me. It’s also better for SEO and in general looks more professional. Telling WordPress.com this is the URL I want to be associated with my blog cost me $14 CDN (a fee I’ll have to pay annually), but only took a few minutes to setup. Here’s how to do it if you’re interested in having your own custom domain with your WordPress.com blog.

1. From your WordPress.com Blog Admin section click Store on the left-side side.

WordPress.com Store Menu Item

2. Under the slider for Store you’ll be presented with a few options. Select Domains.

WordPress.com Domains Menu

3. In Domains you can add the domain you want to use. If you need to purchase the domain, WordPress.com will take you through the steps of purchasing and using it (they charge $20 CDN per year if you don’t have your own domain already registered). If you already have a domain name you own, enter it into the field under Add a Domain and select Add domain to blog.

WordPress.com Add a Domain

4. When you enter a domain name you already own you’ll be prompted with a message that the domain is unavailable. If you own it you’ll need to check off that you own it and you want to map it to your blog.

WordPress.com Already Own Domain

5. After telling WordPress.com you do indeed own the domain name and want to use it, you’ll need to pay the annual fee. You can use a credit card or pay with PayPal.

WordPress.com Pay for Domain

6. Once you pay to use the domain name it will appear in your Domains list. Now you need to tell WordPress.com it’s your Primary Domain Name so your URLs looks like this https://bamcat.com/2013/08/30/replacing-notes-on-the-iphone/ instead of like this https://bamcat.wordpress.com/2013/08/30/replacing-notes-on-the-iphone/. You can’t make it your Primary Domain Name until you setup your DNS records. Select Edit DNS from beside your domain name to get the WordPress.com nameservers you need.

WordPress.com Edit DNS

WordPress.com Set Nameservers

7. For this next step you need to login to your domain registrar, such as GoDaddy or Netfirms, and tell them to point your domain to the WordPress.com nameservers you were given in Step 6. In the screenshot below I’m using GoDaddy.

WordPress.com - Add Namersevers to GoDaddy

Change Nameservers GoDaddy

8. Once you add the WordPress.com nameservers to your domain in your registrar you can now return to the Domains section and make your custom domain the Primary Domain (NOTE: It could take up to 24 hours for the changes on your registrar to take affect so don’t be alarmed if it doesn’t instantly work).

9. Once you select Update Primary Domain your custom domain will become your main domain and you’re done!

WordPress.com Primary Domain

If you have a lot of posts under http://name.wordpress.com those links will still work and be redirected to http://customdomainname.com. If you’ve already submitted a sitemap to Google or Bing (more on how to do that in an upcoming post) it’s a good idea to tell them you made this change and to re-index your site with the new domain name.

In my example above I mapped the custom domain for my wife’s parenting blog famtasyland.com. It works! Check it out.

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.