Skip to content

Social buttons


This document describes how social buttons can be configured and customized for web application


To configure social buttons you need to open commerce manager and go to settings. Select Application/settings tab. The image below highlight system settings that are used for social buttons:

There are two settings for this. One is called ShareButtonsHtml which contains plain html for social share buttons. The sample above was generated using API. So you can easily customize it and simply paste the generated html. To access the code in front end using mvc razor view engine you can use the code below:

  var firstOrDefault = SettingsHelper.GetSettings("ShareButtonsHtml").FirstOrDefault();
  if (firstOrDefault != null)

The other setting is for Follow us links. It is a collection of settings containing serviceName:serviceId as can be seen in image.

The follow us links can be generated using addThis smart layers as shown in sample below: (More information for customization atВ

<script type="text/javascript">
  // this will be called once all Smart Layers have been rendered
  var callback = function (smartlayer) {
    // remove all layers currently on the page

    var layers = {
      'theme': 'transparent',
      'follow': {
        'services': [],
        //'title': 'Follow',
        'postFollowTitle': 'Thanks for following!',
        'postFollowRecommendedMsg': 'Recommended for you',
        'mobile': true,
        'theme': 'transparent'
    @foreach (var follow in @SettingsHelper.GetSettings("FollowServices"))
      var followStrSplit = follow.ToString().Split(new[] { ":" }, StringSplitOptions.RemoveEmptyEntries);
        @if (followStrSplit.Length > 0)
          @:'service': '@followStrSplit[0]'
        @if (followStrSplit.Length > 1)
          @:, 'id': '@followStrSplit[1]'
        @if (followStrSplit.Length > 2)
          @:, 'usertype': '@followStrSplit[2]'
В В В В В В В В В В В В В 
    // now render Recommended and What's Next Layers

    'theme': 'transparent',
    'share': {}
  }, callback);

Last update: June 18, 2020