Google Sites‎ > ‎How To...‎ > ‎

Add Social Media Buttons

So you've built your Google Site, you've got some visitors and you want those visitors to be able to share your site easily via various social media. This article explains how you go about adding some of those buttons you see on this and other sites.
(NB: Except for those specifically provided by Google via the sidebar editor e.g. Google Plus, you can't add gadgets to the Sidebar)

Google Plus

in the content body

As you might expect, the easiest button to add is a Google Plus button.
To add a Google Plus button to the body of a page:
  1. open the page editor
  2. position the cursor where you would like the button to appear
  3. select Insert > +1 Button.
You can choose whether or not to display the click count and you have a choice of 4 sizes: small, medium, standard or tall. And that's it!

 small  medium  standard  tall

 
 

In the Sidebar

Alternatively, if you have a site with a sidebar, you can add the button to the sidebar as follows (this is the only option for globally inserting the +1 button):
  1. Navigate to More > Edit Site Layout
  2. Select the Site Layout option from the left navigation pane
  3. Click the Add a Sidebar Item link ('+' at top of Sidebar)
  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
Following the steps above will add the button to the sidebar for all pages on your Google Sites website. You cannot specify the format of the +1 button.
See the sidebar of this site for an example.
Note that when a visitor uses the +1 button it will +1 the page the visitor is currently viewing and not just the site. 
The great thing about these buttons is that they 'know' the URL of the page they are on, you don't need to specify it.

Twitter

'Tweet'






To add a Twitter 'Tweet' button to the body of a page:
  1. open the page editor
  2. position the cursor where you would like the button to appear
  3. Select Insert > More Gadgets
  4. From the featured gadgets, select the Twitter Button gadget
Now you have to set the gadget properties

Optional parameters
  • URL to share - the web address you want your visitors to tweet about. If this field is left blank, then the URL of the current page will be tweeted. (Twitter will shorten this URL for you automatically).

  • Twitter user to attribute - suggest anyone you want to mention in the tweet: add your own Twitter screen name if you wish.
    The tweet button above has this property set to my Twitter username 'philridout'
    Try it and see.

  • Default tweet text - suggest some text for the tweet.

  • Count box position - Horizontal, Vertical or None
    The count box displays how many times the 'URL to share' has been tweeted. You can see examples of all three versions above. 

  • Language - the gadget offers English, French, German, Italian, Korean, Japanese and Spanish.

  • URL to which your shared URL resolves to - the actual URL that the shared URL resolves to. If you provide a shortened URL in the 'URL to share' box provide the long URL here, otherwise just leave blank
Display Parameters
  • Select the width and height for your button (I recommend a height of 20 for a 'horizontal' button)

  • De-select the three optional parameters: scrollbar, border and title

  • Click on OK and you're done






Follow


To add a Twitter 'Follow' button to a page:
  1. Open the page editor
  2. position the cursor where you would like the button to appear
  3. Select Insert > More Gadgets
  4. From the featured gadgets, select the Twitter Follow Button gadget


Now you have to set the gadget properties

Required parameters
  • Enter your Twitter screen name (username)
Optional parameters

  • and choose whether you want to display the number of followers you have (Followers count display)

  • You can change more optional extras: 

    • Button colour - you can choose blue, the default, or grey which displays better on darker backgrounds.

    • Link colour - alter the colour of your Twitter screen name

    • Text colour - alter the colour of your follower count

    • Language - the gadget offers English, French, German, Italian, Korean, Japanese and Spanish.

Display Parameters

  • Select the width and height for your button (I recommend a height of 20)

  • De-select the three optional parameters: scrollbar, border and title

  • Click on OK and you're done

AddThis - for 6 buttons at once

Finally, if you want to provide multiple buttons at once, my current recommendation is to use the 'AddThis 6' gadget. You will have to create an account on https://www.addthis.com/ but it's easy (and free!)

Then:
  1. Open the page editor
  2. position the cursor where you would like the button to appear
  3. Copy the link for their gadget
    https://sites.google.com/site/tvsgadgets/google-gadgets-for-websites/gadgetuploads/AddThis_6_byTVS.xml
  4. Edit your Google Sites Page
  5. Choose "Insert"
  6. Choose "More Gadgets"
  7. Choose "Add Gadget by URL"
  8. Paste in the URL that you copied in step 3

Setup the gadget 
  • Add your 'AddThis' userid
  • Add the URL of the page to be referenced by the buttons
    Assuming that you want this to be the current page where you insert the gadget, just copy and paste the current address from the browser address bar. 
    NB - This is not dynamic. If you move the page you will need to manually update this URL
  • Add a Title and Description
  • Select the buttons you want to appear
Display Parameters
  1. Select the width and height for your button (You need to allow enough height for some buttons like Google Plus to expand)
  2. De-select the optional parameter 'title'. You should probably leave scrollbar selected, especially if using the Google Plus button
  3. Click on OK and you're done

AddThis 6 by TVS!


Contents

  1. 1 Google Plus
    1. 1.1 in the content body
    2. 1.2 In the Sidebar
  2. 2 Twitter
    1. 2.1 'Tweet'
    2. 2.2 Follow
  3. 3 AddThis - for 6 buttons at once



Comments