ARBITRARY ARTICLES‎ > ‎All items‎ > ‎

8 easy steps to add your Twitter feed to Google Sites

posted 14 Nov 2014, 13:14 by Markus Helander   [ updated 5 Jun 2015, 12:14 ]
Hi,

Considering the lack of sensible features Google Sites seem to have, this is really a simple thing to do. While you will have difficulties using your own CSS and Javascript here, there a just a few steps you have to do to make your feed visible.

  1. Create yourself a widget from https://twitter.com/settings/widgets. Does not really matter how you do it, you can change it later. You just need the widget code.

  2. Copy & paste you widget code to a blank document. Mine is below:

    <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/markusfromfi" data-widget-id="533352607033483264">Tweets by @markusfromfi</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>

  3. From Google Developers Module, add some script above and below the widget code.

    Above the script:

    <?xml version="1.0" encoding="UTF-8" ?>
    <Module>
    <ModulePrefs title="Twitter Timeline"/>
    <Content type="html">
    <![CDATA[


    Below the script:

    ]]>
    </Content>
    </Module>

  4. The end result should be a traffic light.. haha:

    <?xml version="1.0" encoding="UTF-8" ?> 
    <Module> 
    <ModulePrefs title="Twitter Timeline"/>
    <Content type="html">
    <![CDATA[ 

    <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/markusfromfi" data-widget-id="533352607033483264">Tweets by @markusfromfi</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>

  5. Save your finished file as an .xml file and upload it to your Google Sites Attachments folder. The filename does not matter - as long as it is .xml. I made it twitter.xml.

  6. Add a new gadget to where you want to have the feed on your site. Go to Insert -> More gadgets -> Add gadget by URL.

  7. Copy the .xml file url from the folder, omit the end ?attredirects=0&d=1 and paste it to the Add gadget by URL line.

  8. Adjust the settings to your liking and you're done. Again; the settings can be changed later.
You're welcome!