Google Sites: Help and Instructions to Customize Your Site

Web Design and Templates

Tech for Educators

Links:

Add Pinterest Button

posted Sep 19, 2012, 3:32 PM by Julie Sharma [ updated May 21, 2021, 2:01 PM ]

You can add a variety of buttons, including Pinterest Pin it, using AddThis. If you haven't already, create an AddThis account before starting.

The gadget spec URL could not be found

Get Code from AddThis

Sign in to Addthis.com
Click Tools (top left)
Click Add New Tool
Select Share Buttons
Select Floating then click Continue
Adjust customizations as desired. Either use the Smart Sorting by AddThis (and the buttons your visitors most often use will show) or click Selected by You to specify which share button(s) to show and in which order. Click ADD MORE SERVICES to add more/others (e.g., LinkedIn, Amazon, Box, Digg, Evernote, etc.) or click and drag the existing service to re-order them
Click Activate Tool
Click Get The Code (top right)
Under My Site is, select An HTML Website
Under Just Copy... click the + button to copy the code snippet
Continue below to add the code to a Google Sites Page ↓

Add AddThis Code to New Google Sites page

On the New Google Sites page where you want the button, on the right, click Insert and then <> Embed
In the Embed from the web box, click Embed code. Then paste the code (copied from AddThis) into the box and click Next
You'll see a preview of the AddThis buttons. Click Insert

Add AddThis Code to Classic Google Sites Page

On the Classic Google Sites page where you want the button, place your cursor where you'd like the buttons to appear (near the top of the page, perhaps)
Click Insert and then click HTML Box
Paste the code copied from AddThis in the box, uncheck Scrollable, change height to 50 (pixels). Click Save
Select Save for the HTML Box and then save for the page to view your changes

-top-

Link to Word/Excel files

posted Aug 25, 2012, 7:38 PM by Julie Sharma [ updated Aug 19, 2015, 8:03 PM ]

To link to a Word/Excel/PowerPoint file, either upload the file directly to a page as an attachment, or upload the file to Google Drive and convert it to Google format. Then, embed the file using the the Insert > Google Drive options.

FAQs

I added a Google Drive item to my website and I can see it, but visitors say they cannot see the item. Why?

Everything stored in Google Drive, by default, is generally private so only you can access those items, so be sure you've shared the item with your website users/visitors so they can see it.

Add a File As an Attachment to a Page

Enable page attachments and then add downloadable, version-able files to the bottom of pages

Embed a Word File in a Webpage

Upload the file to Google Drive
Convert the file to Google format (Word files become Documents, Excel files become Spreadsheets, PowerPoints become Presentations)
Share the file with those will be accessing your site (if your site is public, make the file public on the web, too)
Sign in to your Google Site at sites.google.com
Select the pencil (top right) to access edit mode for the site
Select <HTML> to edit the html
Select Insert > Drive and then choose the type of file (Word files became Documents, Excel files became Spreadsheets, PowerPoints became Presentations
Select the item to insert and click Select
Choose whether to have a border and/or include a title; set height and (optional) width. If you're not sure what options to select, leave the options as they are; you can always come back and change these settings. Select Save.
Select Save (top right) to save and view changes
To modify settings, while in edit mode, select the Drive item (which in edit mode appears as a gray box) and then select the gear icon from the toolbar that appears. That will open the same options from step 9. Change options as desired and select Save and then Save again to view changes.

The gadget spec URL could not be found

Add a Link to a File

Alternatively, you could simply make text (or an image) on your website a link to the file stored in Google Drive. As above, upload the file to Google Drive (Be sure the sharing/visibility options are set correctly), and then get the link to share the file

Select the pencil to edit the site
Type the text you want to be the hyperlink (for example, "See the .doc file here")
Select/highlight that text
Click on the link icon in the toolbar
In the pop up box, click on Web address (on the left)
Paste the sharing link for the file (copied above) into the Link to the URL box
Select OK
Select Save to save and view changes

-top-

Link to iTunes

posted Apr 7, 2012, 7:24 AM by Julie Sharma [ updated Aug 8, 2015, 12:40 PM ]

To create a link to specific content on iTunes,

go to iTunes linkmaker.
search for the material you want using the search tool
when you find the content you want to link to, click on "Album Link" or "Song Link" or "Video Link" etc. on the right side
in the box the appears, choose and click on the circle next to "small button" "large button" or "text only" (note: when you click on each choice, you will see a sample in bottom of box of what your link will look like. The button pictured above is the "large button" choice)
The gadget spec URL could not be found
copy the the text from the box, something like this:

<a href="http://itunes.apple.com/us/album/strauss-ariadne-auf-naxos/id62435959?uo=4" target="itunes_store"><img src="http://r.mzstatic.com/images/web/linkmaker/badge_itunes-lrg.gif" alt="Strauss: Ariadne Auf Naxos - Edita Gruberova, Gewandhausorchester Leipzig, Jessye Norman, Julia Varady, Kurt Masur, Olaf Bär & Paul Frey" style="border: 0;"/></a>
go to the Google Site where you want to have the link and be sure you are signed in
click on the pencil
in the section of the page where you want the link, type PASTE ITUNES LINK HERE
click on <HTML> (while in that same section of page)
search the html for "PASTE ITUNES LINK HERE"
remove the PASTE ITUNES LINK HERE and paste over it the content you copied in step 5
click "Update"
click "Save" to save and view changes
test your new link to be sure it works as you wanted

-top-

View Related Posts

Add Google +1 button

Add an Mp3 (player and music)

RSS feed subscription

posted Apr 4, 2012, 5:56 AM by Julie Sharma [ updated Aug 13, 2015, 7:14 PM ]

When you choose the "announcements" type for your page template (more), you can allow visitors to subscribe to your posts through an RSS reader and/or through email.

The built-in "Subscribe to posts" option works in some browser settings but not all, so you can add email and/or RSS feed options* to allow access to more visitors. (However, as of 6/9/2012, you cannot get rid of the built-in "Subscribe to posts" button from public sites).

Note

If you are creating a site through a Google Apps domain (if you see a/domainname in the URL of your site, you are on a domain), you may receive an error around step 8. This is especially true if your domain set up doesn't allow required services like Google Feedburner. If you receive this error, test the default "subscribe to posts"; you might find that the default button works for you. Find more information here.

Alternatively, instead of Feedburner, try using MailChimp's RSS Feed to email; create a free account, copy the your webpage's feed URL (step 6 below), and then in MailChimp, create a new Campaign > RSS-Driven Campaign.

The gadget spec URL could not be found

Start:

First, set up the feed (for both RSS reader and email)

be sure you are signed in to Google Sites
go to your webpage that is announcements style
find the section of your page with the new post button and "subscribe to posts" link (note: this option may only be visible once your site is public):

click on "Subscribe to posts"
a tab/window should open (note: the page might say "Page not found", but that's fine--you simply need the address/URL), and the webpage's address should be the webpage's address with .xml at the end, for example

https://sites.google.com/site/siteshelphowtos/google-sites-instructions/Basics/posts.xml
copy that URL but DO NOT COPY https:// So you should copy something like this:

sites.google.com/site/siteshelphowtos/google-sites-instructions/Basics/posts.xml
in a separate window/tab go to Google Feedburner (as it's also a Google product, you should be automatically signed in (you should see your google email in top-right corner))
in the box marked "Burn a feed right this instant" paste the URL from step 6 (without the https:// or http://) and click next
on the following screen, you can alter the "Feed Title" (be sure it has a name you will remember so you know which webpage it is associated with) or simply click "Next"
on the following page, click on "Skip directly to feed management" (in small letters by "Next")
follow the steps below to set up subscription through
RSS reader
and/or
email

-top-

The gadget spec URL could not be found

RSS reader

complete steps 1-11 above
on your Feedburner page, in the top row of navigation tabs, click on "Publicize"
on the left side, click on "Chicklet Chooser"
scroll to the bottom of the page and copy the code in box marked "Copy the HTML below for use in your own page templates:" the text should look something like this:

<a href="http://feeds.feedburner.com/google/HUZf" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/google/HUZf" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a>
return to the announcements-style page on your website where you want the "Subscribe to posts" link to appear
click on the pencil to edit the page (top, near-center)
in the place on your page where you want the subscribe link, type "PASTE HERE"
click on <HTML>
search through the HTML for the "PASTE HERE" (to help, use ctrl F or command F to find PASTE HERE quickly in the html)
remove the "PASTE HERE" text and paste the code (copied in step 4) instead
click on "Preview" to view the change (return to the HTML to make changes as necessary)
when finished with html, click "Update"
in regular (WYSIWYG) edit mode, make any additional changes to placement of subscribe button
when finished, click "Save" to save and view changes
to test the link, click on it (not in edit mode)

-top-

Email

complete steps 1-11 above
be sure you are signed into Google Feedburner, and on your Feedburn homepage, click on the name of the feed you want to add an email subscription link for
in the top row of navigation tabs, click on "Publicize"
on the left side, click on "Email Subscriptions"
near the bottom (in the light-red area) click on "Activate" (if you don't see "Activate," be sure the highlighted tab on the left says "Subscription Management"--if it does and you don't see "Activate," the feed is already active)
scroll down to the area marked "Subscription Link Code"
copy the content in the box. It should look similar to this:

<a href="http://feedburner.google.com/fb/a/mailverify?uri=google/HUZf&loc=en_US">Subscribe to Posts by Email</a>
return to the announcements-style page on your website where you want the "Subscribe to posts" link to appear
click on the pencil to edit the page (top, near-center)
in the place on your page where you want the subscribe link, type "PASTE HERE"
click on <HTML>
search through the HTML for the "PASTE HERE" (to help, use ctrl F or command F to find PASTE HERE quickly in the html)
remove the "PASTE HERE" text and paste the code (copied in step 7) instead*

*note: if you want the rss feed image to appear with the email subscription option, add the yellow-highlighted code to your code before the "Subscribe to Posts by email," resulting in something similar to this code:

<a href="http://feedburner.google.com/fb/a/mailverify?uri=google/HUZf&loc=en_US"> <img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/> Subscribe to Posts by Email</a>
click on "Preview" to view the change (return to the HTML to make changes as necessary)
when finished with html, click "Update"
in regular (WYSIWYG) edit mode, make any additional changes to placement of subscribe button
when finished, click "Save" to save and view changes
to test the link, click on it (not in edit mode)

-top-

Add Twitter button

posted Mar 27, 2012, 9:16 PM by Julie Sharma [ updated Apr 30, 2015, 8:44 PM ]

You can use the gadget described here to add a variety of button types,

FAQ

Can I reuse one button on many pages?

Once you've created the Tweet button for one page, you can copy and paste it on to other pages. Just change Your Page URL (step 8.1) for each new page.

including Tweet with a counter. If there's already a button on your page-perhaps from a template-, you can remove it before adding this custom button.

click on the pencil to edit the page (top, near-center) to edit the page
put your cursor in the place you want the like button
click on Insert
click on ... More gadgets
on the left side, click on Add gadget by URL
then, in the box marked "Enter the URL for a gadget you want to add," remove any existing text and paste in

http://tinyurl.com/add1button
click Add
in the Add this gadget to your page box,

change Your Page URL to the page you're adding the gadget to
change Your Title and Your Description
set Back Color of gadget (i.e., to match the color of your page)
for Button type, choose Tweet
at the bottom, uncheck Include a border around gadget and Display title on gadget

Optionally,
change AddThis.com User ID

click Ok
click Save to save and view changes

The gadget spec URL could not be found

Add button to Linkedin profile

posted Mar 27, 2012, 8:47 PM by Julie Sharma [ updated Aug 8, 2015, 12:11 PM ]

Easily add a button to your Linkedin profile with this gadget. (If there's already a button on your page--perhaps from a template--you can remove it before adding this custom button).

The gadget spec URL could not be found

click on the pencil to edit the page (top, near-center) to edit the page
put your cursor in the place you want the like button
click on Insert
click on ... More gadgets
on the left side, click on Add gadget by URL
then, in the box to the right, paste the url below in red (note: remove any text already in the box before adding this url):

http://tinyurl.com/addlinkedinbutton
click Add
in the Add this gadget to your page box,

change Linkedin Profile URL to the url of your public Linkedin Profile; to find this

sign in to your Linkedin account
access your settings
edit public profile
under You public profile URL, copy your current url

at the bottom, uncheck Include a border around gadget and Display title on gadget

click Ok
click Save to save and view changes

-top-

Add Google +1 button

posted Mar 27, 2012, 8:41 PM by Julie Sharma [ updated Aug 8, 2015, 12:14 PM ]

You can easily an a Google + button to your site:

click on the pencil (top, near-center) to edit the page
click on "Insert"
click on +1 button
click on "Save" to save and view changes

The gadget spec URL could not be found

If the +1 button is not an option:

click on the pencil (top, near-center) to edit the page
put your cursor on the section (left column, right, etc.) of the website you want the button
click on <HTML> (in the row of commands above the content area. *For more on html, see HTML basics)
copy the entire gray-background section, below, and paste it into the html in the location you want the button (note: if you are not familiar with html, it can be difficult to determine where to paste the code. If you're not sure, just paste it at the very top. Then after the button is created, you can copy and paste to move the button exactly where you want it in non-html edit mode)

<img src="/site/sites/system/app/images/cleardot.gif" type="plusone" props="align:right;showCount:true;size:medium;wrap:true;" class="sites-placeholder-plusone-medium-count" style="display:inline;float:right;margin:5px 0 5px 20px;">
click on "Update"
edit alignment and text-wrap options in the tool bar or click on the properties gear icon to change the button's size options
click "Save" to save and view changes

*note: once you've created a +1 button for one page, you can copy and paste it into other pages

-top-

View Related Posts

Add Facebook Like button

Add Google +1 button

Add Facebook Like button

posted Mar 27, 2012, 8:38 PM by Julie Sharma [ updated May 21, 2021, 2:02 PM ]

FAQ

I had a Facebook Like button, but it doesn't work anymore. There's an error when I try to use it. What's wrong?

The Like button functionality recently changed, so if you had previously added a Facebook button that worked, it might not work as expected anymore.

You can add a

share button (along with other social media sharing buttons), which allows visitors to post your webpage on their Facebook page. Through addthis.com, you can even get analytics for the button's use. Here's how:

The gadget spec URL could not be found

Get Code from AddThis

Sign in to Addthis.com
Click Tools (top left)
Click Add New Tool
Select Share Buttons
Select Floating then click Continue
Adjust customizations as desired. Either use the Smart Sorting by AddThis (and the buttons your visitors most often use will show) or click Selected by You to specify which share button(s) to show and in which order. If you choose Selected by You, click ADD MORE SERVICES to add more/others (e.g., LinkedIn, Amazon, Box, Digg, Evernote, etc.) or click and drag the existing service to re-order them
Click Activate Tool
Click Get The Code (top right)
Under My Site is, select An HTML Website
Under Just Copy... click the + button to copy the code snippet
Continue below to add the code to a Google Sites Page ↓

Add AddThis Code to New Google Sites page

On the New Google Sites page where you want the button, on the right, click Insert and then <> Embed
In the Embed from the web box, click Embed code. Then paste the code (copied from AddThis) into the box and click Next
You'll see a preview of the AddThis buttons. Click Insert
The gadget spec URL could not be found

Add AddThis Code to Classic Google Sites Page

On the Classic Google Sites page where you want the button, place your cursor where you'd like the buttons to appear (near the top of the page, perhaps)
Click Insert and then click HTML Box
Paste the code copied from AddThis in the box, uncheck Scrollable, change height to 50 (pixels). Click Save
Select Save for the HTML Box and then save for the page to view your changes

-top-

The gadget spec URL could not be found

View Analytics

Go to www.addthis.com
Sign in
Click on Analytics

Images as links

posted Mar 26, 2012, 6:46 AM by Julie Sharma [ updated Mar 21, 2015, 11:33 AM ]

Link to section on different page

posted Mar 25, 2012, 8:28 PM by Julie Sharma [ updated Aug 8, 2015, 12:46 PM ]

There are 2 steps to making a link to a specific section or part of a page: insert anchor and insert link

*note you need to access and manipulate the html markup to do this. For more on html, see HTML basics

The gadget spec URL could not be found

Create Anchor

beginning on the page you want to link to, click on the pencil to edit the page (top, near-center)
place cursor where you want the anchor (in other words, if you want an anchor link to go to the top of the page, put your cursor in the top most area of your page)
click on <HTML> (*For more on html, see HTML basics)
in the section of the html where you want to link to, add the following:

<a name="nameofsection"></a>

replacing nameofsection with an easy-to-remember term for this section. For example, the -top- links connect to anchor text with a name "top," so the first section of my html for this page begins with
<a name="top"></a>
click "Update"
copy the URL of the page

Create Link to Anchor

go to the page where you want to add the link and click on the pencil to edit the page (top, near-center)
add the text you want the link to display (for example, on this page I use -top- as a link to the top of page, so for this step, I would enter -top-)
select the text that you want to be the link
click on "Insert" (top left)
click on "Link"
on the left side, click on "Web address"
paste the URL (copied above in step 6 of Create Anchor) in the "Link to this URL" box
at the end of the URL add #
after # add the nameofsection term from step 4 of Create Anchor above (for example, to go to top of my homepage, the "Link to this URL box" would say

https://sites.google.com/site/siteshelphowtos/home/#top

*remember, use exactly the same name you gave the anchor in the steps above or the link won't work
click Ok
click Save to save change
test the link by clicking on it to assure it goes to the correct place

*note: when you click on a link that goes to an anchor link (like the -top- link on this page), the web address should change to reflect the anchor--in other words, you'll probably see a # at the end of your URL with the name of your anchor after it)

-top-

View Related Posts

Link to section on same page

Images as links

Add Facebook Like button

1-10 of 11