Skip to content

Instantly share code, notes, and snippets.

@techforlearning

techforlearning/instructions.md

Forked from dideler/twitter-gadget-instructions.md
Created October 27, 2012 11:43
Show Gist options
  • Save techforlearning/3964374 to your computer and use it in GitHub Desktop.
Save techforlearning/3964374 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter Gadget for Google Sites
Raw
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.
  1. Add the gadget to a page on your Google Site.
  2. Edit a page and click on the spot where you want to add the gadget
  3. Go to Insert > More gadgets... > Add gadget by URL
  4. 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.
  5. Once it's added, go to the configuration settings (click on the gadget in edit mode then click on the cog icon).
  6. 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!
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment