Miscellaneous‎ > ‎Helpful Hints‎ > ‎

Embedding a Twitter feed in a Google Site

posted Jul 30, 2014, 2:39 PM by James Wu   [ updated Jul 30, 2014, 11:21 PM ]
The problem...

▪  I can't just insert the Twitter widget code into a Google site or their html box gadget, because some of the necessary snippets are prohibited.

▪  Putting the aforementioned code into an iframe gadget avoids this problem and runs the code, but upon saving, it just shows up as a blank box.

▪  Google does have its own Twitter gadget for Google sites, but it also shows up blank.

▪  Saving the Twitter widget code as an html file and attaching it to the Google site or uploading it to any file storage site - and then linking to it - is a great idea. However, without a few unmentioned extra steps, Google will simply hand out the file for download whenever a direct link to it is established, rather than run the actual code. The obvious solution is of course to host the file externally... but I'm not paying just for that when I already have Google sites. Duh.

The solution!

▪  Due to all the tutorials that I managed to find omitting those few extra steps, it took me a very long time to figure out the solution. But basically the trick is that it's still possible to use Google Drive as an actual web host, just that the way to do it isn't very obvious. While many other workarounds to embed Twitter feeds no longer work, this one still does. That is, until the Twitter feed on my home page stops working.

1. Get Google Drive. It shouldn't matter if it's on the same account as the Google site.

2. Go to your Twitter settings page, hit the "Widgets" tab, and generate your Twitter feed embed code. If you're not sure what to do, just click "Create New", and this will bring you to the widget creation page, which is just another way of saying "code generator". Under "Choose a Timeline Source", notice there are 5 words that look like they're part of a tab system. Those are actually letting you choose the type of Twitter source you want for your feed, so don't overlook these! The rest should be self explanatory... you get a code box at the bottom when you're done.

3. Copy and paste that code into a newly created html file. To make an html file, just create a new blank text file, edit it, and after you're done, save it, find the file, and rename the extension to "html". To be safe, I would recommend to have the following code in the file so everyone really knows it's an html:
<!DOCTYPE html><html><body> Twitter feed code goes here  </body></html>

4. Upload the new html to Google Drive. Make sure the file is publicly accessible! Right click the file -> Share -> Share... -> under "Who has access", set it to "Public", and then save the changes.

5. Now click the html file inside Google Drive to open it. You'll see the code here being presented literally rather than executed.

6. Look at the very top and find the button that says "open". Click it and select the "Google Drive" option that comes up. Your html should now be open in a different looking viewer, but the code is still being presented literally.

7. Here's the key: locate and click the button labeled "preview". Suddenly, the Twitter widget shows up. If it doesn't, then check the code you pasted for errors.

8. If you look at the address bar now, there should be a long url which has "googledrive.com/host/" sandwiched between two bunches of gibberish. First, delete everything to the left of "googledrive.com". Then replace what you just deleted with "https://". Now copy the entire resulting link.

9. Now go to your Google site and enter edit mode. At the menu on top, head to Insert -> More Gadgets -> "Include gadget (iframe)" -> Select. Now paste your copied url into the provided mandatory url box. You can tweak the other settings whenever, of course, but the important thing is that the Gadget which gets created should now successfully display your requested Twitter feed, along with a "follow" button for visitors, and you can even tweet directly from the widget itself.