Twitter Cards

Commerce web stores support Twitter Cards which let shoppers attach media experiences to Tweets that link to your Product Detail Pages (PDPs).

Shoppers can Tweet your products by clicking the Twitter button on the PDP. A card visible to all of the shopper's followers is automatically added to their Tweet. This card can display item details including an image, a description, and two other key item details such as price, availability, sizes, or colors.

For more information about Twitter Cards, see Cards on Twitter's developer platform.

Twitter Cards Data Collection

The following property mappings for Twitter are defined in the SC.Shopping.Configuration.JS file in the ShoppingApplication@x.x.x module:

                     // [Twitter Product Card](https://dev.twitter.com/docs/cards/types/product-card)
      ,   'twitter:card': seo_type
      ,   'twitter:site': seo_twitter_site
      ,   'twitter:creator': seo_twitter_creator
      ,   'twitter:title': seo_title
      ,   'twitter:description': seo_twitter_description
      ,   'twitter:image:src': seo_image
      ,   'twitter:domain': seo_domain
      ,   'twitter:data1': seo_twitter_price
      ,   'twitter:label1': seo_twitter_label_one
      ,   'twitter:data2': seo_availability
      ,   'twitter:label2': seo_twitter_label_two

The following screenshot shows Twitter metadata included in the HTML header output of a PDP:

Configure Twitter Cards

To configure Twitter Cards properties:

Go to Commerce > Websites > Configuration.
Select your website and domain and click Configure.
Go to the Integrations tab and the Twitter subtab.
Configure the following properties as required:
- Enable - Check this box to enable the Twitter AddThis property.
- Twitter Popup Status - Select yes to enable the Twitter popup. Select no to disable it.
- Twitter Popup Resizeable - Select yes to make the Twitter popup resizable. Select no to restrict resizing.
- Twitter Popup Scrollbars - Select yes to show scrollbars on the Twitter popup menu. Select no to hide them.
- Twitter Popup Personalbar - Select yes to show a personal bar on the Twitter popup menu. Select no to hide it.
- Twitter Popup Directories - Select yes to show a directories bar on the Twitter popup menu. Select no to hide it.
- Twitter Popup Location - Select yes to show a location bar on the Twitter popup menu. Select no to hide it.
- Twitter Popup Toolbar - Select yes to show a toolbar on the Twitter popup menu. Select no to hide it.
- Twitter Popup Menubar - Select yes to show a menu bar on the Twitter popup menu. Select no to hide it.
- Twitter Popup Width - Enter the width (in pixels) of the Twitter popup.
- Twitter Popup Height - Enter the height (in pixels) of the Twitter popup.
- Twitter Popup Left - Enter the left offset (in pixels) of the Twitter popup.
- Twitter Popup Top - Enter the top offset (in pixels) of the Twitter popup.
- Twitter Popup Via - Enter the account of the original tweeter. For example: @MerchantName.
For more information about the Twitter configurable properties, see Twitter Subtab.
Click Save.

To configure Twitter Cards properties (SuiteCommerce Advanced pre-Vinson):

Create a custom ShoppingApplication@x.x.x module to update the SC.Shopping.Configuration.js file. See Create a Custom Module for instructions.

Note:
Do not edit the original SC.Shopping.Configuration.js file. See Best Practices for Customizing SCA for information and best practices for customizing JavaScript.

This task requires developer experience.

You can enable the Twitter button to be displayed on your PDPs. Other configuration options are available as shown in the following code snippet:

                        // @property {Object} twitter twitter Social Sharing Service
   ,   twitter: {
         enable: true
      ,   popupOptions: {
            status: 'no'
         ,   resizable: 'yes'
         ,   scrollbars: 'yes'
         ,   personalbar: 'no'
         ,   directories: 'no'
         ,   location: 'no'
         ,   toolbar: 'no'
         ,   menubar: 'no'
         ,   width: '632'
         ,   height: '250'
         ,   left: '0'
         ,   top: '0'
         }

In addition to the required card properties, Twitter Cards support two custom data types. By default, these are configured to return the item price and item availability. You should keep the default configuration for these properties.

To disable Twitter Product Cards, set the enable parameter to false in the twitter function. This removes the Twitter button from the PDP and disables Twitter functionality.
Save and deploy to your website. See Deploy SCA Customizations to NetSuite for more information.

For detailed instructions about creating a custom SuiteCommerce Advanced module, see Develop Your SCA Customization.

Twitter Cards Data Collection

Configure Twitter Cards

To configure Twitter Cards properties:

To configure Twitter Cards properties (SuiteCommerce Advanced pre-Vinson):

Related Topics