The Elusive Google Site Twitter Feed Found!

I love Google Sites, I really do. I encourage my teachers to use it for their class sites by expounding how great it connects with Google Drive. My pitch falls short when the teacher tries to embed her class Twitter feed and discovers that Sites doesn’t play nice. Never fear, all you have to do is create a custom Twitter gadget for Sites - and it isn’t even hard.

What you need to make your custom Twitter gadget for Sites:

• A simple text editor.  On my Mac I’ll use TextEdit. For Windows you can use Notepad.
• A Google Site with “Attachments” turned on
• A Twitter feed or list that you want to add to your site
• The HTML for your feed gadget

Create Your XML File

Lets start by creating a gadget XML file and open a new document in your simple text editor. You don’t want any formatting, so the simpler the editor, the better. (edit: Since I originally wrote this post it's clear from the comments that some have run into problems with their text editors. The file that you save must be a raw text file and lots of desktop editors don't do this without some fiddling. I recommend using the Chrome App "Text." It's free, it's cross platform, and it works great.) This XML file will be the delivery mechanism for your Twitter gadget. Copy and paste the following code into the new text file:

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Twitter Timeline"/> <Content type="html"> <![CDATA[

//Twitter feed goes here

]]> </Content> </Module>

Then save this file as “twitterFeed.xml.”

Get your Twitter Gadget HTML

Now you are ready for your Twitter feed. Log into Twitter and click on your avatar at the top right of the screen to access the setting menu, then click “Settings.” Once in the Settings window, click the last item in the left sidebar, titled “Widgets.”  Then, click the “Create New” button on the top right.

The “New Widget” screen gives you lots of control over how your gadget will work. Customize your gadget and click “Create Widget.” Then, copy the code on the bottom right. Return to the XML file that you created earlier and replace the text “//Twitter script will go here” with the feed code you got from Twitter. Now save the XML file.

Host Your Gadget

Hosting your new XML file is simple, all you need is a public Google Site. I’d recommend using the site where you are adding the Twitter Gadget. Scroll to the bottom of the Sites page look for the link to “Add files.” If this can’t be found you need to either turn on attachments (Settings > Page Settings) or sign into the Google Site.

Click “Add files” and attach your new XML file. Then, right-click, or command-click, the download icon to the right of the file and select “Copy link address.”

Add Your Gadget to Sites

Edit the page where you want the Twitter feed and click “Insert.” After this, click “More Gadgets.” Finally, click “Add Gadget by URL” and paste in the Twitter gadget XML link. Once you press the “Add” button you’re done: you’ve successfully created a Google Gadget for Twitter!