Google Sites: Embedding Twitter Timeline (updated)

Update about creating/opening .xml file
This xweet markup language (.xml) on Windows based OS can be created or opened using Notepad (built-in) application or Notepad++ (great free coding editor for Windows).
For Macintosh OS users, you can use TextWrangler or Sublimetext or any other programming text editor for Mac OS - as also suggested on the comment below this post.

First of all, I wanna say that Google Sites is awesome.
But, as you know, Google Sites is very strict about using our own JavaScript and CSS (the web styling), either internal thing or external.
Because of that, today I'm gonna show you how to embed your Twitter timeline on your Google Sites.

Additional update for Feb 17, 2015
The Twitter Timeline widget will work on any browser as long as the particular browser doesn't block the resources and/or hiding the iframe (using super add-on like AdBlock, AdBlockPlus, etc).

---

Step by step.

#1 Create/grab your Twitter timeline widget code:

• Sign in to your Twitter Account
• Go to the widget creator on Twitter ▶ Create New (if you already have one, just grab the code)
• Open your Notepad, paste the code from Twitter to it.

---

#2 Use this Google Developers Module:

• Back again to your Notepad, copy and paste this Google Developers Module code wrapper:

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

This is where you paste the Twitter widget code

        ]]>
    </Content>
</Module>

Or download the module file here ▶ open with Notepad (or other).

---

#3 EDIT the text within the xml file:

• Replace the green text (above) with the Twitter widget codes (HTML and JavaScript) you pasted on the Notepad earlier. Cut the Twitter code on your Notepad, and paste that on the "This is where you paste the Twitter widget code" to replace the sentence.
• Save again (and rename) the Notepad file in .xml format.
  Example of finished-ready-to-upload xml text. The pasted Twitter codes are the green (HTML element) and blue (JavaScript) text:

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

  <a class="twitter-timeline" href="https://twitter.com/twitter" data-widget-id="xxxx-this-is-your-ID">Tweets by @You</a>
  
  <script>
      !function (d,s,id) {
          var js, fjs = d.getElementsByTagName(s)[0],
               p = /^http:/.test(d.location)?'http':'https';
          if (!d.getElementById(id)) {
              js = d.createElement(s);
              js.id = id;
              js.src = p+"://platform.twitter.com/widgets.js";
              fjs.parentNode.insertBefore(js,fjs);
          }
      } (document,"script","twitter-wjs");
  </script>

          ]]>
      </Content>
  </Module>

---

#4 Go to your Google Sites:

• Then, sign in to your Google Sites account.
• Upload the xml file to your Google Sites attachments.
• Copy the URL location of the attached file (you can right-click the Download, then copy link address - remove the ?attredirects=0&d=1 )
• You can't put the Twitter widget on Google Sites' sidebar. You can only put it on individual page. So, go to your page where you want your Twitter timeline widget appears on your Google Sites.
• Edit the page.
• Then click Insert ▶ ... More Gadgets ... ▶ Add gadget by URL
• Paste the URL (of the Twitter widget xml) you copied earlier.
• Set the width and height for the gadget. Then un-check the border/scroll and title option of the gadget.
• Click OK, and save your page changes. That's it. You have your Twitter timeline shining on your Google Sites.

{ DEMO }

---

List of troubleshoots.

Troubleshooting #4

If you've successfully added the Twitter Timeline on your Google Sites, and you can see the timeline after saving it (using the default Google Sites https protocol editor URL), but still can't see the gadget when using your own http protocol-ed domain, or seeing the "invalid" or "The gadget spec URL could not be found" something, use different browser, or use incognito/private window on the same browser to check your newly added gadget.
I experienced that sometimes, if I was still logged in to my Google account. It's the authentication thingy related. Perhaps.

But it's fixed now. I noticed (Feb 7, 2015).

---

Troubleshooting #3

If you can't see the demo on my site, meaning that something's wrong at Twitter itself - usually because they're updating something. Just wait for a moment, check other sites that using Twitter Timeline widget. If it's fine on other site, then the timeline on your site will automatically appear afterward. If it's not, then see the other troubleshooting below.

---

Troubleshooting #2
For Error Message:

The gadget you added is not valid

Unsupported feature: org.apache.shindig.common.xml.XmlException: Content is not allowed in prolog. At: (2,1)

SOLUTION

---

To solve that, you have to set the Google Sites which stores the .xml file to be public. And to make sure it will work on every public site you have, put the file on the same domain to make it work - on one site. Not from different Google Sites' site, to avoid the error message above.

Quoted - a hint by Claudio, you can see the tips comments below this post:

---

I encountered the same problem but managed to fix it. In my case it had to do with the permissions of the site to which I uploaded to .xml file. I originally uploaded to a "private" site and then linked my URL to the .xml file I had uploaded there and got the error you did. When I uploaded it to a "public" site I had created, then the twitter .xml worked just fine.

---

For any other error message besides that, you should examine the HTML of your Google Sites' page, probably missing one or two characters.
Basic troubleshooting:
Cancel all the changes on the page ▶ refresh the page ▶ re-add the Twitter Timeline gadget

---

Troubleshooting #1

If your module is working on Google Sites, but the Twitter Timeline just stays frozen (only displaying your username), you can follow what @phi_remi did to solve it. Read the steps I screen-captured from the Twitter Developer discussion - he didn't use Google Sites attachment for storing the xml module, instead, he used Dropbox - so probably that was the main reason of the not 'white-listed' domain thingy.

That's about it. I hope this is useful.

---

# Additional technique

To customize the Twitter Timeline display (basic), especially to find out about the Timeline widget parameters, you can read this post I typed.

You can find other tutorials on the internet about creating custom CSS and attaching other JavaScript to do, like, something.

---

# Reference

Original discussions on Twitter Developer