By @mhawksey

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

Martin Hawksey

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. Go to 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.

  1. 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
  2. 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:
  3. From the Script Editor click File > Rename and give your project a name before clicking File > Save all
  4. 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
  5. In the dialog provide a project version name and select who has access to the app (for anyone to view select ‘Anyone, even anonymously’)
  6. 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
  7. 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.

Exit mobile version