MMv4 KB
 
Add a Google+ +1 button to storefront pages
  Last Edited - 02/15/2013 3:02pm PST
  Category Path - Shopping Cart Software Components > Administration Area > Modules > 3rd Party Service Integration
 
 
Add a Google+ "Plus One" button to your storefront

Modular Merchant's shopping cart software makes it quick and simple to add a Google+ "Plus One" (+1) button to any page of your online store. This article will provide instructions on how to create and customize a +1 button in your cart.

First off, what will the +1 button look like in the storefront? It can be customized in a number of ways (which is described in more detail below) but, by default, the +1 button will look something like this:

 

 
Displaying the +1 button in your storefront

As you know, each page of your public storefront — where your customers come to shop and check out — has a corresponding HTML template that controls its design.

Each storefront page has its own template: the store's home page has one, the search page has one, the checkout page has one, etc.

The +1 button can be added to any storefront page by adding the following QuickCode Tag to the desired location on that page's template: {GOOGLE-PLUS-ONE-BUTTON}.

The button will be inserted into a page wherever that QuickCode Tag is located within that page's HTML template.

the universe: no assembly required
Most of the Template Packages created by Modular Merchant will already include the {GOOGLE-PLUS-ONE-BUTTON} QuickCode Tag in various templates. In that case, no further customization of templates is necessary.

Also, if you're using the Universal Template system (which allows you to use just one single template to control the design of every page of your storefront) then this QuickCode Tag is already in place on various storefront pages and is ready to use.

It's not necessary to edit any templates to add this feature if you're using a Universal set of templates.

In summary, a +1 button can be added to any page in your online store simply by:
  1. adding the {GOOGLE-PLUS-ONE-BUTTON} QuickCode Tag to the desired location on those pages.
And this single step may not even be necessary, if using one of the pre-made templates provided by Modular Merchant.

Next, we'll review some of the advanced options that are available for customizing the look and behavior of your +1 button.
 
Customizing the {GOOGLE-PLUS-ONE-BUTTON} QuickCode Tag

As mentioned above, the {GOOGLE-PLUS-ONE-BUTTON} QuickCode Tag can be used as-is to display a +1 button in your storefront. However, it can also accept several parameters, which can be used to customize its appearance and behavior. The available parameters include:

+1 button quickcode tag parameters
href
Sets the URL to +1. Set this attribute when you have a +1 button next to an item description for another page and want the button to +1 the referenced page and not the current page. If you set this attribute by using gapi.plus.render, you should should not escape the URL.
Possible values: Any URL
Default: Current page's URL

size
Sets the +1 button size to render.
Possible values: small, medium, standard, tall
Default: standard

annotation
Sets the annotation to display next to the button.
Possible values: none, bubble, inline
Default: bubble

width
If annotation is set to "inline", this parameter sets the width in pixels to use for the button and its inline annotation. If the width is omitted, a button and its inline annotation use 450px.
Possible values: Any number
Default: —

align
Sets the horizontal alignment of the button assets within its frame.
Possible values: left, right
Default: left

expandTo
Sets the preferred positions to display hover and confirmation bubbles, which are relative to the button. Set this parameter when your page contains certain elements, such as Flash objects, that might interfere with rendering the bubbles.
Possible values: comma-separated list of top, right, bottom, left
Default: empty list

callback
If specified, this function is called after the user clicks the +1 button. The callback function must be in the global namespace and accept a single parameter, which is a JSON object.
Possible values: function(jsonParam)
Default: —

onstartinteraction
If specified, this function is called either when a hover bubble displays, which is caused by the user hovering the mouse over the +1 button, or when a confirmation bubble displays, which is caused by the user +1'ing the page. You can use this callback function to modify your page, such as pausing a video when the bubble appears.
Possible values: function(jsonParam)
Default: —

onendinteraction
If specified, this function is called when either a hover or confirmation bubble disappears. You can use this callback function to modify your page, such as resuming a video when the bubble closes.
Possible values: function(jsonParam)
Default: —

recommendations
To disable showing recommendations within the +1 hover bubble, set recommendations to false.
Possible values: true, false
Default: true

reference
More details about each of the options available for use with the +1 button can be found on Google+'s developer's website.
 
Passing parameters in the QuickCode Tag

Parameters can be passed within the QuickCode Tag in two ways.

Name/Value Pairs
The preferred method is to use name/value pairs. In this approach, both the name of the parameter and its value are included in the QuickCode Tag. This allows you to set custom values for any number of the available parameters, in any order.

example
For example, to set custom values for just the "annotation" and "size" options, the QuickCode Tag would look something like this when using name/value pairs:

{GOOGLE-PLUS-ONE-BUTTON:annotation=bubble:size=medium}

Note that when using name/value pairs, the parameters may be included in any order, and unused parameters may be excluded.

Values Only
Optionally, just the values of the parameters may be included. This can make the QuickCode Tag shorter in some cases, however, when including only the values of each parameter they must be kept in order.

example
For example, to set custom values for just the "annotation" and "size" options, the QuickCode Tag would look something like this when using just values:

{GOOGLE-PLUS-ONE-BUTTON:http://www.example.com/page.html:medium:bubble}

Note that when using only the values, all parameters from the first one through the last one you use must be present and in the correct order.

don't leave space for spaces
Remember, a QuickCode Tag, including any included parameters, can not contain any spaces.

Correct: {GOOGLE-PLUS-ONE-BUTTON:annotation=bubble:size=medium}

Incorrect: {GOOGLE-PLUS-ONE-BUTTON : annotation=bubble: size=medium}

Incorrect: {GOOGLE-PLUS-ONE-BUTTON: annotation = bubble : size = medium}

Using the examples above, it is possible to add a Google+ +1 button to any page of your storefront. The display of the button can also be customized by including additional parameters in the {GOOGLE-PLUS-ONE-BUTTON} QuickCode Tag.
Powered by ModularKB