My favorites | English | Sign in

Google Friend Connect APIs (Labs)

Google Friend Connect Buttons

Generating your own Google Friend Connect Buttons

In order to provide a visually consistent way to indicate that your site is using Google Friend Connect, we offer several options for generating buttons which include handling both joining or signing into a Friend Connect site. These options are:

It is also possible to apply CSS styling to the text in either a rendered Friend Connect button or link.

Usage

Before stepping into usage examples, here is the Friend Connect JS API method explanation along with parameter descriptions.

Method Description
google.friendconnect.renderSignInButton(params) Renders either a 'sign-in' or 'join' button branded with Google Friend Connect. The argument params is an object that accepts the following inputs:
  • id: (required) A string containing the HTML element ID where the button will be rendered.
  • text: (optional) A string containing the text to display in the button. The default text is "Sign in" with gray text below the button: "with Google Friend Connect".
  • style: (optional) The button style, which can be one of standard, long, or text. The default is standard.


Option #1: Branded button with Gray Text (Default)

The branded button with gray elements renders a Google Friend Connect button with a branded Google icon on the left and text in the center of the button. A small gray message "with Google Friend Connect" is also rendered below the button. The default text is "Sign in"

Usage Example: 

  <script type="text/javascript">
    ...
    function renderButton(){
      google.friendconnect.renderSignInButton({ 'id': 'gfc-button' });
    };
  </script>
  ...

<div id="gfc-button"></div>

The preceding code will render the following button:




Option #2: Standalone Button

The standalone button Friend Connect button is almost identical to the branded button, except it does not have the gray text 'with Google Friend Connect' underneath the button. The standalone option is available by rendering the button with style parameter defined as long.

Usage Example: 

  <script type="text/javascript">
    ...
    function renderButton(){
      google.friendconnect.renderSignInButton({ 'id': 'gfc-button', 'style': 'long' });
    };
  </script>
  ...

<div id="gfc-button"></div>

The preceding code will render the following button:




Option #3: Favicon with Text

This rendering option does not render a button at all. Instead it renders a Google Favicon icon along with some text which can either be specified or left as default.

Usage Example: 

  <script type="text/javascript">
    ...
    function renderButton(){
      google.friendconnect.renderSignInButton({ 'id': 'gfc-button', 'style': 'text' });
    };
  </script>
  ...

<div id="gfc-button"></div>

The preceding code will render the following favicon image and link:

Adding styles to Friend Connect link text

It is also possible to add CSS styling to Friend Connect link text. This is doable by assigning a style for the button text of a target div that you are rendering into.

Applying a style to a rendered link

In the case of a rendered link, you would apply a style in the form of: #<button container div> a {style(s)}. The a argument specifies that the link inside of the div is where the style is being applied.

Usage Example: 

  <script type="text/javascript">
      #gfc-button a  {font-size: 20px;  font-family: courier; }
  </script>
  ...
  <script type="text/javascript">
    ...
    function renderButton(){
      google.friendconnect.renderSignInButton({ 'id': 'gfc-button', 'style': 'text' });
    };
  </script>
  ...

<div id="gfc-button"></div>

The preceding code will render the following Friend Connect link with styling applied:

Further examples

Further button examples can be found on the GFC button rendering examples page.