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.