Websites‎ > ‎Google Sites How-tos‎ > ‎

Google Sites - Facebook Like and Share Buttons Gadget

posted 16 Oct 2011, 14:01 by Stephen Hind   [ updated 14 Aug 2015, 09:20 by Stephen Hind ]

Lots of people like to use Facebook so I created a gadget to add a Facebook Like button to your Google Site.  These instructions tell you how to add the Steegle.com Facebook Like Button Gadget to your Google Site. This gadget can auto-detect the page's URL so you don't need to add it, so you can add to a page template and it will work without further configuration.

Note: If you have installed any browser extensions to stop the Facebook Like Button, e.g. "Facebook Disconnect" then this gadget will not work either.



Instructions

  1. Go to your Google Site's page where you want to add the button and use the Edit Page button.

  2. Use the Insert menu, then More gadgets...

  3. Use the Add gadget by URL link

  4. Enter the following URL into the box:
    https://goo.gl/kEP11n (Like and Share button)
    or
    https://goo.gl/rT23qd (Share only button)
    and use the Add button

  5. You can choose to set these optional attributes:
    • URL to Like (leave blank for automatic) - the web address you want your visitors to Like on Facebook.  Leave this blank if you want the gadget to detect the page URL automatically.

    • Layout style - Choose if and where you want the count box to appear (see examples on the right in this how to).  The numbers in the square brackets tell you the dimensions to set the gadget's height and width to (also see note on Show Faces below), eg [300 x 30] means make the gadget 300px wide by 30px high.

    • Width - enter a width for the gadget in pixels (you may need to experiment with this to get it right on your page and make sure that nothing of the Like button gets cropped).

    • Show faces (add 37px to gadget height) - choose whether to display the face of the people who use the Like button. If you enable this option add 37px to the height of the gadget to ensure the gadget does not crop the faces, eg if you choose the standard layout make the gadget's width 300px and height 67px.

    • Verb to display - choose whether to display a Like button or a Recommend button.

    • Font - choose the font you wish to use on the button

    • Colour Scheme - choose the colour scheme for the button, Light or Dark

  6. Untick the Include a border around gadget and Display title on gadget boxes and set the height and width to appropriate values.

  7. Use the OK button

You're done!   

Screen Shots

Steegle.com - Facebook Like Button Preferences

Google Sites - Facebook Like Button Gadget - Preferences

Steegle.com - Facebook Like Button Styles

Like Button - Standard - Show Faces


Like Button - Horizontal Count


Like and Share Button - Vertical count

Recommend Button - Standard - Dark