Tuesday, April 23, 2013

Google Sites: Embedding Twitter Timeline (updated)

Update about creating/opening .xml file
This xweet markup language (.xml) on Windows based OS can be created or opened using Notepad (built-in) application or Notepad++ (great free coding editor for Windows).
For Macintosh OS users, you can use TextWrangler or Sublimetext or any other programming text editor for Mac OS - as also suggested on the comment below this post.

First of all, I wanna say that Google Sites is awesome.
But, as you know, Google Sites is very strict about using our own JavaScript and CSS (the web styling), either internal thing or external.
Because of that, today I'm gonna show you how to embed your Twitter timeline on your Google Sites.

Additional update for Feb 17, 2015
The Twitter Timeline widget will work on any browser as long as the particular browser doesn't block the resources and/or hiding the iframe (using super add-on like AdBlock, AdBlockPlus, etc).

Step by step.

#1 Create/grab your Twitter timeline widget code:

  • Sign in to your Twitter Account
  • Go to the widget creator on Twitter ▶ Create New (if you already have one, just grab the code)
  • Open your Notepad, paste the code from Twitter to it.

#2 Use this Google Developers Module:

  • Back again to your Notepad, copy and paste this Google Developers Module code wrapper:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="Twitter Timeline"/>
    <Content type="html">
        <![CDATA[
This is where you paste the Twitter widget code
        ]]>
    </Content>
</Module>
Or download the module file here ▶ open with Notepad (or other).

#3 EDIT the text within the xml file:

  • Replace the green text (above) with the Twitter widget codes (HTML and JavaScript) you pasted on the Notepad earlier. Cut the Twitter code on your Notepad, and paste that on the "This is where you paste the Twitter widget code" to replace the sentence.
  • Save again (and rename) the Notepad file in .xml format.
    Example of finished-ready-to-upload xml text. The pasted Twitter codes are the green (HTML element) and blue (JavaScript) text:
    <?xml version="1.0" encoding="UTF-8" ?>
    <Module>
        <ModulePrefs title="Twitter Timeline"/>
        <Content type="html">
            <![CDATA[
    <a class="twitter-timeline" href="https://twitter.com/twitter" data-widget-id="xxxx-this-is-your-ID">Tweets by @You</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>

#4 Go to your Google Sites:

  • Then, sign in to your Google Sites account.
  • Upload the xml file to your Google Sites attachments.
  • Copy the URL location of the attached file (you can right-click the Download, then copy link address - remove the ?attredirects=0&d=1 )
  • You can't put the Twitter widget on Google Sites' sidebar. You can only put it on individual page. So, go to your page where you want your Twitter timeline widget appears on your Google Sites.
  • Edit the page.
  • Then click Insert... More Gadgets ...Add gadget by URL
  • Paste the URL (of the Twitter widget xml) you copied earlier.
  • Set the width and height for the gadget. Then un-check the border/scroll and title option of the gadget.
  • Click OK, and save your page changes. That's it. You have your Twitter timeline shining on your Google Sites.

List of troubleshoots.

Troubleshooting #4

If you've successfully added the Twitter Timeline on your Google Sites, and you can see the timeline after saving it (using the default Google Sites https protocol editor URL), but still can't see the gadget when using your own http protocol-ed domain, or seeing the "invalid" or "The gadget spec URL could not be found" something, use different browser, or use incognito/private window on the same browser to check your newly added gadget.
I experienced that sometimes, if I was still logged in to my Google account. It's the authentication thingy related. Perhaps.

But it's fixed now. I noticed (Feb 7, 2015).

Troubleshooting #3

If you can't see the demo on my site, meaning that something's wrong at Twitter itself - usually because they're updating something. Just wait for a moment, check other sites that using Twitter Timeline widget. If it's fine on other site, then the timeline on your site will automatically appear afterward. If it's not, then see the other troubleshooting below.

Troubleshooting #2
For Error Message:

The gadget you added is not valid

Unsupported feature: org.apache.shindig.common.xml.XmlException: Content is not allowed in prolog. At: (2,1)
SOLUTION

To solve that, you have to set the Google Sites which stores the .xml file to be public. And to make sure it will work on every public site you have, put the file on the same domain to make it work - on one site. Not from different Google Sites' site, to avoid the error message above.

Quoted - a hint by Claudio, you can see the tips comments below this post:


I encountered the same problem but managed to fix it. In my case it had to do with the permissions of the site to which I uploaded to .xml file. I originally uploaded to a "private" site and then linked my URL to the .xml file I had uploaded there and got the error you did. When I uploaded it to a "public" site I had created, then the twitter .xml worked just fine.

For any other error message besides that, you should examine the HTML of your Google Sites' page, probably missing one or two characters.
Basic troubleshooting:
Cancel all the changes on the page ▶ refresh the page ▶ re-add the Twitter Timeline gadget


Troubleshooting #1

If your module is working on Google Sites, but the Twitter Timeline just stays frozen (only displaying your username), you can follow what @phi_remi did to solve it. Read the steps I screen-captured from the Twitter Developer discussion - he didn't use Google Sites attachment for storing the xml module, instead, he used Dropbox - so probably that was the main reason of the not 'white-listed' domain thingy.

That's about it. I hope this is useful.


# Additional technique

To customize the Twitter Timeline display (basic), especially to find out about the Timeline widget parameters, you can read this post I typed.

You can find other tutorials on the internet about creating custom CSS and attaching other JavaScript to do, like, something.


# Reference

Original discussions on Twitter Developer

42 comments:

  1. Thank you very, very much! I thought Google/Twitter's tiff would stop me putting a Twitter feed on a Google Site, but you've proved me wrong. Thanks again :-)

    ReplyDelete
    Replies
    1. Glad it works for you. You're very welcome, Mike! :D

      Delete
    2. Hi
      I have a public personal Google site "Shared with the world!" and have followed the instructions, but still get the message "The gadget you added is not valid

      Unsupported feature: org.apache.shindig.common.xml.XmlException: Content is not allowed in prolog. At: (2,1)" when I try to add the twitter feed to my page. My site is https://sites.google.com/site/keithcarterharris/home

      Delete
    3. Hi Keith, the steps above most of the time, I mean, like, 99% will work. You just need to :
      1. Create yourself a valid XML module (copy-paste the text above).
      2. Replace the content of the module ( within the [CDATA[....]] ) with the HTML and script from Twitter.
      3. Upload the XML to your Google Sites' attachment ► Copy the attachment URL
      4. Add gadget to your page (via more gadgetsadd gadget by URL)
      5. Then set the dimension of the gadget, preview (usually it will work right away), then just save the page.

      Remember, you should (must) upload the XML file on the same site (domain) as your page is on to avoid the unwanted not-white-listed domain thingies.

      You could try to repeat the steps above.

      As you can see on the demo, my Twitter timeline gadget works on my Google Sites (and other people who're successful using the steps above).

      I hope it will work.

      Delete
  2. Thanks for help with adding Twitter timeline widgets. I followed your directions but received the message below when I tried to paste the URL of the Twitter widget that I copied (and removed the portion you specified). Any thoughts on what this means or how to correct it?

    The gadget you added is not valid

    Unsupported feature: org.apache.shindig.common.xml.XmlException: Open quote is expected for attribute "cellpadding" associated with an element type "table". At: (157,61)

    ReplyDelete
    Replies
    1. Hi, don't you worry. I'm pretty sure it's not about the widget (module) above. I think it's about some other element, which is using "table" element, and missing one quote.

      All you gotta do, undo the changes on your Google Sites, refresh your page (or open new window - paste the URL), and re-do the steps above.

      Delete
    2. I just ran into the same problem, but I figured out what the problem was in my case - It may have to do with the permissions on the site you upload the .xml to.

      My situation is that I was trying to embed my Twitter feed into an "apps" site (school site). So, I uploaded my .xml file to my personal site (outside of the apps domain) as recommended (https://sites.google.com/site/amslerclassroom/add-a-twitter-feed). Then when I copied the link to the uploaded .xml file I got the same error you did. I realized that the specific web site I had uploaded it to was not public, but private and with limited users. When I uploaded the .xml file to a site that I had created that was open to the world, and linked to it, then my problem disappeared. Hope this helps-

      Delete
    3. @Claudio : That's a nice hint! Thank you, Claudio. I'll put this tip comment as this post update as well. :D

      Delete
  3. I tried your method, but I get

    The gadget you added is not valid

    Unsupported feature: org.apache.shindig.common.xml.XmlException: Content is not allowed in prolog. At: (2,1)

    Have you seen this error message before?

    ReplyDelete
    Replies
    1. Hi, no I never saw that kind of error. Mainly because I use my own domain for my Google Sites. You can also delete the <?xml version="1.0" encoding="UTF-8" ?> line and just use the lines below that.
      So it will be just :
      <Module>
      <ModulePrefs title="Twitter Timeline"/>
      <Content type="html">
      <![CDATA[
      //Twitter timeline HTML and script
      ]]>
      </Content>
      </Module>

      Hopefully it will help.

      Delete
  4. Thank you so much for this information. I was getting a headache trying to figure out how to do it. Our twitter feed is now working thanks to your information. Again thank you...!

    ReplyDelete
    Replies
    1. Hi wow, that's awesome! You're most welcome, Jerry. :D

      Delete
  5. awesome... worked great in Missouri.

    ReplyDelete
  6. Why would I be getting the error:

    The gadget you added is not valid

    Unsupported feature: org.apache.shindig.common.xml.XmlException: The element type "meta" must be terminated by the matching end-tag " < / meta >". At: (1371,5)

    Thanks for any assistance

    ReplyDelete
    Replies
    1. Hi, I think there's something wrong inside your module. Did you use meta description link on that? You could show me the module you uploaded so I can figure out what's wrong. :)

      Delete
    2. I meant meta description tag.

      Delete
    3. I encountered the same problem but managed to fix it. In my case it had to do with the permissions of the site to which I uploaded to .xml file. I originally uploaded to a "private" site and then linked my URL to the .xml file I had uploaded there and got the error you did. When I uploaded it to a "public" site I had created, then the twitter .xml worked just fine. Hope that helps.

      Delete
  7. Thank you.... that was bugging me for quite some time. Works perfectly!

    ReplyDelete
  8. Thanks so much for a great tutorial. It works!.! Mac users need to download TextWrangler for Mac (notepad is for PC users) for the .xml file.

    Go to: https://itunes.apple.com/us/app/textwrangler/id404010395?mt=12

    This was a suggestion from @TonyAmsler.

    ReplyDelete
    Replies
    1. That's great. You're welcome! And thanks for the suggestion for Mac users. :D
      I'll include it too on the post.

      Delete
  9. Thank you so much for sharing your knowledge. I've been working on this issue for awhile and just gave up and linked the account. But now on the day that I'm meeting with our Marketing Manager, I get to show her this. So appreciated.

    ReplyDelete
    Replies
    1. Hi Rachel, that's a fantastic news! :)
      You're very welcome.

      Delete
  10. Thank you so much! That worked like a dream!

    ReplyDelete
    Replies
    1. That's awesome Thomas. Glad it works for you. You're very welcome!

      Delete
  11. Not sure what's going on- when trying to make the Widget from URL, I keep getting the error:

    The gadget you added is not valid. Unsupported feature: At least 1 ModulePrefs is required.

    I'm on Mac OSX, using Firefox 21. Any suggestions are appreciated. Thanks for everything!

    ReplyDelete
    Replies
    1. Hi, thanks for stopping by.
      I also have NO CLUES of what's going on there.
      You can try repeating the steps I wrote above on the post, exactly what I wrote. It will work.

      So, the main idea :
      ► We make an XML file, which consists of Google gadget wrapper. Inside it, there's the Twitter Timeline JavaScript and HTML element.
      ► Upload that file to our Google Sites attachment (the same site where we want to show the timeline)
      ► Copy the URL of that XML attachment file.
      ► Go to your Google Sites page where the Twitter Timeline will be shown
      ► Add new gadget by URL - paste the XML attachment file URL - define the gadget size, and other settings.
      ► Save the changes. Refresh the page. That's it.

      Usually the error comes from:
      1. The pasted code from this post or from Twitter. Missing one or two characters. You can check them first. Then reupload the file.
      2. The XML file is hosted on different domain. This won't work, we have to put the XML file on the same site where we'll show the timeline.

      I hope it will help. :)

      Delete
  12. Thanks for the help, works great

    ReplyDelete
  13. I'm using dark style for the widget but the corners have some white pixels. How can I modify the color to be the same as my page background?

    ReplyDelete
    Replies
    1. You can include the [data-chrome="transparent noborders"] parameter in your widget anchor element. I have a post about that, right there.

      Delete
  14. The gadget you added is not valid

    Unsupported feature: At least 1 ModulePrefs is required.

    please help me

    ReplyDelete
    Replies
    1. Hi.
      Maybe it's because the "late" delivery of the gadget resource(s).
      Google Sites is free, so, we should be more patient to add anything to it.

      My suggestion is to undo your page update. Save it. Close the tab and open again your Google Sites then re-do the exact steps on this post.

      The demo on this tutorial works, therefore, big chance yours will also work. Just do it calmly.
      :)

      Delete
  15. I would love to use your directions on my website that helps teachers embed the Twitter feed on their teacher webpage. Would you mind if I change it a tiny bit and credit you?

    ReplyDelete
  16. Hey! I'm trying to create something like this but with multiple tabs for tracking hashtags/tags of different social medias (twitter, facebook, tumblr...)
    This code looks pretty simple with a clean lay out that I need. Is there a way I could make two more tabs for Twitter, Facebook and Tumblr?

    ReplyDelete
    Replies
    1. Hi, thanks for visiting. Of course there are several ways to add those as one widget. One way I can think of is to get all the JavaScript embed API from each social media, and tinker the way how each embedded iframe will be appeared. Since I'm not really into social media or stuff, you probably could learn it from other tinkerer. :)

      As a reminder, because you'll be "pulling" a lot of external resources, your page load will significantly be slower.

      Delete

Tell me what you think...