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

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

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


 
Displaying the Twitter Tweet 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 Tweet button can be added to any storefront page by adding the following QuickCode Tag to the desired location on that page's template: {TWITTER-TWEET-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-TWEET-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 Tweet button can be added to any page in your online store simply by:
  1. adding the {TWITTER-TWEET-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 Tweet button.
 
Customizing the {TWITTER-TWEET-BUTTON} QuickCode Tag

As mentioned above, the {TWITTER-TWEET-BUTTON} QuickCode Tag can be used as-is to display a Tweet 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 tweet button quickcode tag parameters
url
URL of the page to share.
Possible values: Any URL
Default: Webpage containing the button

via
Screen name of the user to attribute the Tweet to.
Possible values: Any Twitter screen name
Default: User's Twitter screen name

text
Default Tweet text.
Possible values: Any text, with spaces replaced by hyphens. The hyphens will be changed back to spaces when the Tweet text is rendered in the web browser.
(See the "No Spaces in QuickCode Tag Parameters" instructions below for more details.)
Default: Content of the page's <title> tag

related
Related Twitter accounts. Using the related field you can suggest accounts for a user to follow once they have sent a Tweet using your Tweet Button. These suggested accounts and their basic information are shown on the last page of the Share Box flow.
Possible values: Any Twitter screen name
Default: none

count
Determines whether or not the count box is displayed, and where.
Possible values: none, horizontal, vertical
Default: horizontal

lang
The language applied to the Tweet button.
Possible values: en (English), fr (French), de (German), it (Italian), es (Spanish), ko (Korean), ja (Japanese)
Default: en

counturl
URL to which your shared URL resolves.
Possible values: Any URL
Default: none

hashtags
This will create a Tweet button that specifies a hashtag within the text and the button.
Possible values: Any text (exclude the "#" character)
Default: none

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

no spaces in quickcode tag parameters
Remember, QuickCode Tags cannot include spaces.

This means, if you're using the "text" parameter to auto-fill the text of a Tweet, then the value of the "text" parameter in the QuickCode Tag cannot contain spaces.

Instead, use hyphens where you would like spaces to be, and then those hyphen will be replaced with spaces when the Tweet is created.

For example:
Correct: {TWITTER-TWEET-BUTTON:text=sample-text-with-spaces}
Incorrect: {TWITTER-TWEET-BUTTON:text=sample text with spaces}

The sample correct QuickCode Tag above would display the following Tweet button in the storefront:


reference
More details about each of the options available for use with the Tweet 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 "text" and "via" options, the QuickCode Tag would look something like this when using name/value pairs:

{TWITTER-TWEET-BUTTON:text=my-first-tweet:via=myaccount}

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

{TWITTER-TWEET-BUTTON:http://www.example.com/page.html:myaccount:my-first-tweet}

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-TWEET-BUTTON:via=myaccount:count=none}

Incorrect: {TWITTER-TWEET-BUTTON : via=myaccount : count=none}

Incorrect: {TWITTER-TWEET-BUTTON: via = myaccount : count = none}

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