Knowledge Base
Shopping Cart Software Online Manual
Add a Google+ badge to storefront pages
Add a Google+ +1 button to storefront pages Add a Google+ share button to storefront pages
Location Home > Shopping Cart Software Components > Administration Area > Modules > 3rd Party Service Integration

Add a Google+ badge to storefront pages

Add a Google+ "badge" button to your storefront

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

First off, what will the Google+ badge 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 Google+ badge will look something like this:


Google+ Integration Settings

The first step in displaying Google+ content in your storefront will be to configure your store's Google Plus Integration settings. These settings can be found in your store's Administration Area at: [Modules > 3rd-Party Integration > Google+].

The Google+ Integration setting that needs to be completed in order for the Google+ badge to be used is the one titled Your Google+ Account ID. This setting must be completed, because this is the Google+ account that will be referenced when the Google+ badge is displayed in the storefront.

After the necessary integration settings have been entered and saved, the Google+ badge will be ready to use. The next step is to simply tell the shopping cart which page(s) in your storefront you want to display the badge on. This is done by adding a QuickCode Tag to the desired location in your store templates.
Displaying the Google+ badge 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 Google+ badge can be added to any storefront page by adding the following QuickCode Tag to the desired location on that page's template: {GOOGLE-PLUS-BADGE}.

The badge 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-BADGE} 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 Google+ badge can be added to any page in your online store simply by:
  1. completing the necessary Google+ Integration settings, and then
  2. adding the {GOOGLE-PLUS-BADGE} QuickCode Tag to the desired location on those pages.
And step 2 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 Google+ badge.
Customizing the {GOOGLE-PLUS-BADGE} QuickCode Tag

As mentioned above, the {GOOGLE-PLUS-BADGE} QuickCode Tag can be used as-is to display a Google+ badge 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
The URL of the Google+ profile.
Possible values: Any URL
Default: URL of the Google+ profile entered in the store's Google Integration settings.

The pixel width of the badge to render. For a 131px height badge, the width can be from 100 to 169. For a 69px height badge, the minimum width is 170 and the badge can be as wide as needed.
Possible values: Any number

The pixel height of the badge to render. There are two valid heights. The badge will not render if an invalid height is specified.
Possible values: 69 or 131
Default: 69

The color theme of the badge. Use dark when placing the badge on a page with a dark background.
Possible values: light, dark
Default: light

More details about each of the options available for use with the Google+ badge 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.

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


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.

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


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-BADGE:height=69:width=300}

Incorrect: {GOOGLE-PLUS-BADGE : height=69: width=300}

Incorrect: {GOOGLE-PLUS-BADGE: height = 69 : width = 300}

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

— Last Edited - 02/15/2013 3:02pm PST
Rank and add a comment to this article
Only logged in users may leave comments and rank articles. Log in to have your say!
  Knowledge Base Home

  QuickCode™ Tag Glossary

  Modular Homepage

Not Logged in.
Either Log in or create a User Account.

Other articles in this category...

Add a Google+ +1 button to storefront pages

Add a Google+ badge to storefront pages

Add a Google+ share button to storefront pages

Add a Twitter Follow button to Storefront pages

Add a Twitter Tweet button to Storefront pages

Compatible Payment Gateways

Facebook Integration

FedEx Integration

Google Plus Integration

Google Sitemap Integration

Twitter Integration

U.S.P.S. Integration

U.S.P.S. shipping methods don't show up at checkout

Using Google Analytics in Your Storefront

YouTube Integration

Third-Party Service Integration