Sites Tips and Hacks



http://www.opensourceteacher.ca/resources/sites

Contents


Contents

1 The Basics

Open Link in a New Window

Custom Favicon

Columns and a Sidebar

Image Hover Text

Countdown Timer

Set Image Size Manually

Google Analytics

Tweet Button

2 Intermediate

Graphical Sidebar

Fancy Slideshow

Floating Callout

Setting Authorship

Google+ Feed Gadget

Blogger Custom Header Link

3 Advanced

Mirror Blog Posts on your Site

Twitter Cards in Blogger

Embedding a Twitter Feed

Floating Quotes (in Blogger)


Many of these tips and hacks require a little bit of modification to the HTML code of your Google Site. If HTML frightens you, I encourage you to try out the available training online from many different sites. My personal experience is with codeacademy.com

Happy hacking!


1 The Basics


Little tweaks to make your site a bit smoother.


Many of these tricks are short snippets of code that you can add to your site that will produce behaviour that isn’t necessarily built into the site interface by default. You should be comfortable messing around with the HTML button in your Google Site. Please use the “preview changes” button to check your code before you apply it, and remember: if something doesn’t work properly, you can use the page revisions to go back to how it was before you messed with it!


Open Link in a New Window


Level: Basic

In many places on sites, it’s easy to specify to open a link in a new tab or window. However, there are a few places where that option doesn’t appear. One such place is the sidebar items, especially when linking pictures. I have a graphic in my sidebar that I want to open in a new tab, since the link is to an external site.

Using a small piece of html, it is fairly straightforward to modify the code for this behaviour.

  1. Set up your link the way you normally would, and test it to make sure it works.
  2. Click on the <HTML> button to edit the html of the page. Inside the text editor, find the text that follows this format:

<a href=”http://____________”>Link Text.png

  1. Within that code, add the following text: target=”_blank” so your code now looks like this:

<a href=”http://_____________” target=”_blank”>

  1. Save the changes, and save the page. Your link should now open in a new tab and/or window (depending on the preferences of the page viewer).


Custom Favicon


Level: Basic

        The little icon that appears in the tab of your browser is known as a favicon. The default favicon for Google Sites is a plain blue box divided into rectangles, but you can change that to something that’s in line with your site’s design.

Bulb Logo.png

        Use a tool called a favicon generator to create your favicon. I use favicon.co.uk to create a favicon. Start with a square image in .png format (you can create a Google Drawing and download it as a .png image), then upload it to the site. This will generate a favicon.ico file. Download the file to your computer.

        Now navigate to your site, and click on More - Manage Site. In the list on the left-hand side, you’ll see an option to manage the site attachments. Upload your file. It must be named favicon.ico for this to work properly. If necessary, rename it to favicon.ico

        That’s it. Your site now has a custom favicon. Reload the page to see the icon appear in your browser’s tab.


Columns and a Sidebar


Level: Basic

When you choose a page layout, you can set it to have two columns, or you can have a sidebar, but there isn't any way to have two columns, and a narrower sidebar all at the same time.

To get around this, you can insert a table to create your columns. Put what you want in each column of your table. You will be able to see and manipulate your page content, and the only thing that gives away how you've done it is the table border.

Once again, we will use the option to edit the HTML to set the table border to have a thickness (or weight) of 0 points, effectively making it disappear. With your cursor inside the table somewhere, click the HTML button. Then, look for the code specifying the border (within the <table> tag), and change it or add the following line so it reads

border=”0”

You now have two separate columns (which are actually cells in a table you can’t see), and a sidebar as well. Be careful when choosing custom widths for elements in the table, as they will overlap the sidebar if you set them to be too wide.


Image Hover Text


Level: Basic

        You can use the <SPAN> attribute to apply rules to parts of your website. By itself, <SPAN> doesn’t change anything, but it allows you to attach other attributes to pieces of HTML code. Using the title=”_____” attribute tells the browser what title should appear when a viewer lets his or her mouse rest on a specific part of the page. If you’re curious, you can learn more by reading this web page (which is where I learned this neat little trick).

        To use this command, open the HTML editor (you should be comfortable doing this by now, right?) and navigate to the part of the code where you want the title to appear. In my case, it is whenever a user lets the mouse hover over an image. You will need to enclose the code you want to affect with the <SPAN title=”_____”> and </SPAN> tags. If that’s confusing, don’t worry. Find the image tag (which usually starts with <img ) and just in front of it, add <span title=”_____”>, but replace the underscores with the text you’d like to have appear. If you’ve applied a link to your image, you should put the <span> in front of the <a href=” tag.

        Find the end of the image tag (or wherever the end of the code you want to enclose is found), and add </span> after. Save all your edits, then test it out by letting your mouse hover over the image. You should see your title pop up after a few moment.


Countdown Timer


Level: Basic

You can include a countdown timer relatively easily. It can be a repeating countdown (that is, counting down to the same time every week), or a countdown to a specific date and time. Use the site www.countingdownto.com to generate the code for your countdown timer.

Fill in the relevant details, then click on the orange button. This will generate code that you can embed into your Sites page. Copy the code, then use the Insert - More Gadgets - Embed gadget to include the countdown timer in your site. Make sure that you set the dimensions to match what appears in your code (the above example has a width of 350 and a height of 240).


Set Image Size Manually


Level: Basic

When you insert an image, you have four options for size: small, medium, large, and original size. However, there are times when you need more specific control over image size. We can, again, use the HTML editor to specify the height and width of the image. You need to be careful when doing this make sure you maintain the aspect ratio. If you do not scale both height and width by the same amount, your image will end up stretched.

Insert the image as you normally would, then choose one of the manual sizes. This will put the height and width tags into the image, making it easy to change the numbers.

If you have a lot of content on the page, you may have trouble finding which image you want to change. Use clear and unique file names for your images, and use the find in page command to quickly navigate to where the image is specified inside your HTML code.

Specifications of image height and width need to occur within the <img> tag, which usually begins with <img src=”______ or <img alt=”_______. As long as you put the height=”xx” and width=”xx” your page should work it out no problem. Be sure to replace the xx with the numbers you’d like to use.


Google Analytics


Level: Basic

        You can use Google Analytics to show you information about traffic to your website. With Google Sites, it’s very easy to configure Google Analytics.

  1. Visit http://www.google.com/analytics/ and sign up for an account. It will be linked to your Google account, so if you’re signed in to Chrome browser, you shouldn’t need to do anything more than just allow analytics to access your credentials.
  2. Go to the admin section of the website, and find your Analytics ID.
  3. Copy this number. It should start with UA- and have several numbers.
  4. Go to your Google site, click on manage site, then scroll down to the “Statistics” section of the General page. Paste your analytics ID into the box, and save your changes
  5. To view your analytics data, visit the Analytics page. You can configure your dashboard to report different statistics, compare statistics, and vary the reporting time.

For a more detailed set of instructions, click on the link for the help available through the Google Analytics site. It is descriptive, up-to-date, and covers topics more extensively than I have here.


Tweet Button


Level: Beginner

Adding social media interactions to your Google Site can be a challenge, since Sites automatically removes scripts provided by any non-sites page. The “Tweet” button is a good example of a scripted action that is difficult to implement on your site. So, instead of trying to solve this with some fancy jiggery-pokery, I’ve written a Sites gadget to handle this task.

  1. Navigate to the page you want to edit, then click the pencil to open the editor.
  2. Place your cursor where you’d like the tweet button to appear.
  3. Click on insert - gadgets - more gadgets…
  4. On the left, choose “Add gadget by URL”
  5. Paste this URL into the box:
    http://www.opensourceteacher.ca/Tweet_Button.xml
  6. Configure the options (include your Twitter handle, the default message, and a hashtag if you like).
  7. Uncheck the options to include a border and title. They just look bad.
  8. Save the gadget, then save the page.


2 Intermediate


Adding cool stuff to your site,

some assembly required.


Sites are great, but they can be limited in what they’ll do right out of the box. This tips will help you add features that aren’t included by default in Sites. They may require a bit of patience to get them configured, but once they’re working properly, you won’t have to do much else. Adding pieces that will automatically update themselves can save you time updating your site.


Graphical Sidebar


Level: Intermediate

        A sidebar in a Google Site layout (that is, a sidebar that is persistent across the entire site, not just one page) can be pretty limited in what you can do. Aside from a handfull of gadgets, there isn't much room for flexibility. A +1 button, text, images, and site navigation are about all I've ever found to be useful. For mobile-friendly sites, I prefer using the horizontal navigation with two levels of depth.

        However, the text gadget is surprisingly powerful. When you open it up to edit mode, you can click on the little HTML button to edit the code directly. This might be a bit intimidating, but have no fear! A really easy way to create the code you want to use is to put together what you want in the body of one of your sites pages. Don't use any fancy gadgets, since I'm not sure if they're supported. Actually, I take that back: try it out and see if it works! Once you've got the layout you want (tall and fairly narrow would be a good bet), click the <HTML> button while editing the page contents, highlight everything, and cut it. Then, click on edit site layout, click the sidebar, insert a text box, click the <HTML> button in the box, and paste the code. You'll end up with whatever you had in the original page, but in the sidebar instead.

        I would recommend keeping it simple. No more than a few words of text per line, images all the same size, and follow a consistent style. For example, if one image is a link, they should all be links. If they require further explanation, or there is a lot of text involved, consider moving it off the sidebar.

        A simple tip for getting a consistent style in the sidebar is to keep the top <div> tag that defines things like alignment, font styles, and so on, and get rid of all other <div> and </div> tags. You'll need just one closing </div> tag. That will apply exactly the same style rules across all the content of the sidebar. It also means that changing things like the alignment are pretty easy, since you only need to change it in one spot.


Fancy Slideshow


Level: Intermediate

You can use a Google presentation to create a nice animated “slider” section to your site. The instructions for this are courtesy of Steegle.com and a Sites gadget by Romain Vailard called Slideshow Maker (using Google Slides).

  1. Create a presentation (or use this one). Use animations to add some visual appeal to your graphics (but avoid overdoing it). A tip is to create a frame the same colour as the background of your site by drawing a shape with a transparent fill and a very thick line. If you do not want to use the entire height of the slide, keep everything aligned to the top of the presentation.
  2. Publish the presentation, and use the appropriate settings for automatically advancing the slides and looping the presentation. You can play with these settings if you want to experiment. Copy the link provided in the box.

  1. Go to your sites page, and use the Insert - More Gadgets menu, and find the Slideshow Maker (using Google Slides) gadget. Paste the link into the box, and tweak the width and height settings to suit your purposes. I had to find the proper height to get only the frame to appear.
  2. Any changes you make to your slideshow will automatically get published to your website (unless you changed the default setting to automatically publish changes).

For more detailed instructions, read through the entire write-up on steegle.com. It is more in-depth and gets into the technical details. If you want to make a copy of the slideshow I’ve used (with animations and everything), feel free to click on this link. There are a couple of things unique to the slider I’ve built:

  1. I didn’t like the fade-to-black in the slide transitions. Instead, I have animated every object to fade out. That means that the slide delay is not determined by the slides, but is determined by how long the circle at the bottom takes to fade in.
  2. Because of the above, you will need to change the slideshow settings that are a part of the “Document link” URL. Change the end of the url so that it reads delayms=250

Hidden in the published document URL are three instructions that you can change:

  1. start=true will have the show start automatically.
  2. loop=true will have the slides play over and over. Set to loop=false to have it play only once.
  3. delayms=___ is how long to wait between each slide (in thousandths of a second). If you’re using a lot of animations, this should be a low number.

Floating Callout


Level: Intermediate

I use this technique mostly in my blog, but it works in Sites too. You know when you’re reading an article in a newspaper or magazine and they’ve got quotes in line with the writing, bolded and larger. I like the way they look, and I like how they add important visual cues about the content.

I’ve tackled this problem in the past by doing what you actually see on the right side here: an image that’s in line with the text. I don’t like this solution because the text isn’t selectable or searchable, and changing it is more difficult than it needs to be.

The solution is to put a single-cell table into your page using the HTML code for it. You can wrap text around it by making the table “float” and giving it a margin of whitespace.

Click on the HTML button to edit the code of the page, and then paste in this code:

<table border="5px" style="float: right; margin: 10px 10px 10px 10px; width: 300px;">

<tbody>

<tr><th><span style="font-family: Trebuchet MS, sans-serif; font-size: large;">Write your quote here</span></th></tr>

</tbody></table>

        You can play with the border, the margins, the relative position (right or left) and the width of the table itself by manipulating the variables that are in red. To change the font, go back to the normal view and apply the changes using the regular controls.


Setting Authorship


Level: Intermediate

When you do a Google search, results that have an established author will show the author’s details alongside the search result itself. Google calls this Authorship. This is a relatively simple thing to set up on your own site. To do this, you will need to have a Google+ profile set up.

There are two main things that you will need to do in order to set this up. The first is to establish your Google+ profile as a contributor to your website. Log in to Google+, and edit your profile. Under the links section, add your website as one to which you contribute.

Once you’ve done that, you need to make sure that your name appears on every page that you want attributed to you. I added my name to the footer of my website so that every page will have my information on it. You also need to add a link to every page that links to your Google+ profile page, and you need to add a small piece of code to the end of the link text. This is easier than it sounds.

First, find your Google+ profile page URL, and copy it to the clipboard. Then, highlight your name and add a link. Paste the URL that you copied into the link destination, and add the following to the end of the link: ?rel=author

Your link should look something like this:

 

You can use Google Webmaster Tools to verify the authorship has worked. It can take a couple hours for the changes to be shown across the web.


Google+ Feed Gadget


Level: Intermediate

        It is possible to generate code to include a Google Plus widget into your site, using a website called Widgets Plus. Follow the directions on their site to create and customize your widget. One thing that some find difficult is finding your Google+ User ID. If you have set up your own custom ID, it’s probably +YourName or something similar. Mine is +JamesPetersen02

        Once you’ve got the code, copy it to your clipboard. You can then use the embed gadget to include the code. You can find the embed gadget under “more gadgets” in the insert menu. Be sure to set the options on the embed gadget so that the dimensions of the gadget match those of your Google+ widget. You can see the dimensions in the code itself (the example at the left shows a width of 225 and a height of 137).

Please note that this code will not appear over secure connections. That means that if you see https:// at the start of the URL, you won’t see the gadget itself. This is because in order to edit the site, you need to be logged in over a secure connection. If you use a domain name service to point a domain name to your site, this will not require a secure connection, and the site will work. If you want to see what the gadget will look like, click on the little shield  warning symbol in the omnibox and allow unsecured content to load. If you want to use this gadget on a site that is not public to the world (i.e. one that requires users to log in), it won’t work nicely.


Blogger Custom Header Link


Level: Intermediate

        I use Blogger to host my website’s blog, but the address is a subdomain of my site. That means that my main site is http://www.opensourceteacher.ca and my blog is http://blog.opensourceteacher.ca

        I like that the header on my site will always bring you back to the main page. I think it’s an easy way to navigate the site, and I use the link often to bring me back to square one. However, on my blog, the header links to the blog page by default. This was frustrating me, since I use the same header image everywhere and I want it to behave the same way across all pages.

        Fortunately, since Blogger allows you to edit the HTML of the page, you can “fix” this.

  1. Navigate to your blog’s control panel, select “Template” on the left side, then click the “Edit HMTL” button.

 

  1. Use the handy “Jump to Widget” button at the top to navigate to the section of code that deals with the header by selecting “Header 1”

  1. Find the <div id=’header-inner’> tag. Directly underneath it there will be a tag that starts with <a expr:href______ tag. Replace that tag with text so that it appears as a regular <a href=’http://yourwebsitedomainhere’> tag. Mine looks like the following.
  2. Click on  and then test the link.

3 Advanced


If you’re feeling adventurous, give one of these a try.

Be warned, they’re != easy


Getting a computer to do stuff for you is something they’re supposed to be good at. Get your site to do things for you so you don’t have to duplicate work you’ve already done. Mirror blog posts to a Sites announcement page, or add Twitter cards to your Blogger, and get your message out more effectively. If it doesn’t work right away, be patient and try again a little later.


Mirror Blog Posts on your Site


Level: Advanced

I have a blog hosted through Google’s blogging platform, Blogger.com. I use this as a place to publish thoughts, projects, reflections, and so on. I wanted to be able to include a certain type of post on an announcements page of my Google Site, but I hate the idea of duplicating what I’m doing in one place in another part of the web. To me, a computer should do that for me.

        I use a combination of If This Then That and a small script I wrote to duplicate blog posts on my site. My favourite part about this set up is that I can define what tags to duplicate. For example, any blog post that’s tagged as PD goes to one place on my site, and any post that’s tagged as an educational tool goes to another page on my site. This all happens automatically.

To set this up requires two separate things: a recipe on If This Then That that will append a spreadsheet with a new row every time a post matching the required tag is posted. You can see the recipe at this link. You should be able to do this with any RSS feed (in theory, although I have not tried). You can make a copy of this spreadsheet and set it as the destination for the IFTTT recipe.

Once you have the recipe set up and working, you’ll need to modify the code in your spreadsheet. Open the destination spreadsheet, then click on the Tools - Script Editor menu option. Change the red URL to match that of your announcement page on your site.

The final step is to create a trigger. In the script editor, click on the Resources - Current Project’s Triggers option. Click the blue text to add a new trigger. You need to set up a trigger to fire whenever the sheet changes. It should look like this:

/*

// This script will publish a post from a spreadsheet row generated by an IFTTT recipe.

// View the recipe at https://ifttt.com/recipes/158879-blogger-to-google-sheet

// Published under the Creative Commons 4.0 Attribution - ShareAlike license.

// For more information, visit https://creativecommons.org/licenses/by-sa/4.0/

//

// Paste the Google Sites Announcements Page URL into the variable below.

// If you want to automate the script, add a trigger by using the Resources - Current Project's

// Triggers menu option.

// Select the publishEntries() function to run On change

*/

// Paste the URL of the announcements page into the line below.

var pageUrl = "https://sites.google.com/site/announcementsPage";

// Modifying any of the code below may break the script. Do so at your own risk.

function onInstall(){

  createHeaders();

  onOpen();

}

function onOpen(){

  var ss = SpreadsheetApp.getActiveSpreadsheet();

  var menuEntries = [ {name: "Check sheet for proper headers.", functionName: "checkForHeaders"},

                      {name: "Manually Publish to Sites", functionName: "publishEntries"} ];

  ss.addMenu("Spreadsheet2Site", menuEntries);

}

function publishEntries() {

  var sheet = SpreadsheetApp.getActiveSheet();

  var range = sheet.getDataRange();

  var page = SitesApp.getPageByUrl(pageUrl);

  var announcements = page.getAnnouncements();

 

  checkForHeaders();

  publishRows(page);  

  Logger.log("Script Finished");

}

function checkForHeaders() {

 

  var data = SpreadsheetApp.getActiveSheet().getDataRange();

  Logger.log(data.getCell(1,data.getLastColumn()).getValue());

  if (data.getCell(1,data.getLastColumn()).getValue() == "Published") {

    Logger.log("Column header already exists");

  } else {

    data.offset(0, data.getLastColumn()).getCell(1,1).setFontColor("white").setFontWeight("bold").setBackground("black").setValue("Published");

    Logger.log("Column header created.");

  }

 

}

function createHeaders() {

  var data = SpreadsheetApp.getActiveSheet().getDataRange();

  var headers = data.getValues()[0];

  var headerRef = ["Timestamp", "Title", "Body", "Tag", "Post URL", "Published"];

  var i = 0;

  while (i < headerRef.length) {

    if (headers[i] == headerRef[i]) {

      Logger.log(headers[i] + " already exists.");

    } else {

      Logger.log(headers[i] + " column header created.");

      data.getCell(1, i+1).setValue(headerRef[i]).setBackground("black").setFontColor("white").setFontWeight("bold");

    }

    Logger.log("Iteration " + i + " complete.");

    i++;

  }

}

function publishRows(page) {

  var data = SpreadsheetApp.getActiveSheet().getDataRange();

  data.offset(0,0,1);

  var i = 1;

  while (i <= data.getLastRow()) {

    Logger.log("Row " + i);

    if (data.getCell(i,data.getLastColumn()).isBlank()) {

      createNewAnnouncement(i, page);

    }

  i++;

  }

 

}

function createNewAnnouncement(row, page){

  var data = SpreadsheetApp.getActiveSheet().getDataRange();

  //var page = SitesApp.getPageByUrl(pageUrl);

  var title = data.getCell(row,2).getValue();

  var body = data.getCell(row, 3).getValue();

  page.createAnnouncement(title, body);

  data.getCell(row, data.getLastColumn()).setValue("Row Published.");

  Logger.log(title + " announcement created.");

}

Twitter Cards in Blogger


Level: Advanced

        Twitter cards are a way of showing more information whenever anyone tweets a link to your site. They require a website owner to add what are called meta tags to a site’s header code in the actual HTML of the page. If you don’t know what any of that means, you might find this very challenging.

        Unfortunately, Google Sites doesn’t yet allow you to modify your header HTML to include the Twitter card meta tags. However, if you have a blog hosted through Blogger (Google’s blogging platform), then you can add a Twitter card to your blog. This blog post gives you the details on how to get started.

The really neat thing about it is that your Twitter cards will automatically customize themselves to each post, showing the included image and search description. Since I haven’t used search description in the past, I modified the example code to include a default image and description if there is none available on the post. I just added a couple <b:else/> statements to the xml to include defaults if necessary. Here’s what my code ended up looking like. Modify the red parts to reflect your details, then validate through Twitter and you should be all set.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <meta content='summary' name='twitter:card'/>

    <meta content='@jpetersen02' name='twitter:site'/>

    <meta content='@jpetersen02' name='twitter:creator'/>

    <meta expr:content='data:blog.pageName' name='twitter:title'/>

    <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>

    <b:if cond='data:blog.postImageThumbnailUrl'>

      <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>

      <b:else/>

          <meta content='http://goo.gl/0gxVpN' name='twitter:image:src'/>

    </b:if>  

    <b:if cond='data:blog.metaDescription'>

      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

      <b:else/>

      <meta content='This is where you write your generic description of any page on your blog.'/>

    </b:if>

  </b:if>


Embedding a Twitter Feed


Level: Advanced

The gadget available for embedding a twitter feed doesn't work properly. To fix this, I wrote a new gadget to let you configure a Twitter timeline widget embedded directly into your site.

  1. To start, visit your twitter page and set up your widget according to their instructions. This is where you can choose options such as tailored tweets, a theme colour scheme, and the height of the widget.
  2. Leave this tab open, you’ll need it in the next few steps.
  3. In a different tab, open your sites page. Place your cursor where you want the widget, and choose Insert - Gadgets - More Gadgets…
  4. Select Insert Gadget from URL, and enter this address:
    http://www.opensourceteacher.ca/Twitter_Timeline.xml (be careful, it’s case-sensitive)
  5. Click the add button, and you’ll see a configuration screen. You’ll need to enter your twitter handle (without the @ symbol), and your widget’s ID. You can find the ID in the URL of the widget itself (remember that tab you didn’t close?). In the example below, the ID is 12345678901234567890
  6. Uncheck the options to show a title and border (those are really awful, aren’t they?), then click the preview button to see what your widget will look like. If you’re happy with it, insert the widget and you’re done!


Floating Quotes (in Blogger)


Level: Advanced

        To get text to appear and float beside your post in Blogger, you can create an image, put the text on it, then insert it into the post. I’ve done that in the past, and it works, but there are some things I don’t like about it. You can’t select the text (which means it doesn’t get looked at by search engines), and it takes some time to create the image. I’d rather have something that’s more fluid, that can be changed on the fly while I’m writing, and that will look good.

        You can do this by using what’s called a floating table. You don’t need to know what it is (although I highly recommend learning about this). Just click on the HTML button, and paste this code into your post right after the paragraph that you’d like it to appear underneath.

        You can then switch back to the regular text editor, and make changes to the text that appears there. It’s set to take up 45% of the width of the column, which means it should resize well for different screens (although on mobile it might not look that good). You can also change the side on which it appears by changing right or left.

<br />

<table border="0px" style="float: right; margin: 10px 10px 10px 10px; width: 45%;">

<tbody>

<tr><th><h3>Replace this text with something you like</h3></th></tr>

</tbody></table>

<br />


Back to Top

Sites Tips and Hacks, by James Petersen                                                                 of