<== If you're wondering how to add one of these, ask me in the comments section and maybe I'll do a post about that later...

(If you're looking for how to add a Facebook comments widget to your Google Sites page, click me.)

Got a couple of hits on my blog with people searching for how to add the Facebook "Like" button/widget/box to a Google Sites page.  This is actually really simple, but I figure I'll throw people a bone 'cause I'm a giver that way....

Alrighty, so first you go here: http://developers.facebook.com/docs/reference/plugins/like/ and there are fairly clear instructions there, but if they are unclear to you, perhaps you shouldn't be fucking around with Google Sites and perhaps you should be looking for another job/hobby.  (ha ha... JUST KIDDING! sorta...).

OK, so the page I linked to above looks like this:

1. Enter the URL for the page you want people to "like" in the first field (so for this particular page that you are viewing RIGHT THIS MINUTE that would be http://www.h3ather.com/adding-facebook-like-box-to-google-sites), then if you want to also add the "send" button which allows people to send this link to someone as a Facebook message you check that box.
2. Then you select the layout style, which I'll show examples of below.
3. Then you select the width (just keep the default - but you can play around with it if you like)
4. Then you select whether you want to show the faces of the peeps who have "liked" the page.
5. Then you select your color scheme: light (white) or dark (black)
6. Then you select the font.  I always leave this blank and use the default - dunno what it is but it looks like arial or some sort of sans serif (and if you have no idea with sans serif means - "serifs" are those little lines that are sometimes on the ends of letters, like if you use Times New Roman, there are serifs on a lot of letters.  And "sans" means "without", so sans serif means without serifs, so you may notice that the Microsoft Sans Serif font doesn't have those lines on its letters - SEE you learn something new every day!  Unless you already knew that, in which case you didn't really learn anything so you probably should have skipped over this digression...I loathe serifed fonts btw.  So there you DID learn something in case anyone ever asks you what types of fonts I dislike.  It could happen, right?  Maybe on one of those game shows or something?)
7. OK, so where was I?   Oh yeah.. so then you clickity click on the "get code" button and you need to copy the iframe code (NOT the XFBML code, which is JavaScript, which Google Sites throws up all over).
   
   
   
8. Then you click the html editor icon on the top of your Google Sites page and the html editor will open up.
   
   
   
9. Then you paste the copied code into the html editor wherever you want the button to go.  (So if you want it at the top of the  page, copy it before your text and if you want it at the bottom of your page, copy it after your text.)  And click the "Update" button.  When the html editor closes, there will be a box that says "Google Gadget" on it where you pasted the like button code and you won't be able to see what it looks like until you save the page.  Also note that if you go BACK to edit the html, the code will look very different, but if you should be able to figure out where it is (generally it will start with "<img src"  and end with height="xx">" where "xx" is the height) in case you want to remove it (or edit it if you know what you're doing, though clearly if you are reading this and trusting me to tell you what to do you have no idea what you're doing so I'd advise against editing the code).  You can also remove it as you would a regular Google Gadget by clicking on the gadget and selecting "remove".
   
   
   

This is the exciting box_count style. This is the exciting standard style with the light scheme AND with the faces of peeps who like this page, but if none of your friends like this page you won't see anyone.  To see what this looks like, either "like" this page yourself or friend me (http://www.facebook.com/H3athersHelpfulHints).  You can unfriend me soon thereafter.  I won't take offense.
This is the exciting button_count with the light scheme.
This is the exciting standard style with the dark scheme.
But now you might be asking...

But how do I add a "like" button so that people can "like" my Facebook page (rather than my Google Sites page)?

OK, so that's just as easy, but slightly different.  For that you have to go here: http://developers.facebook.com/docs/reference/plugins/like-box/ and again there are fairly clear instructions, but... here's some more detail if you're still clueless...

1. Enter the URL for the Facebook page you want people to like (so for me, I have a "He3ather's Helpful Hints" Facebook page and the URL is http://www.facebook.com/H3atherS which you can find by going to your Facebook page and looking at the URL in the URL box.
   
2. Use the default width
3. Select the color scheme (again, light=white and dark=black)
4. The "Show Faces" check box is if you want to show pictures of the people who like your page or not.
5. The "Show Stream" check box is if you want to show the latest posts from your page's wall or not.
6. The "Show header" check box has a nice littler "find us on Facebook" header if you select this, but if that header hurts your sensibilities you can deselect the check box. (note that as you are selecting/deselecting your settings, Facebook shows you a little sample of how your widget is going to look on the right-hand side of the page. FANCY I KNOW! What will those assholes geniuses at Facebook come up next??)
   
7. Once you've selected all your settings, click the "Get Code" button and copy the iframe code (NOT the XFBML code).  then follow steps 8 and 9 above.  (Yes I am too lazy to type that shit out again, so just deal).
   

And this is what the box looks like with the header and the stream (light version).  For whatever reason the faces never show up whether you select that option or not.  You can actually add a separate widget to show them (called the "Facepile" plugin which you can see on the left of the Facebook developers page above), but I'm way too lazy to explain it and you should be able to figure it out after reading this post, unless you are a completed idgit, in which case you're SOL  (seriously if someone asks I'll walk you through it, but hopefully you should be able to figure it out).

---