Google Sites - Embed a Twitter Stream (on the New Google Sites)
We have several schools/teachers that have been updating their websites to the newer version of Google Sites, and one of the most common questions I have been getting is how can they have a Twitter stream on the site? The simple answer is...it's complex.
In fact, until about a month ago, I didn't even think it was possible. Then I stumbled across this video tutorial by Ben Wilkoff on just this. (It is a paired down version of his longer (27 minute) video if you want to watch it slower.) Here's my contribution - a step-by-step screenshot tutorial. It's a bit long, but it does the trick!
1. Start by going to Ben's template sheet - this provides the simple directions and templates needed (the link is also at the top of the sheet as seen here):
2. Make a copy of his template sheet to have your own copy (and so you can complete this process) - I recommend renaming it.
3. Grab and setup the latest version of TAGS (Twitter Archive through Google Sheets). Ben provides the link to start this in the template document:
If you need some guidance in setting up TAGS, here is my previous blog post about it.
4. Once your feed is displaying in your TAGS sheet, you need to go to Ben's template sheet and select the Copy to... option on the Archive2 sheet:
5. Select your TAGS sheet that has the Twitter feed to copy it to:
You should get the following message if it is successful:
6. Repeat this step to copy the Template sheet also:
7. Go back to the sheet with your Twitter Archive (TAGS); look at the Copy of Archive2 sheet (select at the bottom).
8. Highlight and copy the Google Sheet ID at the top in the URL address bar (it is the section between the / marks just prior to the word edit when reading from the right):
9. Click on cell A3 - it currently has #REF!. Replace the Change this to your current spreadsheet's ID text by highlighting it and pasting in the sheet ID you copied.
10. It will still say #REF! - you need to click on it again, then click Allow access:
Your Twitter feed should now show up:
This is great! You now have a spreadsheet with the Twitter feed. (If you want the feed to update, make sure to select Update archive every hour under the TAGS menu.)
While you could embed this directly onto your Google Site, it's not very attractive. That is where using Awesome Table comes in -
The document created by Ben has set up the spreadsheet with the proper headers needed by Awesome Table -
(If this is your first venture into using Awesome Table, you may want to read through my post on Embedding an Awesome Table View into Google Sites.)
11. Go to Awesome Table (log in if necessary - if it is your first time, you will need to provide permissions) and select to create a new view from blank:
12. First select the spreadsheet in which you loaded the Twitter feed:
In the window, using the search bar is usually the easiest way to find the spreadsheet:
13. Once the spreadsheet is selected, change the sheet referenced to the Copy of Archive2 (which was the sheet formatted for Awesome Table):
14. Click on Create:
15. Over on the right-hand side, click on View Configuration, and change Table to Cards:
16. Cope the text below, then click on the Advanced Parameters, and paste the text in there:
17. Click on the Share icon, copy the text under Link to share:
18. Go to your Google Website. Click on Embed URL, paste the URL you copied and then click Insert (Please note: the rest of this tutorial assumes some existing experience in using Google Sites.)
That's it - your Twitter should be feeding onto the webpage! Make sure to publish the changes to your Site.
In fact, until about a month ago, I didn't even think it was possible. Then I stumbled across this video tutorial by Ben Wilkoff on just this. (It is a paired down version of his longer (27 minute) video if you want to watch it slower.) Here's my contribution - a step-by-step screenshot tutorial. It's a bit long, but it does the trick!
1. Start by going to Ben's template sheet - this provides the simple directions and templates needed (the link is also at the top of the sheet as seen here):
2. Make a copy of his template sheet to have your own copy (and so you can complete this process) - I recommend renaming it.
3. Grab and setup the latest version of TAGS (Twitter Archive through Google Sheets). Ben provides the link to start this in the template document:
4. Once your feed is displaying in your TAGS sheet, you need to go to Ben's template sheet and select the Copy to... option on the Archive2 sheet:
8. Highlight and copy the Google Sheet ID at the top in the URL address bar (it is the section between the / marks just prior to the word edit when reading from the right):
While you could embed this directly onto your Google Site, it's not very attractive. That is where using Awesome Table comes in -
The document created by Ben has set up the spreadsheet with the proper headers needed by Awesome Table -
11. Go to Awesome Table (log in if necessary - if it is your first time, you will need to provide permissions) and select to create a new view from blank:
12. First select the spreadsheet in which you loaded the Twitter feed:
In the window, using the search bar is usually the easiest way to find the spreadsheet:
14. Click on Create:
15. Over on the right-hand side, click on View Configuration, and change Table to Cards:
16. Cope the text below, then click on the Advanced Parameters, and paste the text in there:
Copy of Template!A1:C2
17. Click on the Share icon, copy the text under Link to share:
18. Go to your Google Website. Click on Embed URL, paste the URL you copied and then click Insert (Please note: the rest of this tutorial assumes some existing experience in using Google Sites.)
That's it - your Twitter should be feeding onto the webpage! Make sure to publish the changes to your Site.
