Embedding a Twitter feed in a Google Sites page
I was researching how to get our Twitter feeds back onto your Google Sites after the Twitter Widget
stopped working without notice. I have researched on multiple forums and here is a compilation of
what I found works.
** NOTE: This solution works for BOTH private and education accounts. **
1. Make a Twitter account and tweet a few times so you have something to test.
2. Make sure your Google Site is shared “publicly visible to anyone on the web”
3. Log into your Twitter account, select the gear in upper right corner, select Settings.
4. You are going to make a widget in the Twitter interface by selecting Widget in the list
on the left, then click Create New in upper right hand side of screen.
5. Setup the Twitter Widget - select the User Timeline option. You can change the view
by altering the Height, Theme and Link Color - once you click Create Widget to save
your settings, the code generated has all these customized settings in it.
Note: if you change any settings, you need to click Save Changes and new
code will be generated.
6. The following Twitter Widget code is generated once you get it looking the way you
want, then select and copy the code it generates.
7. Copy and paste the following code BELOW into a text file. Then paste the Twitter code you grabbed
above in place of the blue line:
<Module>
<ModulePrefs title="Twitter"/>
<Content type="html">
<![CDATA[
Replace this entire line with the code generated from the twitter widgets page.
]]>
</Content>
</Module>
I.e., you should end up with something like:
<Module>
<ModulePrefs title="Twitter"/>
<Content type="html">
<![CDATA[
<a class="twitter-timeline" href="https://twitter.com/NHGAFEUG" data-widget-id="426820793830367232">Tweets by @NHGAFEUG</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>
but the part in blue should be YOUR code, from YOUR Twitter widget.
8. Save this file as "twitterfeed.xml" and upload it to your attachments section of your Google site
(Manage Site -> Attachments -> Upload.) Then, right-click on the "download" link it creates, and
copy that link location to the clipboard.
9. Go to the page you wish to add the Twitter Feed to and enter Edit mode (click pencil).
a) Click Insert / More Gadgets / Add Gadget by URL.
b) Paste the link from your attachments page into the box, and correct it by
removing everything after the .xml part and removing the "s" from the
"https://" (the parts in red here):
Original:
https://sites.google.com/site/nhgafeug/twitterfeed.xml?attredirects=0&d=1
Fixed Code:
http://sites.google.com/site/nhgafeug/twitterfeed.xml
10. Click the Add button, then you have the option to change some of the settings, then
save changes.
11. Save the changes you just made to your Google Page and view Page.
Note: Sometimes the Chrome browser will not display the Tweets properly.
The steps to resolve this are listed on the next page. I have not run into the problem so copied information from a page here to share with you.
Chrome browser:
In Chrome, reload the page. It will still only display "Tweets from @Username"
and not show the actual tweets, that's OK.
a) Right click on the (broken) widget, and select Inspect Element.
b) Make sure that Elements is the selected tab. Click on the little red x and
yellow triangle in the bottom right corner of the inspector. You should see an error message along the lines of: "randomnumbersandletters-a-sites-opensocial.googleusercontent.com is not whitelisted on this domain…" 
c) Select and copy that entire address
("randomnumbersandletters-a-sites-opensocial.googleusercontent.com"), and
paste it into the Domains section in the widget editor on Twitter. 
d) Save the widget and wait a minute or two, then refresh the Google sites
page. Your Tweets should appear now. |
