Howtos‎ > ‎Google‎ > ‎

Embedding a Twitter feed in a Google Sites page

This is a lot of complicated steps. Copied from http://open.rexfuzzle.com/home/twitter-feed-on-google-sites

Prerequisites:
- Make a Twitter account and tweet at least once.
- Make sure your Google Site is publicly visible to anyone on the web.

1. Make a widget in the Twitter interface. You can do this under your personal settings. Get it looking the way you want, then select and copy the code it generates.


2. Copy and paste the following into a file. Then paste the Twitter code you grabbed above in place of the red 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/SAU70Network" data-widget-id="276080729044156416">Tweets by @SAU70Network</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
]]> 
</Content>
</Module>

but the part in red should be YOUR code, from YOUR Twitter widget.

3. Save this file as "twitterfeed.xml" and upload it to your attachements 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. 


4. In the Google Sites page editor, go to Insert -> More Gadgets -> Add Gadget by URL. 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/a/hanovernorwichschools.org/techsupport/twitterfeed.xml?attredirects=0&d=1

Corrected: 
http://sites.google.com/a/hanovernorwichschools.org/techsupport/twitterfeed.xml


5. If you want, you can tweak some of the display settings for the widget, or come back and do that later. Now click the "Add" button, and save changes.

6. In Chrome, reload the page. It will still only display "Tweets from @Username" and not show the actual tweets, that's OK. 

7. Right click on the (broken) widget, and select Inspect Element.



8. 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..."


10. 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. 


11. Save the widget and wait a minute or two, then refresh the Google sites page. Your Tweets should appear now.
Comments