Add Facebook Comments Box to Google Sites Pages

(If you're looking for how to add Facebook like boxes/buttons to your page, click me.)

Update!  I'm too lazy to elaborate, but here's a link to another, easier and possibly more elegant solution to this.

So this is actually helpful.  It might be the only truly helpful post I ever create (and it's only helpful to some), so don't be expecting much more than this.

Facebook has a nice Comments plugin that, when embedded in your site, allows people to comment on your site and post those comments to their Facebook walls as well.  It is fairly idiot-proof except for the fact that Google Sites throws up all over it when you try and paste it into their html editor because they don't allow JavaScript.  As such, you have to embed the plugin as a "Google gadget".

You can use an already existing gadget called "Code Wrapper" for this, which allows you to embed JavaScript into your Google site.  It is easy to use and works quite well IFF*  you don't care if it plays nicely with Safari and Chrome.  The creator of Code Wrapper says that it works with some versions of Safari and Chrome, but I'm running the latest versions of both and sadly it works with neither. 

(But here's a link to the creator of Code Wrapper if you're interested in going that route, 'cause all you have to do is "insert" a Google gadget on your page, search for and select "Code Wrapper", copy the code that Facebook provides you (link to the Facebook Comments plug-in is at the very bottom of this post) and ~BOOM~ you've got a Facebook comments box that works in Firefox and IE, and if you don't care about Chrome or Safari users it works just fine (Fuck those pansy-ass Apple followers anyway, right?  A real man uses Windows and LIKES it, dammit!).)

But if you're not satisfied with only accommodating half of the major browsers out there, I've found a work around that's fairly easy, though not incredibly elegant because I'm a pretty shitty developer, which is why I'm a software exec (see How to be an Executive for more info on how to weasel yourself into that kinda cushy gig). 

*IFF = "if and only if" for you non-nerds out there...

1. Take the following code and save it to a text file (via a text editor like notepad, etc.).  Note that the URL highlighted in yellow below needs to be replaced with your web page's url.
<?xml version="1.0" encoding="UTF-8" ?>
<Module> 
<ModulePrefs title="__UP_title__" directory_title="Comments"
   scrolling="true"
   height="400"
   width="525"
title_url="__UP_titleurl__"
/>
  <UserPref name="title" display_name="title" datatype="string" required="false" default_value="Comments" />
  <Content type="html">
<![CDATA[ <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;
xfbml=1">
</script>
<fb:comments href="http://www.h3ather.com"
num_posts="4" width="500">
</fb:comments>
  ]]>
  </Content>
  </Module>

2. Save the above text file with the ".xml" extension.

3. 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".)
 
4. 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.


5. Go to the page you want to add the comments widget to and in edit mode, go to the "Insert" menu at the top left of the page and select "More gadgets..." at the bottom of the menu.

6. This will open the "Add a gadget to your page" dialog.  Select "Add gadget by URL".


7.  This will open up a dialog asking you to enter a URL.  Enter the URL for the XML attachment you uploaded (from the Attachments page, you can right click on the attachment and select "copy link location" to get the URL for that attachment - see second picture below)




8. 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 can preview the gadget first if you want.  If there are any issues you should be able to see them in the preview.  Generally it will be a URL issue in your XML file. 



9.  Once you are satisfied with your comments gadget, click "OK".  Once you save your page you should see the comments gadget.  (You have to save your page to see how it looks.)  It should look similar to what is shown below:

10.   For more information on the Facebook comments plugin itself, go to http://developers.facebook.com/docs/reference/plugins/comments/


Comments