Embedding almost anything like a Twitter Search widget in new Google Sites with Google Apps Script

Update: Brad Dale has kindly created this walkthrough video to help you with the setup

Previously I had fun making a Google Calendar widget for the new version of Google Sites. A comment that as a result of that post came from Andy Cooper asked how to get a Twitter feed into Google Sites. Thanks to Google Apps Script this can actually be accomplished in a couple of lines of code. Apps Script has a HTML Service which lets you create and serve HTML content. This means you can copy any embed code you get from a third party site like Twitter, publish it with Google Apps Script and then embed this in your new Google Site.

If you have some content you’d like to embed into a new Google Site that isn’t accepted by the ‘Embed URL’ feature in Sites you can try following these steps:

  1. Goto https://script.google.com and start a new script project
  2. In the Script Editor add the following code:
    function doGet() {
      return HtmlService.createHtmlOutputFromFile('Index')
                        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
    }
    You can replace the existing function in the Script Editor. The doGet() function is required to tell the script how to serve the page
  3. To add an HTML file to your Apps Script project, click File > New > Html file and enter the name ‘Index’ – this name must match the one given in the doGet() function
  4. In the Index.html file paste the embed code between the tags. For example, to embed a Twitter search widget your code would look like this:
  5. From the Script Editor click File > Rename and give your project a name before clicking File > Save all
  6. To allow us to embed in Google Sites you need to deploy your script as a web app by selecting Publish > Deploy as web app
  7. In the dialog provide a project version name and select who has access to the app (for anyone to view select ‘Anyone, even anonymously’)
    Publish - Deploy as web app
  8. When you click ‘Deploy’ you will be given a ‘Current web app URL’ which will be like https://script.google.com/macros/s/RANDOM_ID_HERE/exec
  9. Open your Google Site and on the page you want to include your embedded object select Insert > Embed URL and paste the ‘Current web app URL’ and then click ADD.

Here is an example page with a Twitter search widget and the source Google Apps Script code.

Important: If you change the code in the Index.html file you need to repeat steps 6 and 7 for the changes to take effect.

This solution is not limited to Twitter and suitable for other services that require their own Javascript files.

8 Comments


  1. I continue to get a “Script function not found: doGet”. Where did I go wrong? Thank you so much!

    Reply

  2. Martin, I’m getting the same error as Jenny. Also, I try to create a twitter widget but it does not look the same as in Brad’s video and I’m not getting the same lines of code that you are in step 4. Any suggestions?

    Reply

      1. same error message.
        copied exactly how you have it in your link shared above…

        Reply

  3. Hi Martin, I got it to work! Thanks for responding so quickly.

    Reply

  4. Hi Martin, I would like to translate your post to spanish and publish in my blog, obviously I’ll put the links to the source (this post) and a link to your profile or whatever you want. My blog is about Google G Suite with tutorials for educators, rnlagos.com.
    Thank’s in advance

    Reply

    1. Hi Rafael, yes please feel free to do that. All content on my blog is published with a Creative Commons Attribution licence which permits reuse. Glad you think this post is useful.

      Best wishes
      Martin

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *