Admin notes‎ > ‎

Twitter Gadget creation notes

posted Sep 25, 2012, 1:15 AM by Daniel Lavoie
Recipe taken from http://www.h3ather.com/add-twitter-feed-widget-to-google-sites-pages
 Phi Remi · Performer at Carnival EpsilonThey recently updated the widgets, so now the code generated is now something like <a class="stuff"><script>! function *more stuff*</script>.

So, here's what I did:
----------copy everything below this line------------
<Module> 
<ModulePrefs title="Twitter"/>
<Content type="html">
<![CDATA[
Replace this entire line with the code generated from the twitter widgets page.
]]> 
</Content>
</Module>
----------copy everything above this line---------------

Save that file as an xml (filename.xml).
Upload to the public folder in DropBox and copy the public link.
You can also upload the xml to your google sites account, and copy the download location (remove the? redirect junk after the xml when pasting though). AND replace "https://" with "http://" after pasting the Link.

In the google sites page editor go to. 
Insert -> More Gadgets -> Add Gadget by URL.
Paste in the link from DropBox or your google upload and save the gadget. Also, save the google sites page.

In Chrome, reload the page (it will still only display Tweets from @Username).
Right click the page, and select Inspect Element.
Make sure Elements is the selected Tab in the window.
Click on the little red x or yellow triangle in the bottom right corner.
One of the error messages will say something along the lines of.
'randomnumbersandletters-a-sites-opensocial.googleusercontent.com' is not whitelisted on this domain.

Copy that address, and paste it into the Domains section of the widget editor on Twitter.
Save the widget, and refresh the Google sites page.

I made the mistake of just listing sites.google.com in the domains section!
Hopefully this will help some of you getting the same error!

Note the (4) Domains listed!






The Code produced is:
<a class="twitter-timeline"  href="https://twitter.com/LavoieDan" data-widget-id="249048191134208001">Tweets by @LavoieDan</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>


NOTE: It is possible to go back to that TWITTER page and make changes to the Widget by clicking Edit



To obtain the Inspect element string... Right click on the Gadget that looks like a blank Gadget from the Website page and Inspect Element. (Note that the Gadget will be blank when you do this, since it is not working without that 4th Domain added to the Widget Creation parameters)



The XML file needed is: (Yellow Stuff Taken from Twitter Widget "Creator")
 <Module>
<ModulePrefs title="Twitter"/>
<Content type="html">
<![CDATA[
<a class="twitter-timeline"  href="https://twitter.com/LavoieDan" data-widget-id="249048191134208001">Tweets by @LavoieDan</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>

Upload (Manage Site, Attachments, Upload) the XML file to: sites.google.com/site/lavoiedan/ 

Public Access to the Site was enabled when I did this.


Editor's NOTE: The above has all the necessary content but should be cleaned up... Now it is only a matter of deciding where I will put that new Gadget on my Site versus the News Blog and External Blog Page...(!)
Comments