Saturday, June 23, 2012

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.

No comments:

Creative Commons LicenseUnless otherwise noted, all posts on the John Waverly blog by John Waverly are licensed under a Creative Commons Attribution 3.0 Unported License.
* Background image based on Night Sky theme by Ray Creations