MMv4 KB
 
Add a Twitter Follow button to Storefront pages
  Last Edited - 02/11/2013 3:58pm PST
  Category Path - Shopping Cart Software Components > Administration Area > Modules > 3rd Party Service Integration
 
 
Add a Twitter "Follow" button to your storefront

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

First off, what will the Follow 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 Follow button will look something like this:


 
Twitter Integration Settings

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

The Twitter Integration setting that needs to be completed in order for the Twitter Follow button to be used is the one titled Your Twitter Account Name. This setting must be completed, because this is the name of the Twitter account that will be followed when the Follow button is clicked by a user.

formatting your twitter account name
In the Your Twitter Account Name field, don't prefix your Twitter account name with the "@" symbol.

For example:
Incorrect: @modularmerchant
Correct: modularmerchant

After the necessary integration settings have been entered and saved, the Twitter Follow button 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 button on. This is done by adding a QuickCode Tag to the desired location in your store templates.
 
Displaying the Twitter Follow 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 Twitter Follow button can be added to any storefront page by adding the following QuickCode Tag to the desired location on that page's template: {TWITTER-FOLLOW-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 {TWITTER-FOLLOW-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 Twitter Follow button can be added to any page in your online store simply by:
  1. completing the necessary Twitter Integration settings, and then
  2. adding the {TWITTER-FOLLOW-BUTTON} 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 Follow button.
 
Customizing the {TWITTER-FOLLOW-BUTTON} QuickCode Tag

As mentioned above, the {TWITTER-FOLLOW-BUTTON} QuickCode Tag can be used as-is to display a Twitter Follow 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:

twitter follow button quickcode tag parameters
show_count
Displays the number of followers in a box next to the Follow button.
Possible values: true, false
Default: false

lang
Sets the language used by the button.
Possible values: en (English), fr (French), de (German), it (Italian), es (Spanish), ko (Korean), ja (Japanese)
Default: en

width
Determines the width of the area allocated to the button.
Possible values: pixel or percentage value
Default: Dynamically set by Twitter's script

align
Sets the horizontal alignment of the button.
Possible values: left, right
Default: right

show_name
Determines whether or not the Twitter account name is displayed in the button.
Possible values: true, false
Default: true

size
The size of the button can be set to either "medium", which is the default size, or "large", which is a larger version.
Possible values: medium, large
Default: medium

dnt
Twitter buttons on your site can help us tailor content and suggestions for Twitter users. If you want to opt-out of this feature, set the optional data-dnt parameter to be true.
Possible values: true, false
Default: false

reference
More details about each of the options available for use with the Follow button can be found on Twitter'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 "language" and "width" options, the QuickCode Tag would look something like this when using name/value pairs:

{TWITTER-FOLLOW-BUTTON:width=300px:lang=es}

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 "language" and "width" options, the QuickCode Tag would look something like this when using just values:

{TWITTER-FOLLOW-BUTTON:false:es:300px}

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: {TWITTER-FOLLOW-BUTTON:width=300px:timer=false}

Incorrect: {TWITTER-FOLLOW-BUTTON : width=300px : lang=es}

Incorrect: {TWITTER-FOLLOW-BUTTON: width = 300px : lang = es}

Using the examples above, it is possible to add a Twitter Follow button to any page of your storefront. The display of the button can also be customized by including additional parameters in the {TWITTER-FOLLOW-BUTTON} QuickCode Tag.
Powered by ModularKB