Adding +1 Button to Google Sites

posted Jun 5, 2011, 11:53 AM by Brian Johnson   [ updated Sep 22, 2011, 7:30 PM by Brian Johnson ]

Google Sites offers a seamless integration with the Google +1 Button.  This integration allows users to place the +1 button either in the sidebar of a site, or inline with the content of the page.  This article outlines how each of these options are used.




Adding the Google +1 Button to a Google Sites Sidebar

To add the +1 button to the sidebar of your Google Sites website, follow the steps below.  Following these steps will add the button to the sidebar for all pages on your Google Sites website.  The is the only option for globally inserting the +1 button:
  1. Navigate to More > Manage Site
  2. Select the Site Layout option from the left navigation pane
  3. Click the Add a Sidebar Item link
  4. Locate the +1 Button option and click the Add button
  5. Position the +1 Button gadget in your sidebar by dragging and dropping the gadget to the desired position in the sidebar
  6. Click the Save button to save changes


Adding the Google +1 Button to the Content Area (Body) of a Google Sites Website

To add the +1 button to the content area (body) of your Google Sites website, follow the steps below.  Following these steps will add the button to individual/specific locations of your website:
  1. Navigate to the page you wish to add the +1 button to
  2. Click the Edit icon (small "pencil" icon in upper-right corner of page when logged in)
  3. Place the cursor in the desired location for the +1 button.  This must be in the body/content area of the page
  4. Click the Insert menu and select the +1 Button option
  5. Configure the button options by selecting the button Size and whether or not to display the Click Count along side the gadget.  The following example shows "standard" size with click count displayed:

Adding the Google +1 Button via Third Party Gadget

In some cases, the dynamic nature of the integrated Google +1 Button may not be what you are looking for.  In these situations, a third party gadget may be a better choice.

Google Sites Top Contributor prac has made a fully functional gadget for adding the Google +1 button to your Google Sites pages.  To include this gadget on your pages, log into your site as a user with edit permissions, navigate to the page you wish to add the button to, and do the following:

  1. Click Edit Page to begin editing the page
  2. Place the cursor in the location you want the +1 Button to appear and select Insert >> More Gadgets...
  3. In the Add a Gadget to Your Page window, click the Add gadget by URL option in the left navigation list
  4. Paste the following gadget URL into the Add gadget by URL box and click Add


  5. Configure the gadget options:



    NOTE:  The Background of Container field is used to determine the background color of the gadget.  (This is the area around the +1 button.)  It requires the use of hex notation instead of actual color names.  For example, #FFFFFF represents white, #FF0000 is red, and so on.  As most of us don't know these off-hand, there's a pretty good list over at webmonkey.com that may come in handy.

  6. Save the edits to your page and preview/test the changes.

Related Links