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.