Add a Twitter Feed widget to Google Sites pages

OK - not sure if this is incredibly hard to figure out, but since there is at least one step that is not all that intuitive to the layman I figure'd I'd do a post about this. It seems that only my truly helpful hints get any search engine action (go figure?). But you should check out the rest of my site anyways since you're here (unless you are easily offended in which case, Move along.... there's nothing to see here....)

If you don't know what the Twitter Feed widget is, it looks like this:

If you've read my Add Facebook Comments Box to Google Sites Pages post then you're pretty much most of the way there.

Short version: as I've mentioned before, Google Sites throws up all over JavaScript so you have to use Google Gadgets to properly present JavaScript doohickeys (yes that's the technical term - Use it. Share it. Be it) so you have to create a custom Gadget that is really just an XML document where you paste the script that Twitter provides you.

Got it?

If the short version doesn't help you, here's the long version;

1. Go to The Twitter Profile Widget resource page which looks like the page below.

2. Futz around with your Preferences, Appearances and Dimensions. It's actually pretty nice in that it lets you change the colors of your widget whereas Facebook does not. (Uninteresting fact: Mark Zuckerburg is red/green colorblind which is why Facebook is that boring blue color. Apparently since he can't see pretty pretty colors, nobody else fucking should either.)

3. Once you're finished dicking around with your settings, click the "Test Settings" button to see if it looks like you expect it to look (or not if you want to be surprised or just don't give a shit) and then click the "Finish & Grab Code" button. The code will then appear (oooooooooooooo MAGIC!) as shown below.....

4. Copy that code and paste it in a text document with the following other code where the stuff highlighted in yellow is the script (code) that you just copied and pasted from Twitter.

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs

scrolling="true"

height="385"

width="250"

/>

<Content type="html">

<![CDATA[

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

version: 2,

type: 'profile',

rpp: 4,

interval: 6000,

width: 'auto',

height: 300,

theme: {

shell: {

background: '#aacceb',

color: '#ffffff'

},

tweets: {

background: '#000000',

color: '#ffffff',

links: '#1398f0'

}

},

features: {

scrollbar: true,

loop: false,

live: true,

hashtags: true,

timestamp: true,

avatars: true,

behavior: 'all'

}

}).render().setUser('h3atherz').start();

</script>

]]>

</Content>

</Module>

5. 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).

6. 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".)

7. 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.

8. 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.

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

10. 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)

11. 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 Twitterfeed widget, click "OK". Once you save your page you should see the widget. (You have to save your page to see how it looks.)