instructions.md

Hopefully this benefits others with the same problem.

Problem

Displaying your Twitter tweets on your Google Sites website is difficult!
Google Sites filters your HTML code and doesn't allow you to add your own JavaScript code, therefore restricting you from adding any of the many existing Twitter widgets that exist today, including Twitter's very own.

The Google Gadgets directory contains a Twitter gadget called Twit. This is the gadget I was using in the past.
It uses http but Google Sites uses https, therefore this gadget is considered as insecure content and is not displayed by default on certain browsers (e.g. Chrome browser). Instead the user is asked if they want to display insecure content and are recommended not to. Now your visitors will think your site hosts malicious content and they can't easily read your tweets.

Solution

Here is my solution, use your own gadget!
To add a gadget to your Google Site, you need to host it yourself or host it on the Google Gadget Directory.
The latter option is preferred and is explained in these steps.

1. Host your gadget
2. Open Google Gadget Editor (GGE).
3. Using GGE, copy & paste the file twitter.xml (shown below) into the editor.
4. Select File > Save As and name it twitter.xml.
5. Add the gadget to a page on your Google Site
6. Edit a page and click on the spot where you want to add the gadget.
7. Go to Insert > More gadgets... > Add gadget by URL
8. Paste the URL where your gadget is hosted.
   If you used GGE, copy the URL from the filename link in the upper right corner of the editor.
9. Configure your gadget
10. Once your gadget has been added to your page, go to the configuration settings.
11. Click on the gadget in edit mode then click on the cog icon.
12. Customize the gadget
13. Modify the settings to your preferences.
14. Don't forget to use your Twitter username!

Preview

Notes

• Please fork or star this gist!

• You're free to customize this gadget any way you like.
  For example, to change the number of latest tweets shown (default is 12), search for rpp and change the value.

• Thanks to the folks over at this discussion for doing most of the work!
  I basically took their instructions, modified them, and presented them in an easy to read format.

twitter.xml

<?xml version="1.0" encoding="UTF-8"?> 
<Module> 
  <ModulePrefs title="Follow me on Twitter">
    title_url="https://www.twitter.com" 
    width="250" 
    height="400"> 
    <Require feature="setprefs"/> 
    <Require feature="dynamic-height"/> 
    <Require feature="views"/>     
  </ModulePrefs> 
  <UserPref name="type" display_name="Display" datatype="enum" default_value="search" required="true"> 
    <EnumValue value="search" display_value="Search"/> 
    <EnumValue value="user" display_value="User"/> 
  </UserPref> 
  <UserPref name="query" display_name="query" required="true"/> 
  <UserPref name="title" display_name="title" required="false"/> 
  <UserPref name="caption" display_name="caption" required="false"/> 
  <Content type="html" view="configuration" preferred_height="400"> 
    <![CDATA[ 
    <style type="text/css"> 
      .config-options { 
        margin: 10px; 
      } 
      .label { 
        font-weight: bold;
      } 
      .gray { 
        color: #FFFFFF;
      } 
      .invalid-field { 
        background-color: #4ED3FF;
      } 
      html { 
        font-family:arial,sans-serif; 
        font-size:0.81em; 
        font-size-adjust:none; 
        font-style:normal; 
        font-variant:normal; 
        font-weight:normal; 
        line-height:1.5; 
      } 
      A:link, A:visited, A:active { text-decoration: none } 
    </style> 
    <table class="config-options"> 
      <tr> 
        <td align="left" class="label">Display:</td> 
        <td align="left"> 
          <select id="type" onchange="Update()"> 
            <option value="profile">User Profile</option> 
            <option value="search">Search</option> 
          </select> 
          </td> 
        </tr> 
        <tr id="user_detail"> 
          <td align="left" class="label">Username:</td> 
          <td align="left"> 
            <input type="text" id="userid" onkeyup="Update()"/> 
          </td> 
        </tr> 
        <tr id="query_detail"> 
          <td align="left" class="label">Search query:</td> 
          <td align="left"> 
            <input type="text" id="query" onkeyup="Update()"/> 
          </td> 
        </tr> 
        <tr id="title_detail"> 
          <td align="left" class="label">Title:</td> 
          <td align="left"> 
            <input type="text" id="title" onkeyup="Update()"/> 
          </td> 
        </tr> 
        <tr id="caption_detail"> 
          <td align="left" class="label">Caption:</td> 
          <td align="left"> 
            <input type="text" id="caption" onkeyup="Update()"/> 
          </td> 
        </tr> 
      </table> 
    <script type="text/javascript"> 
      var prefs = new gadgets.Prefs(); 

      function Initialize() { 
        var query = prefs.getString('query') || ''; 
        switch (prefs.getString('type')) { 
          default: 
          case 'profile': 
            document.getElementById('user_detail').style.display = ''; 
            document.getElementById('userid').value = query; 
            document.getElementById('query_detail').style.display = 'none'; 
            document.getElementById('title_detail').style.display = 'none'; 
            document.getElementById('caption_detail').style.display = 'none'; 
            document.getElementById('type').value = 'profile'; 
            break; 

          case 'search': 
            document.getElementById('user_detail').style.display = 'none'; 
            document.getElementById('query_detail').style.display = ''; 
            document.getElementById('title_detail').style.display = ''; 
            document.getElementById('caption_detail').style.display = ''; 
            document.getElementById('query').value = query; 
            document.getElementById('title').value = 
                prefs.getString('title') || ''; 
            document.getElementById('caption').value = 
                prefs.getString('caption') || ''; 
            document.getElementById('type').value = 'search'; 
            break; 
        } 
      }; 

      function Update() { 
        var type = document.getElementById('type').value; 

        switch (type) { 
          default: 
          case 'profile': 
            document.getElementById('user_detail').style.display = ''; 
            document.getElementById('query_detail').style.display = 'none'; 
            document.getElementById('title_detail').style.display = 'none'; 
            document.getElementById('caption_detail').style.display = 'none'; 
            prefs.set('query', document.getElementById('userid').value); 
            prefs.set('type', 'profile'); 
            break; 

          case 'search': 
            document.getElementById('user_detail').style.display = 'none'; 
            document.getElementById('query_detail').style.display = ''; 
            document.getElementById('title_detail').style.display = ''; 
            document.getElementById('caption_detail').style.display = ''; 
            prefs.set('title', document.getElementById('title').value); 
            prefs.set('query', document.getElementById('query').value); 
            prefs.set('caption', document.getElementById('caption').value); 
            prefs.set('type', 'search'); 
            break; 
        } 
        gadgets.window.adjustHeight(); 
      }; 

      gadgets.util.registerOnLoadHandler(Initialize); 
    </script> 
    ]]> 
  </Content> 
  <Content type="html" view="home, canvas"> 
    <![CDATA[ 
    <script src="https://widgets.twimg.com/j/2/widget.js"></script> 
    <script> 
    function Initialize() { 
      var dimensions = gadgets.window.getViewportDimensions(); 
      var prefs = new gadgets.Prefs(); 
      var settings = { 
        version: 2, 
        id: 'widget', 
        interval: 6000, 
        width: dimensions['width'], 
        height: dimensions['height'], 
        theme: { 
          shell: { 
            background: '#dadada', 
            color: '#ffffff' 
          }, 
          tweets: { 
            background: '#ffffff', 
            color: '#000000', 
            links: '#0762eb' 
          } 
        }, 
        features: { 
          scrollbar: true, 
          loop: false, 
          live: true, 
          hashtags: true, 
          timestamp: true, 
          fullscreen: gadgets.views.getCurrentView().getName() == 'canvas', 
          behavior: 'all' 
        } 
      }; 

      var query = prefs.getString('query'); 
      switch (prefs.getString('type')) { 
        default: 
        case 'profile': 
          settings['type'] = 'profile'; 
          settings['rpp'] = 12; 
          new TWTR.Widget(settings).render().setUser(query).start(); 
          break; 

        case 'search': 
          settings['type'] = 'search'; 
          settings['search'] = query; 
          settings['title'] = prefs.getString('title') || query; 
          settings['subject'] = prefs.getString('caption') || ''; 
          new TWTR.Widget(settings).render().start(); 
          break; 
      } 
    }; 
    gadgets.util.registerOnLoadHandler(Initialize); 
    </script> 
    <div id="widget" style="width:100%;height:100%"> 
    </div> 
    ]]> 
  </Content> 
</Module>