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 Aug 8, 2015, 12:39 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

Sign in to Addthis.com
Select Tools (top left)
Select Newsletter Sharing Buttons
Paste/type page URL of the page you're adding the button to and page title in the boxes
Under Services, from Available Service select Pinterest Pin It and drag it to under Selected Services. Add or remove any other services as desired
Select the text in the Get the Code section and copy it
On the page you want the button while in edit mode, type PASTE HERE where you would like the buttons
Select <HTML> to access HTML mode
Find where you typed PASTE HERE and paste the code (copied in step 6) over the words PASTE HERE
Select Update and then Save to save and 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 Aug 8, 2015, 12:12 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:

Set up the button:

go to www.addthis.com and create an account
once you've created an account and signed in, click on Tools at the top
in the Share Tools section, find Newsletter Sharing Buttons and click Setup
return to the page of your Google Site where you want to put the Facebook button and copy the URL of that page, for example http://sites.google.com/site/mysite/mypage
return to addthis.com and in the Page URL to share box, paste the URL copied in step 4
in Page Title, type the title of the page (from step 4)
select the size buttons you'd like and drag or reorder any of the Services (only those in Selected Services will be added as buttons to your page)
The gadget spec URL could not be found
Scrolls down the the Get The Code box and copy the code, for example

<a href="https://api.addthis.com/oexchange/0.8/forward/google_ plusone_share/offer?url=https%3A%2F%2Fsites.google.com%2Fsite%2Fsiteshelphowtos &pubid=ra-5023h3hkk23&ct=1&title=pagetitle&pco=tbxnj-1.0" target="_blank"> <img src="https://cache.addthiscdn.com/icons/v2/thumbs/16x16/goo gle_plusone_share.png" border="0" alt="Google+"/></a>
return to your Google Site and on the page your want to add the button, click the pencil to edit the page
click on <HTML>
in the top of the html, paste the code copied in step 7
click Update
while in edit mode, you can drag and drop the buttons if you want to move them elsewhere on the page.
if you don't want the additional buttons, just click on each and then click the X that appears in the popup toolbar:
click Save to save and view changes

The gadget spec URL could not be found

View Analytics

return 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