<== 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.)
So I've you read my old post, you'll figure out that facebook has changed up some shiz regarding their like button and my old method doesn't work anymore. I've figured out how to make it work and it's a bit more involved since Google Sites still throws up all over JavaScript.
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:
 - 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.
- Then you select the layout style, which I'll show examples of below.
- Then you select the width (just keep the default - but you can play around with it if you like)
- Then you select whether you want to show the faces of the peeps who have "liked" the page.
- Then you select your color scheme: light (white) or dark (black)
- 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?)
- OK, so where was I? Oh yeah.. so then you clickity click on the "get code" button and this is where the old version shits the bed because there is no iframe version anymore. You now have a choice between an html5 option or an xfbml option. You can use either, but I'd go with the html5 version.
;)
- So then you need to create a text document and copy and paste the stuff above into it as shown below. Note that the stuff in the box from 1 above should be pasted in lieu of the yellow text below and the stuff in the box from 2 above should be pasted in lieu of the blue text below. (If you're using XFBML, it would be from boxes 1 and 3. Ignore the stuff in box 2 earlier versions of IE don't need to be supported because the people who use IE are losers.)
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
scrolling="true"
height="385"
width="250"
/>
<Content type="html">
<![CDATA[
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=229505320420436";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.h3ather.com" data-send="true" data-width="450" data-show-faces="true"></div>
]]>
</Content> </Module>
- Save this document as an XML file (see picture below - I think
some people had issue with knowing what I meant by this in the Facebook
Comments post, but it just means adding an ".XML" to your file name (in lieu of txt or any other extension); also make sure you are saving in plain text and NOT rich text or any other document format - if you are using a code editor, even better).
- Upload the file to your site (If you are editing a page, go to "More
Actions" on the top right-hand side of the page and select "Manage
Site".)
- From the "Manage Site" page select "Attachments" on the
left-hand side of the page and then upload your xml file that you
created as an attachment to your site.
- Go to the page you want to add the comments widget t
o and in ed
it
mode, go to the "Insert" menu at the top left of the page and select
"More gadgets..." at the bottom of the menu.
- This will open the "Add a gadget to your page" dialog. Select "Add gadget by URL".
- This will open up a dialog asking you to enter a URL. Enter the
URL for the XML attachment* you uploaded. Delete the http:// and just paste the copied link. If the "add" button doesn't enable, try pressing <return>.
*To get the URL from your uploaded XML doc, from the Attachments page, you
can right click on the "download" link for the attachment and select "copy link location" to get
the URL for that attachment - see second picture below)
- Once you've added the URL for your XML file, the "Set up your
gadget" dialog will appear. You can change the display information and
the title, but the widget and height should be optimized already. You're probably going to want to uncheck the box to include a border because it makes it ugly. You can preview your gadget to make sure it looks good, but otherwise you should be done here.
- Once you are satisfied with your like button, click "OK".
Once you save your page you should see it. (You have to save
your page to see how it looks.)
* * *
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 pretty much the but slightly different. For that you have to go here: http://developers.facebook.com/docs/reference/plugins/like-box/ and then follow the same instructions up in the top section.
This is what the facebook like box looks like:
|
|
