Multiple Like Buttons on a Single Page (Technical Tuesday)

My last post explained how to put a Like button on a web page. That sets us up nicely to explain how to make different Like buttons for different parts of a page.

For example, imagine you have a page that lists all of your books. You could have a Like button for each of them right below the cover image.

Sound good? Let's get going then.

For the purpose of this post, let's say you have a small-to-medium-sized website. It has a home page, a page about you, a page that lists all your books and stories, and a simple form for contacting you. It's nothing fancy, but it's a start. And it looks good.

Because you read my last post, you added a Like button to your home page. Now, you want to add a Like button for each of your books, but you've got a problem. The way the Like button works, it uses the entire page. Even though you put a button next to each book, they all seem to Like the entire page. That's not what you want.

It's a tricky problem, but there is a solution.

Step 1) More Pages

Because you have to Like whole pages, that means you need to create a separate page for each book.

Each page should have the book cover image and your hook (1-2 sentences that describe your book). Fill in the Open Graph tags just the way I explained in my previous article. The page can also have blurbs, snippets, buy links, ISBN, etc. The key is that the page is devoted to the book.

Don't forget to include a Like button on this page.

Step 2) Can You Feel the Like?

Go back to your main books page--the one that has all your books and stories. Add Like buttons to each one just like you did before. The code will look something like this:


<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
...
<!-- AddThis Button END -->


Here's the key. In the first div tag, add the following attribute:


<!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style " addthis:url="http://url/to/your/book/page">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
...
<!-- AddThis Button END -->

That's all there is to it.

Now, when someone uses that Like button, it will like the book page just as if they clicked the Like button on the book page itself.

This will work for anything. Just setup a page for the thing you want Liked. Then create a Like button using the page URL. This button can be used on as many different pages as you want.

So, what do you Like? Let me know in the comments.

* Wow! I didn't even know this monument existed before today. It's the monument set up in the square where the Nazis burned books. This particular photo was taken by Chang'r and can be found on Flickr.

How to Add a Facebook Like Button to a Webpage

It's not Tuesday, but this will be a technical post. A few people have asked me about adding Facebook Like buttons to web pages.

Step 1) Facebook and Twitter and Bears, Oh my!

There are so many social networks these days, which ones do you choose?

We've got the big guys: Facebook and Twitter, but what about LinkedIn, Pinterest, Google+, Reddit, Tumblr, and StumbleUpon?

Not to mention a metric slew of sites that aren't as popular, or aren't as social, but still have fans who might want to share your stuff: Blogger, Digg, Buffer, Bitly, WordPress, Posterous, Orkut (are they still around?), MySpace (are they still around?),  FriendFeed, Evernote, and dozens more.

*The metric slew is a unit of measure for those who want to sound precise but who really have no clue how much they are talking about.

I'm recommending you go out to AddThis and grab their code. AddThis is used by some big sites. They are simple to use and have a lot of ways to tinker with their stuff if you're the tinkering type.

When you download their code, they'll ask you to create an account. It's not required, so if you want to try them out first, that's fine. Just dismiss the sign-up window.

Here's three examples of their stuff. (The following examples are setup for web pages, so they don't work as effectively on my blog, sorry. I'll do another post specific to blogs in the future.)

---

---

---

---

Note: AddThis isn't paying me anything to promote them. For some reason, companies don't want to give me money to promote them. *sigh*

Step 2) Huh?

Have you ever gone to like a webpage and Facebook decides it wants to use the "Email Me" picture of a giant @ sign instead of the site logo, or the description that comes up is the "About the Author" text instead of the first paragraph of the page? Frustrating, isn't it.

You solve these issues for your site using Open Graph tags. These are meta tags you include at the top of your html page that help Facebook and other sites figure out what's most important.

Now, open up your page to edit it and include the following meta tags at the top in the <head></head> section:

  <head>
    ...
    <meta property="og:title" content="***PAGE TITLE HERE***"/>
    <meta property="og:type" content="***CONTENT HERE***"/>
    <meta property="og:url" content="***URL HERE***"/>
    <meta property="og:image" content="***IMAGE HERE***"/>
    ...
  </head>

These tags tell Facebook what title, url and image to use when someone likes your page. The og:type is also interesting, there are a lot of options including "article", "author" (when you're bragging about yourself), "book" (when you're promoting your book), "cause" (when you're spreading the word for your favorite charity), "activity" (when you're announcing your book release party), and quite a few more.

And that's all you have to do. Go ahead and try it out and let me know how it works for you.

Wrap Up

Now you can help Facebook and other sites know how to share your web pages.

In my next blog post, I will show you what you need to do if your page has many different things you want to like. For example, if you have a bunch of different images or videos or quotes and you want people to like each one separately.

Until then, let me know if these steps were helpful for you in the comments below.

* Ah, the open road. There's more to this picture taken by Takver and posted on  Flickr. Especially check out Takver's  holiday set and protest pictures.

After Dynamic Views (Technical Tuesday)

Life after NaNoWriMo is finally getting back to some kind of normal. I'll be posting a few of my thoughts on NaNo later, but for this Technical Tuesday I'm going to report on my other grand experiment: Dynamic Views.

I switched my blog over a few months ago. During that time I tried most of the different views. In the end, I decided to go back to my previous template. Here's why.

Stats

From the moment I switched to Dynamic Views my page count skyrocketed. I expected this.

Take a look at a normal template. When you visit the main page it shows the latest 10 posts all at once. This counts as 1 page view. You see, Blogger doesn't know if you read one post or all 10. It just knows you loaded the page.

Dynmic Views are different. They only load what they need to. As the user scrolls down, it loads more and more posts. Each of these count as a page view. This means that if the person scrolled down through your first 7 posts, Blogger would count 7 page views.

I'm sorry to burst your bubble if you thought your blog became 10x more popular after switching to Dynamic Views. It probably didn't.

The real problem for me was the stats for individual posts didn't work the same. In other words, Blogger was counting how many total page views, but not which ones belonged to which post. This was annoying because I like to see which of my posts are most popular, but I couldn't figure out a way to do that.

For example, I had several thousand page views in October, but my most popular post was visited only 85 times. Really? Compound that with the fact that I had less than 40 posts published and you begin to see the problem. Where were all those "total page views" going?

Sidebar

I'm not a big fan of sidebars, but they do serve a purpose.

It may surprise you, but I don't blog just to see myself write. (Okay, maybe that wasn't a big surprise.) I want to build a platform I can use for other pursuits. I use the sidebar for that. My sidebar has an overview of the blog and information about me.

Also, my sidebar is used to spotlight posts and other places I think deserve a little extra attention. I have a place for my most popular posts, my friends and followers. In the future, I plan on featuring books and articles I've written.

The Dynamic Views didn't have any of this. They allowed my posts to be front-and-center, but they didn't allow for much else.

Confusion

The Dynamic Views didn't look enough like a blog. Sure they looked cool, but they were different enough that some people had a hard time figuring out what they could click on and what they couldn't. 

Sometimes readers had to click to read the entire post. A lot of people didn't do that. I know, that's mostly my fault. I could write posts better to have a hook "above the fold", but I didn't.

Conclusion

There you have my biggest concerns with the Dynamic Views.

From a technology perspective, I thought they were pretty cool. I like the dynamic loading, and if the stats issue could be resolved that would be a great thing. I think I could live without the sidebar if there were more ways to customize the layout and the look.

All in all, I enjoyed this little experiment and I hope to try more things like this in the future.

* I can see why this castle is in ruins. Who knew it was built on such a slope? Babak Fakhamzadeh did a great job of "framing" it though. You can find this and other photos with frames on Flickr. 

Putting Boxes Around Text (Technical Tuesday)

Let's go outside the box . . . and inside the box. In fact, let's talk about the box itself. I've had a few people ask me how I put boxes around text.

Like this.

It's not hard to do, and I've made a tool for you to quickly create your own.

Note: This tool may not show up in a news reader. You'll need to visit the blog.



There are some basic instructions included with the tool. If you need more details, I've got your back. Read on.

Box Content

You can type as much text as you want into the box.

You can also put HTML in there. This means that you can have images, buttons, multiple paragraphs, whatever.

Widths

There are three widths you can control with this tool.

• Border Width: The thickness of the line.
• Inside Padding: The space between the line and the text inside.
• Outside Margin: The space between the line and everything outside.

Here's a quick graphic that may make more sense, or you can just play around with the settings. As you change them the Preview will be updated.

Colors

All that's left is choosing some colors.

Get the Code

Now that your box looks just right, switch to the "Get the Code" tab. There you can copy the code and paste it into the HTML view of your blog post. You can also use this code on your website.

Happy Boxing.

* Origami is one of my wow-I-wish-I-could-do-that-but-not-enough-to-actually-practice skills. So when I see things like this decorative box, I'm in awe. And Dominic Alves did a great job photographing it. You can find it and others on Flickr.

I Have Dynamic Views (Technical Tuesday - Special)

My initial impression: Dynamic Views aren't quite ready for everyone.

In this post, I'll walk you through the switch-over and some of the hurdles I encountered. There's a fair number of them and I don't want this post to become negative. I'm going to keep working on finding a way over each of them and will post my suggestions as I figure things out.

The Big Switch

Switching to Dynamic Views is very easy. Here's what my blog looked like before:

1. Login to your Blogger Dashboard and go to the Templates section.
2. Make a backup of your current template. I posted instructions for doing this a couple days ago.
3. Select one of the Dynamic Views and apply it to your blog.
4. Done.

I decided to use the Classic view mostly because it was the first one in the list. Here's my blog after the switch.

The Hurdles

The new view is simple, clean, and worked like a charm. All my posts showed up and were formatted well. I don't use a lot of fancy formatting in my posts, so I didn't expect any problems with this.

Hurdle #1: Branding

I like the new look and how it makes it easy to read posts, but I want to make it a bit more my own. Right now, there aren't a lot of people using the new views, but as more people use them my blog will blend into the sea of simple black & white.

The new views are all about the content. They push everything else to the background and put the posts in the spotlight. I think this is a good thing.

Still, I want to put my own spin on it, and this is hard to do right now.

Hurdle #2: Who Am I?

As you can tell, my sidebar is gone along with all the gadgets. So, how are people supposed to know who I am? How can they find my profile? How can they find me on Twitter or Facebook or Google+?

Hurdle #3: I Lost My Friends

I haven't really lost my blog followers, but you can't see them anymore.

Honestly, this doesn't bother me much. I know there are many people who put a lot of emphasis on how many Followers they have. The problem is that there are so many other ways to follow a blog than clicking on the "Follow" link.

If you're a reader who uses the Follow button to keep up on blogs then you're out of luck.

Hurdle #4: No Preview

I don't know if this is related to switching to Dynamic Views but since switching over I can't Preview my blog posts. The button is grayed out.

Hurdle #5: Tags and Archives


This isn't really a hurdle. It's just different. The new search feature is way cool. Just start typing in the box and it will filter the posts like magic.

Hurdle #6: Money, money, money, mo-ney

If you use your sidebar, header, or footer for ad space, then it's gone.

Hurdle #7: Platform

Most blogs use their sidebar as a platform to promote products, other blogs/websites, events, and show off their awards. The sidebar is gone, so how can people see the cover of your latest book and purchase it? Or see your most recent blogging awards?

To be completely honest, most people don't see those things anyway. When was the last time you visited a blog and just perused down the sidebar looking for something interesting? Even if your answer was "just five minutes ago" ask yourself how many time a week do you do that? Not often.

People aren't looking at your sidebar much at all. And if your visitors are like me they rarely see your sidebar ever. I read blog posts in Google Reader. This means that I only see your posts formatted the way I like to read them, nothing more.

Still, I think the sidebar images are like billboards. Marketers learned long ago that billboards rarely drive sales directly. Instead, they reinforce a brand. When you see a billboard over and over again, you form a subconscious relationship with that company. Then when it comes down to making a sales decision, your familiarity will give them an upper hand.

The new views have torn down all the billboards. Great for people who think they are eyesores, not so great for people who want to promote their brand.

Hurdle #8: Copyright

I try to be a stickler for copyright. I make sure I only use images and quotes with permission and I try to give proper attribution. For example, my header image is based on the Night Sky theme by Ray Creations. In my old template, I added this attribution to the footer. The new view doesn't have a footer, so where do I put this?

Also, everything I post on my blog (unless otherwise noted) is released under a Creative Commons Attribution license. This means that anyone can use any quote, image, or whole posts from my blog without asking as long as they give me proper attribution. This information used to be in my footer.

Hurdle #9: Javascript is Broken

This won't apply to many of you, but I use custom javascript in several of my posts. For example, the tool I made to create image buttons. It doesn't work anymore, and I'm sad about that. I know that it's possible to make it work because one of the Google blogs did it. I just need to figure out how.

The Finish Line

Whew! That's a lot of hurdles, but I'm planning on finding a way over each of them. If you have any suggestions put them in the comments. Or if you want to add a hurdle or two--feel free.

How do you like the new view?

* The hurdles photo was taken by David Morris and can be found on Flickr. I'm short, so this is pretty much exactly how I envision skyscrapers hurdles.

How to Backup Your Blogger Template (Technical Tuesday - Special)

I enjoy reading Nathan Hale's blog. He's an incredible artist/illustrator and often tells stories, a page at a time, on his blog. He shares tips, advice, and events from his life. He also runs some really fun contests. You should follow him.

A couple months back he re-designed his blog. That sounds boring, but he allowed his readers to see each step and even participate in the decisions. He'd  post some new artwork and get feedback, then we'd see the blog change. Sometimes the changes didn't work out the first time and he'd try again. It was a lot of fun and I learned from it, too.

I hope that this journey will also be entertaining and educational. I don't think I can compete with Nathan's illustrations, but I'll do the best I can.

With that high bar to clear, let's get started.

Step Numero Uno

The first step on our Dynamic Views journey is to create a backup. I've put a lot of work into my current setup and I don't want to lose it. Also, if I don't like my changes I want an easy way out. In this post, I'll walk you through creating a backup of your Blogger template.

Official Backup

Blogger provides a way to download a file with all your template information. You have to be using the updated version of the Blogger Dashboard, because the backup option doesn't appear to be in the old interface.

1. Go to your Blogger Dashboard.
2. If you see a link near the top of the screen that says "Try the updated blogger interface" then click it. If not, you're good.
3. Go to the Template section of the Dashboard.
4. Click the "Backup/Restore" button on the top-right.
5. Then click "Download full template" and save the file to your computer.

Fail-Safe

One of my rules for backups is that I need to be able to understand them. The file Blogger creates is nice and easy, but I like to have a fail-safe--something that I can understand without a lot of technology. In this case, I'm mostly interested in recording how my blog looks, so a screenshot will do the trick.

The backup file Blogger creates is an XML file. I work with these all the time, so I could probably recreate everything from that if I had to, but a little more insurance is a good thing. Especially when it won't cost that much.

I took four screenshots of my blog to get the header, sidebar, and footer information. I also copied the text and html out of a few of my sidebar widgets and pasted them into a text document for safe keeping.

I saved all the files in a single directory.

Simple Test

We're done, right? Wrong.

This is the step people skip. They think, "I've got a backup, now I'm safe." But you don't know that until you try it.

1. Go back to your Dashboard -> Templates.
2. Click on "Backup/Restore" again.
3. This time Choose your backup file and Upload it.
4. Now, check out your blog and make sure everything still looks good.

If everything worked, nothing will change on your blog. It should look exactly like it did before. If there is a problem, then you can either use the screenshots (our fail-safe) to put everything back. Or you can keep moving ahead with the knowledge that you don't have a good backup. It's up to you.

Full Test

My next test was to switch my blog over to a Dynamic View and then restore it back again. I wanted to make double-sure I could go back if I needed to. This may seem like overkill, but I would rather know that I'm working without a safety net instead of believing that there is a safety net protecting me.

Note: Please read all the steps before trying this. I ran into problems part way through this test.

1. Go back to your Dashboard -> Templates.
2. Select one of the Dynamic Views and Apply it on your blog.
3. Visit your blog and make sure the new view works.
4. Go back to your Dashboard -> Templates.

I know what you're thinking, "Just click on Backup/Restore and upload the backup file." Well, I tried that and it didn't work. Agh! It appeared to work , but my blog never changed.

See? This is why it's good to test each piece as you go.

I did discover a work-around. You're mileage may vary.

5. I chose one of the "Simple" templates and applied it to my blog.
6. Then I was able to click on Backup/Restore and Upload my file.

My blog looked the same, so the backup worked. Hooray!

I suspect there is a bug that doesn't allow the older templates to be uploaded when a Dynamic View is active. If Blogger fixes this then you won't need the work around.

Now that we have a backup and we know it works, we're ready to embark on the Dynamic Views journey.

Thanks for hanging in there with me. I know this post was a bit dry. I felt it was important to cover--not only for this journey, but also for any time you want to make big changes to your Blogger template. I hope you find it useful.

Tomorrow, I switch to using a Dynamic View. Which one do you think I should try first?

* They don't make night deposit boxes like that anymore. This photo by Mira Hartford can be found on Flickr.

Blogger Dynamic Views (Technical Tuesday - Special)

Blogger just announced a new template feature called Dynamic Views. They change the way your readers can see and use your blog in some dramatic ways. Here's a video trailer Blogger put together that gives you a quick introduction:

Over the next few days, I'm going to try out each of the views and give you my thoughts. I'll also post the steps I used to get each one working.

I'm sure some of the views won't be right for this style of blog, but I'm going to try them anyway--for science. Okay, maybe not for science, but it should be fun.

Try It Out Now

Blogger has a way to try out the new views without changing anything on your blog. You can go right ahead and see what yours will look like if you switched. I don't know if it's completely accurate, but it's worth a shot.

Just type the URL of your blog (or anyone else's) and click Preview to see.

.blogspot.com

A Quick Warning

If you use a custom template (like Cutest Blog on the Block or Hot Bliggety Blog) then you might have some problems. I tried previewing couple blogs and they mostly worked, but some of the views had problems. I don't know if this is because of the custom template or because of stray codes in their posts.

The new views won't have any of your cool themes (background, colors, etc). I'll be researching how to make that happen.

Why It's  Cool

Before I get into the technical pieces over the next several posts, I thought I'd share a couple points that I think make these new views cool.

First, "Infinite Scrolling". This is what Blogger is calling it, but it means that your readers will be able to keep scrolling through your posts without having to click a "See previous posts" link. Your visitor can scroll all the way back to your first post if they want to.

When I find a blog I like, I typically scan through until I get to the bottom of the page then move on. Now, I could keep scrolling and scrolling. This will allow me to see a lot more content before I visit someone else. Cool.

Second, "More Content". The new views allow for more of your posts to be accessible faster. Currently, blogs fill the front screen with the latest post. You might see the top of the next post if the first one is short.

With the new views more of your posts will be visible "above the fold". I hope this leads to visitors clicking on more than one post. It can also lead to your popular posts getting more visits. Cool.

Why It May Not Be Cool

It's not all singing birds and happy elves. I can think of a couple problems with the new layouts.

First, "Where's the sidebar and gadgets?" A standard feature of many blogs is the sidebar. Some blogs have multiple sidebars that go on and on and on. But I don't see that feature with the new templates. Maybe it's there. I'll have to let you know when I try them out.

Second, "Pictures, pictures, pictures". Many of the new views put a heavy emphasis on the images you include in your posts. If you don't have a lot of images, or your images are low quality, this could adversely affect your visitors. The new views will even pull images out of old posts to show, so if you have a bunch of old, blurry images it might not be pretty.

Aaaaand We're Off

Stay tuned for my experiments with the different views, and if you have any questions put them in the comments and I'll work them into my research.

Use Multiple Browsers (Technical Tuesday)

The web is a marvel. It changed our society in so many ways. And like most marvels it does a great job of working even if you don't understand how. Think of your car, or your air conditioner, or your refrigerator. You may know some about how they work, but mostly you just let them do their job.

Today I'm going to teach you a teensy bit more about how the web works. Don't worry, it won't get complicated, and having this knowledge will help you if you have your own website or blog. It may also help you if you've ever visited a site that didn't work.

We're going to talk about browsers and why you should have more than one.

Ice-breaker

Back in high school I worked as a summer camp counselor. Before camp began they held a series of training meetings. At the first one we usually played an icebreaker game. You know the drill--they force you to interact with all the strangers in the room?

One game involved picking a person out of the group and showing them a simple line drawing. The person described the drawing while everyone else drew what they understood. In the end, we'd all show our drawings. Often the results were--how should I put this--awful. Then they'd pick someone else to be publicly embarrassed It.

How this game was supposed to help us get along better, I'm still not sure. But it is a great example of how the web works.

Browser-breaker

Quick Definition:
Browser: Short for "Internet Browser" or "Web Browser". This is the program you use to access the web. The most common browsers are Internet Explorer, Firefox, Chrome, Safari, Opera, and Mobile Devices.

Any time you go to a website it sends a stream of letters and images to your computer. Your browser receives these data and displays it to you. Using our icebreaker game, imagine that the website is the person describing the picture and your browser is the one trying to draw it.

Browsers have been playing this "game" for a long time. They're pretty good at getting things right, but there are still small differences (and sometimes major differences) between the browsers.

Have you ever gone to a blog and seen all the wonderful comments, but it won't let you leave one? Or have you visited a website and everything looked all messed up? Has anyone ever told you that YOUR blog or website was messed up, but it looks just fine to you? Many times, these are symptoms of the different browsers "drawing different pictures".

This is why, as a provider of web content, you need to test out your product in all the major browsers. You'll be surprised how different each one looks, and you may even discover why some of your users complain that they can't see your stuff.

Get the Browsers

All the major browsers are freely available to download and install. I recommend installing Internet Explorer, Firefox, and Chrome. This will cover over 80% of your potential readers. If you have a big following using Macs you'll also want to install Safari.

Click on the following links to download and install. If you already have a browser you don't need to install it again.

• Internet Explorer
• Firefox
• Chrome
• Safari

Quick Tour

Each of these browsers approaches the web a little differently. Don't let that worry you. You don't have to spend a lot of time with them. You're just using them when you need to. Here and there.

All of the browsers will allow you to type (or copy) in a web address and press Enter to visit a page. All of them will let you scroll through your page and click on links. And that's it. There's a lot more to learn about each browser, but you don't need to know all that just to test your site.

To Browse or Not to Browse

First, when someone complains that your site or blog doesn't work right, make sure to check it out in each of  the different browsers. Odds are, one of them will have the problem. If that happens, then do a search specific to that browser such as "Internet Explorer won't allow Blogger comments". You might find your answer.

Second, any time you make big changes to your blog or site, test it with the browsers--especially if you're changing your theme. There have been numerous times I've visited a blog to find the titles overwriting the comments link, or jutting out into the sidebar, or have the posts all jumbled with strange colors. This is usually caused by the theme not supporting all the browsers. Sometimes you can report this to the theme creator and they'll fix it. Sometimes you'll have to choose another theme.

Diversity

Having different browsers can be a pain sometimes. It means a bit of extra work for us bloggers and website creators, and it might be tempting to complain about that. Don't.

Having different browsers forces them to compete. Which means they're doing new things. Some of those new things are what makes the web so awesome today, and they will make it even more awesome in the future.

Now instead of feeling helpless when your browser or a site doesn't work, you can be proactive. Jump to another browser and see if that works.

Happy Browsing.

Question: Which browser do you use most often? What do you love/hate about it?

* The cool ice picture (pun most definitely intended) was taken by BuildArk and can be found on Flickr.

** Browser statistics are based on August 2011 data.

Lastpass (Technical Tuesday)

As a computer programmer I feel that I should apologize to the world for a big problem my profession created. There's no way to measure the number of lost hours or the amount of frustration.

In our defense, we didn't mean for things to get this bad. Every step of the way, we were just trying to make things better--safer. And now, even programmers are caught in the quagmire.

I'm talking about passwords. They're a necessary problem, but a problem nonetheless.

As I see it, there are two things that cause us the most grief:

1. Passwords are too complex (and getting worse all the time).
2. There are too many of them.

History in a Nutshell

It all started out simple enough. Huge machines were easy to secure--lock the door. Then computers got smaller.

Smaller computers were more public and had more users. Those users wanted security, so in came the password. Back then passwords could actually be real words. Then computers got faster.

See there are only about 250,000 words in the English language. That may seem like a lot, but my computer can count to 250K in about 1 one-hundredth of a second. So guessing a word is trivial.

We started requiring rules for passwords like they couldn't be words, they had to be eight characters long, they had to have uppercase and lowercase letters, they had to contain numbers and symbols. I'm sure you're all familiar with these.

Today people have to choose a mishmash of letters and numbers, and we're not built to remember things like that. Sure we can remember one or two. More than that and it's a lost cause, so we take shortcuts.

We use our name. Either your own name, the name(s) of your children, spouse, parents, or even a nickname. Then we tack a number on the end. For example, "Thomas11".  If we don't use the number 1 then we use a number that is important to us--our birthday, anniversary, graduation or phone number like "MyName1990" or "MySpouse1996".

We use a simple word we can remember like "password" or "letmein". Sometimes we get sneaky and replace letters with numbers: "P4ssw0rd" and "L3tM3In". Again, we'll tack a single number on the end until it's long enough usually the number 1.

We also like series of numbers or patterns on the keyboard: "12345678", "Qwertyui", "Asdfghkj"

Have I come close to guessing your password yet? Most likely.

The worst part is this. Even if you do have a very secure, hard-to-guess password, odds are that you use the same one or two of them on almost every site you sign up for. Because you can't remember dozens of different ones.

A Horror Story

I don't want to dwell on this sad story, but there's a lot to learn in it. By the way, I've changed the names and details of the story, but the heart of it is the same.

I have a friend who ran an online business. He reviewed items on Amazon, and people used his affiliate link to buy things. He wasn't making a fortune, but the couple hundred dollars each month helped a lot.

One day, he was surfing the net and found a cool site where he could track his exercise. He signed up with them so he could get access to training schedules and a weekly reminder email.

A few months later, the exercise site was hacked. The hackers got away with everyone's username, password, and email address, but they were sneaky and the site owner didn't know. The first thing the hackers did was write a program to access everyone's email address using the password they stole from the exercise site. They were able to get into my friend's online email account.

Once they had access to his email, they changed his password. Then they did a few searches through his mail and found out the name of his bank, his paypal username, and his Amazon ID. They went out to those sites and tried the same password, but it didn't work. A friend had told him to use a different password for his business affairs, and he took their advice.

That didn't bother the hackers. They clicked on the "Forgot Password" link, and changed the passwords using the hacked email account. They then proceeded to buy stuff with his credit card on Amazon, they wrote offensive reviews for products, they sent rude emails to clients and customers, they sent money through PayPal to random people, and turned off his automatic bill pay.

It took many, many months to recover. He never did start up his business again. His reputation was tarnished and his motivation was in shambles.

Don't let this happen to you.

LastPass

Here is one thing you can do to keep yourself safer. Use a program called LastPass for all your sites (except your primary email and financial sites).

This program installs in your browser (on your computer and on your phone) and fills in password prompts for you. It will even help you generate passwords when you're signing up for sites. By using this program, you can use a unique, random password for every site. That way, even if hackers strike they won't get access to everything.

As the video explains, passwords are encrypted and stored using a master password--your "Last Password". It is encrypted in a way that even the company couldn't access your information without spending years breaking the code. Lesson: Don't lose your master password.

Personally, I don't put my email or financial passwords into LastPass, so that means I have to remember four passwords: my bank, my PayPal, my email, and my master password. That's not so bad. LastPass remembers everything else for me. Besides, if LastPass completely tanks, I can still use the "Forgot Password" link on any of the sites to access my accounts.

What to Do

This is Technical Tuesday, so here are some steps for you to follow to get setup with LastPass.

1. Visit https://lastpass.com/ and learn more about the program. They have several good videos and FAQs.
2. Download and install LastPass on your computer. Follow the steps to setup a new account. Use their recommendations to choose a secure-but-memorable master password.
3. Change your password on your email and financial accounts. Pick a password you haven't used anywhere else. You can let LastPass remember these for you, or not. It's up to you.
4. That's it. Now, as you surf the internet and login to your sites change your password using LastPass. Also, when you sign up for new sites use LastPass to generate the passwords.
5. If you like the product, buy something from them. This is what keeps the free version free, and what pays their paychecks to create more great products.

Soon, you'll only need to remember a few secure passwords and LastPass can remember the rest.

Note: Today's post wasn't an answer to anyone's question, but I felt this was an important topic to cover.

* I'm always impressed when someone can use a simple, common object and take a great photo. tehusagent did just that with the key photo. You can see the full-sized image on Flickr. I especially like the little strand of pocket lint clinging to the side.

How to Create an Image Button (Technical Tuesday)

Today, I'm going to teach you how to turn a book cover into a clickable button you can give to your fellow bloggerites blogarians your posse. Don't worry if you don't have a book cover. You can use these steps to create any kind of clickable image for an award or special giveaway.

Rebecca Talley asked, "How can I make a button with an image of my book that others can put on their blogs?"

Quick Steps

I've created a tool to help you. Just fill in the form on the left and click Generate. You can preview your button in the middle section. If it looks good, copy the HTML code from the right and paste it into your website or blog. Done. By the way, you can make changes to the form and regenerate as many times as you want, so go ahead and play around.

(Note: This form may not work in an RSS reader. You'll have to visit the blog to use it.)

---

Settings Image URL Link URL Message Options: Show Message Show Copy Text Box	Preview	Code
Enter the details for your button.	Preview your button. Be careful when clicking on the button, it will take you away from this page (just like your real button will).	Copy and paste the code into your blog or website. Enjoy.

---

Longer Steps

If the tool didn't work for you (or you want more information), don't worry--I got your back. I'm going to cover all the steps you need to do to make your button.

Find Your Image

First, you're going to need an image. Follow the instructions on my previous post to find and re-size your image. Your final image should probably be between 125 pixels and 175 pixels wide. If you are unsure what size you need, try 150 pixels.

Since Rebecca asked the question we're going to use the book cover of her latest release The Upside of Down. Here it is:

Post Your Image Online

Your image needs to be publicly available online.

The very best place for it is hosted with your website, but different companies have different ways to get files on the internet. If you know how to do this, then do it and skip the rest of this section.

If you don't know how (or don't want) to upload your file to your website, I've got the next-best thing. We're going to upload it to Google Photos. (This used to be called Picasa Web Albums. Google is in the process of changing the name, so you'll still see it called both.) If you have a Google account or a Blogger blog then you're good. If not, you could create one, or you could use any number of other photo hosting sites.

Visit Google Photos and login if you need to. Click to "Upload" your image, then find the file on your computer and upload it. When you upload an image you can choose what album it is placed in. I chose to create a new album called "Public Album", but you can call yours whatever you want (or put the image in an existing album). Then click OK.

Now that the image is online, we need to make it publicly available. If you tried to make your button right now it would work for you because you have access to see the image, but everyone else in the world will just see a missing picture. That's not good.

In Google Photos, you should be viewing the album you just created. If not, navigate to it now. Select Actions, then Album Properties. This will bring up a window with the details of your album. The only thing you need to change is the Visibility setting. Change it to "Public on the Web". This means that anyone can view the pictures in the album without needing to login. They will also show up when people search.

There's one last step, you need to find the URL of your image. In Google Photos, click on your picture to view it. In the right sidebar click on "Link to this Photo". This will open up a couple text boxes and some settings. Make sure that you Select the Size of "Original Size". Then check the option "Image Only (no link)". Now, the information you're looking for is in the "Embed Image" field. Copy the text from that field, and paste it into notepad or Word for safe keeping during these steps.)

The Link for our example image is: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDpTseUZRqsSVUHh2VKE2-HTSYvU5aLvYmhQdmgtMmHT8cI3ypHGaF7qd0WcP1Qv4bckuozQTpHLgLZiZe_2uJyEQ8RK8trh3lixMSB8FBi_tDospNlVFddhySZAQutXY5SMwy97NOvTc/s800/upside%252520of%252520down.jpg

Wow! That's ugly and long, but it works and the people who view your site won't have to see that link. They'll just see your awesome image.

Decide Where You Want the Button to Go

When someone clicks your button, where do you want them to go? Open up an internet browser and go to the page. Then copy the full text out of the address bar. Again, paste this into the notepad or Word doc you used in the last step.

For our example, we have several options.

• Her writing blog.
• Her website.
• Her book blog.
• The sample prologue or chapter.
• The amazon purchase link.
• A link to the teaser trailer on YouTube.

We're going to use the link to her book blog, but there is no wrong answer. Here is the URL: http://theupsideofdown2.blogspot.com/.

Use the Tool

You now have the information you need to use the tool. Just copy and paste the information from your notepad or Word document into the tool. Put the image URL (from Google Photos) into the Image URL field. Put your destination URL (the blog address) into the Link URL field. Make sure these links include the full address that means it has to have the "http://" part.

Click Generate and see what it looks like. That's nice.

<a href="http://theupsideofdown2.blogspot.com/"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDpTseUZRqsSVUHh2VKE2-HTSYvU5aLvYmhQdmgtMmHT8cI3ypHGaF7qd0WcP1Qv4bckuozQTpHLgLZiZe_2uJyEQ8RK8trh3lixMSB8FBi_tDospNlVFddhySZAQutXY5SMwy97NOvTc/s800/upside%252520of%252520down.jpg" /></a>

Extra Options

The tool has some other options you can try.

If you enter a Message and check Show Message then it will display the message under the image. You can use this for short blurbs like "Buy Today", or "Ends Sept 24th", or "Available in Oct".

If you check "Show Copy Text Box" then a text box will be created under the image with the code people need to copy and paste to get your button on their site. This is useful when you post your button on your own site. Anyone who wants to grab your button can copy the code and use it.

Go ahead, play around with the options and see what works best for you.

There you go, a quick tool for creating image buttons for blogs and websites. If you use the tool let me know in the comments. And if you have any other technical questions, send them over.

Re-sizing Images (Technical Tuesday)

Thanks to all the awesome people who submitted technical questions. There were so many interesting topics. Several of you asked questions related to working with images, so today I'm going to cover one of them.

Canda asked how to re-size images to fit on her blog.

There are two parts to this question. First, I'll explain how to re-size images. Then, I'll cover how to find out what size the images need to be.

Re-sizing Images: Quick Steps

1. Find the nicest image you can.
2. Choose which way to re-size.
3. Option A: Use length and width attributes.
4. Option B: Use an image editor.
5. Test it out.

Find the Nicest Image You Can

You need to start with a nice, clean image. Make sure all the text is crisp and easy to read; the colors are good; and nothing is blurry (unless it's supposed to be blurry).

While it is possible to increase the size of images using the methods I'm going to cover, doing that will increase the blurriness. Be warned, if you make an image a lot bigger things will look blocky. But, if you just need it a smidge bigger, then try it out and see. Otherwise, find a larger image.

Choose Wisely

I'm going to show you two ways to re-size your images. Before I jump into the details I'll talk a bit about how each of the ways work. There are reasons to use both, but if you're in a hurry just jump down to the second option. That will work for you most of the time.

Way #1: Make it Look Smaller

This way takes advantage of HTML code to make an image appear to be any size you want. It's fast and simple to do, but it comes with some significant disadvantages. 

First, if the image is big the user is going to download that big image. For example, imagine your neighbor calls up and asks to borrow a cup of milk, so you get out your moving dolly, load your refrigerator into the back of your car, drive over to your friends house, and pour a cup of milk for them. That's a lot of wasted time and effort.

Have you ever visited a site and waited a long time for all the images to load? Even though the images looked small? This is probably why. The images were actually big but were changed to only appear small.

Let me show you what I mean.

That's a nice image and a good size, but if you click on it you'll see how big it actually is. That's lots of wasted bandwidth.

Second, browsers aren't as good at re-sizing images as a real image editing program. They do their best and all, but if Internet Explorer ever gets better than Photoshop something is wrong.

So, why even use this way? Let's say you really do want a big image with lots of details. For example, you get back from an AWESOME writers conference and you have a great picture with 50 of your new closest friends, but when you make it fit on your blog everyone looks like little smudges. You can use this technique and when a reader clicks to see the full image they will see it immediately (because it is already loaded) instead of waiting for it to load.

Here's how you do it. After inserting your image in Blogger, click on it. You will see options for changing the size to Small, Medium, Large, etc. Choose one of those options. (Click the screenshot to see a larger view.)

Did you see what I did there? Screenshots are a great reason to use this re-sizing option because the reader can click to get a bigger, clearer view.

Advanced Tip:

After you select a size, change to the "Edit HTML" view and find your image. It should look something like this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD0w2oByOlBlWerltbaR2wlm9aeXLD_ZfWbVfeRZ3w8hLWAPleEyYsZdp6CaI8q324nXVEnApknI5C20nd2sN-3_e8VljmGAqYMH0zXHZJEXxiuCoe0TV3O_vkqlHacrWLHG0uXBmUyyY/s1600/Blogger-resize.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD0w2oByOlBlWerltbaR2wlm9aeXLD_ZfWbVfeRZ3w8hLWAPleEyYsZdp6CaI8q324nXVEnApknI5C20nd2sN-3_e8VljmGAqYMH0zXHZJEXxiuCoe0TV3O_vkqlHacrWLHG0uXBmUyyY/s200/Blogger-resize.png" width="200" /></a>

The "img" tag means this is an image. The height and width attributes are used to control the appearance of the image on the page. You can edit these by hand if you want, just make sure to keep the height and width ratios the same otherwise you will end up with images looking like this:

Way #2: Make it Actually Smaller

This way will change the actual image to be the exact size you want. You'll have to use another program to do this, but it's not that difficult. It takes a bit extra work, but the end results are best for your readers. They don't download any extra bits and the images appear exactly how you want them.

I don't know what image editor you use, so I'm going to use one that's online and free. It's called Picnik. The first step is to go to their site and choose to "Get Started Now".

Once you're in, choose to "Upload a Photo". Then find the file on your computer and upload it. You will see your image on the screen.

There are several things you can do with your image. The one we want is Resize. Click it. Then enter the width or height you want. No matter which value you changed, the other one will be automatically changed to keep the proportions the same. Once you have the right size, click Apply.

Quick Tip:
For most blog sidebars you'll want a width around 150 pixels. For images in your main articles, you'll want to keep it less than 600 pixels. For your blog header, try something around 800 pixels. We'll get into this in more detail below.

To Border or Not To Border

Small detour, here. I hope you don't mind.

While we're in Picnik you should think about putting a border around your image. Some images will fade away when put on dark or light backgrounds. Sometimes this is what you want (like for our example image). Sometimes this is NOT what you want (like with your book cover or blog award). I can't count the number of times I've seen a mostly-white book cover sitting in a blog post on a white background and it's hard to see. This can be solved by putting a simple border around your image.

In Picnik click on Frames. You can find it in the menu near the top of the page. The frame I suggest is simply called "Border".

Play around with different thicknesses. I suggest using an Inner Thickness of 0 and the Outer Thickness of 1. You can also experiment with colors. I suggest either black or white. Remember, subtle is your friend here. You want the border to give a frame for YOUR image not to draw attention to itself.

If you're a graphic artist, feel free to ignore my advice and use the thickness and colors that best accentuate the overall affect of the image in the intended setting. Then again, if you're a graphic artist you don't need to learn any of this. For the rest of you, think simple and subtle--thin border, black or white.

Then click Apply.

Back to Way #2: We're Almost Done

Now that our image is sized correctly and may have a border, we're ready to save it. Choose "Save & Share" in the tabs across the top. Type in a name for your file. Then click on "Save Photo", and wait for it to download to your computer.

Here's the final file re-sized to 170 pixels wide. Which should be the right size for Canda's Blog.

Test It Out

Load the new image to your blog like you usually do. If it's still not the right size you may need to try again, but that's what learning is about. Once you go through this a few times, you'll be a pro and will shrink an image and get it on your blog in no time.

What Size Do I Need?

This question doesn't have an easy answer. For some shoot-from-the-hip sizes check out the Quick Tips section above.

Often there are other images on your blog that are the right size. If so, you can find out their size and copy them. Here's how to do it in the different browsers. (I apologize, I don't own a Mac so these instructions are Windows-centric.)

Chrome: Right-click on the image, select "Inspect element". In the bottom-right-hand pane find the "Metrics" section. The size of your image will be listed in the box as "Width x Height".
Firefox: Right-click on the image, select "Inspect element". In the bottom-right-hand pane choose the tab for "Layout". The size of your image will be listed in the box as "Width x Height".
Internet Explorer: Right-click on the image, select "Properties". The dimensions are listed in the window that pops up as "Width x Height".

Let me know if these instructions are helpful. I'm still trying to find a good voice and length for these articles. Do you think this one is too long? Or too short? Let me know. What other technical topics would you like to learn about?

* The BlogMouse image was used on Canda's blog. I found it in hundreds of places across the internet. If you own the copyright and want me to take this down just let me know.

Technical Tuesdays?

I'm thinking of starting a thing on my blog called Technical Tuesday. But I'm not sure if I should make it a thing or not, so I'm just going to try it out for a while.

What is Technical Tuesday? I'm glad you asked.

Technical Tuesday is when I answer writing technology questions. Want to add gadgets to your Blogger blog? Learn how the Document Map in Word can quickly jump between chapters? How about creating a theme for your Twitter page? Or even setting up a Facebook author page? That's what Technical Tuesdays are about.

I'm excited to try this because it combines two things I love: technology and writing. I've been programming websites and software for over 12 years, so I understand technology (and the stuff I don't understand I can learn quickly). On top of that, I've worked as a technical writer, but don't worry I'll try to keep things from getting to dry. Lastly, I love to write stories and blogs and my own journal and emails. So, with my feet firmly planted on both sides of the Writer Geek fence, I'm going to bring you Technical Tuesday.

Now's your chance. Leave a comment with your technical question(s) and I'll pick one for next week.

* Just looking at the typewriter photo made my fingers ache. Photographer: mikeymckay.