Learn to customize your own blog with confidence

How to Host a Website on Google Drive

How to host a website on Google Drive

The Google Drive website hosting feature is currently not available in the newest version of Google Drive (introduced in June 2014). You can still access the feature by switching back to (or staying with) the older version of Google Drive. The future of this feature is unclear.

Recently, Google added an exciting new feature to Google Drive — web hosting! Now you can build a website with HTML, CSS, and JavaScript files inside your Google Drive account. And did I mention that it's free? Yep, it's just one of the little perks that comes with a Google account.

You can see a live demo of a basic webpage hosted on Google Drive here.

As you can see from the lengthy, unmemorable URL of my demo site, Google Drive isn't an ideal hosting solution for your main web presence, but it's great for experimental or "limited time" sites, like event invitations or temporary promotions.

This tutorial is meant to show you how to use Google Drive for hosting, so I'm not going to cover how that demo page was designed. But, you're welcome to use its HTML & CSS for your own project if you like.

What You Need to Use This Tutorial

  • A Google account — Drive is included!
  • A plain text editor or an HTML editor (try Brackets if you don't already have a favorite.)

That's it for materials! To make use of Google Drive hosting, you should also know how to make a basic HTML website.

Step One: Prepare Your Files

At the bare minimum, to host a site on Google Drive you need to create a public file folder and put an .html file inside it.

As you write your site's HTML, you can use relative paths for your images, CSS stylesheet, and JavaScript (if any).

Your relative path to a file within the same folder as your .html file is just the file's name. Like this:

background-image: url(handmadepaper.png);

If you're building something a bit more complicated, you may want to organize your files into image, CSS, and JavaScript folders to keep things tidy. Your relative path to an image in a separate folder would look like this:

background-image: url(images/handmadepaper.png);

If you're using any external files in your website, like a JavaScript library or a web font hosted elsewhere, link to the secure version of that file (if possible). Google Drive sites default to https, and if you have any insecure links your visitors may get security warnings when they visit your site.

Step Two: Add Your Website to Google Drive

There are two ways to add your site to Google Drive; if you use the desktop version of Google Drive, just move your site folder into your Google Drive folder, then go to Step Three.

If you don't use the desktop Drive, you can upload the folder through the Google Drive website. The fastest way to upload a folder to Google Drive online is with the Chrome browser, since Chrome allows you to upload whole folders.

To add your website through the web interface, log in to drive.google.com. If you're on Chrome click the arrow next to the "Create" button. Then, upload your whole website folder.

If you're not on Chrome, click the "Create" button first to make a new folder within your Drive. Open that folder, then click the arrow button to upload each of your files into that new folder.

Step Three: Make Your Site's Folder Public

Once you've got your website's folder in Drive, you're just a few clicks away from publishing!

Go to the Drive website and click the checkbox next to your folder's name. Click the "Share" button above (it looks like a person with a plus sign next to their head).

On the next screen, under "Who Has Access", click the "Change" link next to the default "private" setting.

On the next screen, set the "Visibility Options" radio button to "Public on the web", then press the green "Save" button.

Step Four: Get Your Page URL

Once your website's folder is public on the web, you're ready to get its shareable URL. Go into your website's folder through the web-based Drive interface and click on your index.html file. Drive will open the file in a lightbox screen. Click the "Open" button at the lower right corner of the screen.

Once your file is open, click the "Preview" link near the top of the screen.

The preview link will take you to your live page. The URL in the address bar is your new site's URL. You can share that link with anyone and they can go check out your newest web creation!

Show Me Your Site!

I'd love to see what you do with Google Drive hosting! Leave a comment, Tweet me @MMosley, or get in touch on Google+.

Getting Started with Pinterest Analytics

Pinterest analytics

This post is OUTDATED. In August 2014, Pinterest completely revamped and significantly improved their analytics. An overview of the new analytics is available on the Pinterest Business blog in this post: How to use Pinterest Analytics to change the way you Pin.

It's been a long time coming, but Pinterest has finally released analytics! If you have a verified domain on your Pinterest account, you can now track stats for Pins from your website.

How to Access Pinterest Analytics

  1. Verify your website with Pinterest. Pinterest needs to know what site you own before they can show you the analytics! If you blog on Blogger, Wordpress.com, or Tumblr, you can find instructions for verifying your site here. If you're on self-hosted Wordpress, use Pinterest's meta tag instructions here.
  2. Switch to the "New" Pinterest, if you haven't already. When you log into your Pinterest account you'll be asked if you'd like to switch to the new look. Switch over and you'll be all set to check out your analytics.

Once you're verified & switched to the new Pinterest look, you can reach your analytics page by clicking on "Analytics" in the user menu dropdown at the upper right of the page.

Pinterest Site Metrics

The first page you'll see in Pinterest analytics is the Site Metrics dashboard. There's quite a bit of data there, so let's break it down.

Setting the Date Range

By default, the site metrics show you the past 14 days worth of stats. You can change the date range by using the datepicker to the left. You can quick select 7, 14, or 30 days, or you can select your own date range from the calendar. Stats go back to your original verification date (November 1, 2012 at the earliest).

Reading the Graphs

The four graphs on the Site Metrics page all have the same format — in the box to the left, you'll see a daily average of each metric, and in the graph to the right you'll see the actual daily stats from which the averages were derived.

Pins & Pinners

This shows the count of Pins from your website and how many individual people ("Pinners") Pinned something from your site.

Repins & Repinners

This shows how many times Pins from your site have been repinned, and how many people made those repins. Keep in mind, this is not a measure of repins of your Pins — it's repins of Pins from your site.

Impressions & Reach

This metric is very different from the first two stats, and it was the most elusive, until now. Impressions & Reach show you how many people are seeing your Pins, even if they didn't click on them. As Pinterest has described this metric, it seems that it measures impressions and reach of your Pins, not just Pins from your site.

"Impressions" shows how many times your Pins showed up on the main page, in search results, or on people's boards. The "Reach" shows how many people "saw" your Pins in their feed. Whether or not they actually looked at them can't be measured, but you can at least know that your Pins were on their Pinterest page.

Clicks & Visitors

If you track Pinterest visits in Google Analytics, you already have access to this information, but it's always good to have more than one source! "Clicks" shows you how many clicks went to your site from Pinterest. "Visitors" shows the number of individual people Pinterest sent you.

Most Recent, Most Repinned, Most Clicked

These three options are fairly self-explanatory; they let you see the most recent Pins from your site, the most repinned, and the most clicked in your date range. By default these are set to a one-day range, but you can use the datepicker to set a longer date range.

While this is visually very cool, it's a little tricky to get more detailed information about each of these pins. For example, if you want to find out just how many times the "Most Repinned" were repinned, you have to go to the board they were Pinned to and find the Pin to see the repin count. I don't know why this isn't just displayed on the Pin like it used to be. Maybe Pinterest will add it back :)

Go Check Out Your Stats!

You're all set to get the most out of your Pinterest analytics. Get in there and do some digging; you'll learn a lot about what your readers love about you, and you can use that to give them even more to love!

The Big Guide to Pin It Buttons for Blogger

The Big Guide to Pin It Buttons for Blogger

Updated May 2013 to include the new, official hovering Pin It buttons.

When I started Code it Pretty, there were few very Pin It button options for Blogger. So, I whipped up a bit of code and a tutorial to put a button next to every picture in a Blogger post.

My buttons became very popular, and I was thrilled to see them on so many awesome blogs! But, nice as they were, they've been surpassed by the improvements to the official Pin It button, and by other indie buttons with more features, so I retired them.

To help you find the perfect Pin It button solution for your blog, I've tested all the buttons I could find and narrowed them down to the 5 best Pin It button options for Blogger — two "stand-alone" buttons and three bundled with other social media buttons. Each of these add Pin It buttons to every post automatically with one installation of code.

Here's your guide to the working, automatic Pin It buttons for Blogger — including their pros & cons.

Stand-alone Pin It Buttons

These two are Pin It buttons only, without any extra stuff.

Pinterest's Official Hovering Pin It Buttons
Using the Official Pin It Hover Buttons on Blogger

Pinterest updated the pin it buttons in April 2013, and they're now much easier to use. Installation is simple — just copy and paste a few lines of code!

Pros:
  • Officially supported buttons.
  • Very simple installation.
  • Option to remove the button from individual images.
  • If you have a Pinterest business account, Pinterest provides analytics for these buttons on your analytics dashboard.
Cons:
  • Button position can't be customized.
  • Pins only link to the original post if your readers pin directly from that post. If your readers pin from your home page, the pin will link to your home page, not the original post.
  • Buttons are difficult-to-impossible to click on many touchscreen devices.
Bloggersentral's Hovering Pin It Buttons

bloggersentral pin it buttons demo

Customizable Pin It buttons that appear when your readers hover over your images.

Pros:
  • Button image is customizable.
  • Pins link to the original post's URL, even if your readers pin from the homepage or archive pages.
  • Multiple button placement options.
  • Option to manually hide the button on specific images.
Cons:
  • Doesn't work on the iPad or mobile browsers.
  • Free support is no longer available (the developer does offer paid support, though).

Bundled Pin It Buttons

These three Pin It buttons are bundled with share buttons and tools for other social media services.

Markerly Sharing Buttons

A suite of social media buttons that appear when your readers hover over your images. Account signup required.

Markerly sharing buttons demo
Pros:
  • Very simple installation.
  • Includes other social networks for increased sharing.
  • Sharing analytics available.
  • Some customization options available for advanced users (see Justin from Markerly's comment).
Cons:
  • Pins only link to the original post if your readers pin directly from that post. If your readers pin from your home page, the pin will link to your home page, not the original post.
  • Doesn't work on the iPad or mobile browsers (Yet. They're working on it!)
Tynt SpeedShare
tynt pin it buttons

The standard white & red Pin It button appears on the lower right corner of your images when your readers hover over your images. Account signup required.

Pros
  • Simple installation.
  • Sharing analytics available.
  • Part of a suite of social media sharing tools.
Cons
  • The delay between hover and the appearance of the button is long enough that some readers may not notice the button.
  • Pins link to the original post only if your reader is on the post's permalink page when they pin. Pins from the homepage link to the homepage, pins from archive pages link to the archive, etc.
  • Doesn't work on the iPad or mobile browsers.
  • Buttons appear on every image in your posts. This is a "pro" for most users, but if you want to selectively "unpin" some images, it's a con.

ShareThis Sharing Buttons

A social media sharing bar inserted at the end of each of your posts. Account signup not required, but recommended to access analytics.

sharethis buttons demo
Pros:
  • Extremely simple, semi-automated installation.
  • Includes other social networks for increased sharing.
  • Analytics available (with account signup).
  • Works on the iPad, and on mobile browsers using the "web view" of your blog.
Cons:
  • Pins only link to the original post if your readers pin directly from that post. If your readers pin from your home page, the pin will link to your home page, not the original post.

Show Me Your Buttons!

If you've got Pin It buttons on your Blogger blog, I want to see them! That goes double if you're using buttons I haven't listed here; if I've missed a great button option, let me know!

Leave a comment, Tweet me @MMosley, or get in touch on Google+.

Images: Title card designed by Cris Stone from Kiss My Tulle. Cupcake image in Code it Pretty demo CC-BY Lamantin. Bloggersentral and Tynt images from their websites as listed above. Cookie image in Markerly demo CC-BY-SA timlewisnm.