Twitter Gadget for Google Sites

instructions.md

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. That means you can't add the many existing Twitter widgets that exist today, including Twitter's very own.

There's a Twitter gadget in the Google Gadget directory called "Twit". I was previously using it, but because it uses http instead of https and Google Sites uses https, the latest version of Chrome would consider it as insecure content and not display it by default, instead asking the user if they want to display insecure content while recommending them not to. That's great if you want your visitors to think your site hosts malicious content and you don't want them reading your tweets.

So this was my solution, and hopefully it benefits others with the same problem:

1. I haven't added this gadget to the Google Gadget Directory, so either host it yourself or (preferably) host it using the Google Gadget Editor (GGE).

• Using GGE, copy & paste the file twitter.xml (shown below) into the editor. Select File > Save As and name it twitter.xml.

2. Add the gadget to a page on your Google Site.
3. Edit a page and click on the spot where you want to add the gadget
4. Go to Insert > More gadgets... > Add gadget by URL
5. 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.
6. Once it's added, go to the configuration settings (click on the gadget in edit mode then click on the cog icon).
7. Modify the settings to your preferences, and don't forget to add your Twitter handle!

Notes:

• You can fork and customize the gadget if you like. For example, by default it shows your 12 latest tweets. If you want to change that number, search for 'rpp' and change the value.
• Thanks to the folks over at this discussion for doing most of the work!

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: '#4ED3FF', 
            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>