Share Buttons - Customize All-Share Menu

Example of All-Share Menu:

Note: In all cases, a visitor's personal preferences are given higher priority.

Deny / Exclude Services

You can remove specific services from the All-Share menu by specifying the service code name of one or more services under blocklist.

To apply globally:

_SHR_SETTINGS_CUSTOM = {
  config: {
    apps: {
      share_buttons: {
        all_share: {
          blocklist: ['facebook', 'printfriendly'],
        },
      },
    },
  },
};

To apply to a specific share button instance:

<div class="shareaholic-canvas"
      data-app="share_buttons"
      data-app-id-name="post_below_content"
      data-app-config='{
         "all_share":{
           "blocklist":["facebook", "printfriendly"]
          }
      }'>
 </div>

Standalone All-Share button:

<button data-app="share_buttons"
        data-app-config='{
            "service":"all_share",
            "all_share":{
              "blocklist":["facebook", "printfriendly"]
            }
         }'>
   <img src="/assets/images/share-icon.png" alt="Share icon" aria-label="Share this page" />
</button>

Standalone All-Share button - Shareaholic on Desktop and Native Share Panel on Mobile:

<button data-app="share_buttons"
        data-app-config='{
            "service":"all_share",
            "use_native":true,
            "all_share":{
              "blocklist":["facebook", "printfriendly"]
            }
         }'>
   <img src="/assets/images/share-icon.png" alt="Share icon" aria-label="Share this page" />
</button>

Allow Only Specific Services

You can allow specific services for the All-Share menu by specifying the service code name of one or more services under allowlist. This is useful if very few services are desired. The priority order is respected.

To apply globally:

_SHR_SETTINGS_CUSTOM = {
  config: {
    apps: {
      share_buttons: {
        all_share: {
          allowlist: ['facebook', 'pinterest', 'copy_link', 'twitter', 'email_this'],
        },
      },
    },
  },
};

To apply to a specific share button instance:

<div class="shareaholic-canvas"
      data-app="share_buttons"
      data-app-id-name="post_below_content"
      data-app-config='{
         "all_share":{
           "allowlist":["facebook", "pinterest", "copy_link", "twitter", "email_this"]
          }
      }'>
 </div>

Standalone All-Share button:

<button data-app="share_buttons"
        data-app-config='{
            "service":"all_share",
            "all_share":{
              "allowlist":["facebook", "pinterest", "copy_link", "twitter", "email_this"]
            }
         }'>
   <img src="/assets/images/share-icon.png" alt="Share icon" aria-label="Share this page" />
</button>

Result:

Allow All Services but Prioritize Them

You can show all available services in the All-Share menu while prioritizing a few to make them appear at the top of the menu. Specify the service code name of one or more services followed by "*" under allowlist. The following will prioritize Facebook, Pinterest, and the rest ("*") will follow.

To apply globally:

_SHR_SETTINGS_CUSTOM = {
  config: {
    apps: {
      share_buttons: {
        all_share: {
          allowlist: ['facebook', 'pinterest', '*'],
        },
      },
    },
  },
};

To apply to a specific share button instance:

<div class="shareaholic-canvas"
      data-app="share_buttons"
      data-app-id-name="post_below_content"
      data-app-config='{
         "all_share":{
           "allowlist": ["facebook", "pinterest", "*"]
          }
      }'>
 </div>

Standalone All-Share button:

<button data-app="share_buttons"
        data-app-config='{
            "service":"all_share",
            "all_share":{
              "allowlist": ["facebook", "pinterest", "*"]
            }
         }'>
   <img src="/assets/images/share-icon.png" alt="Share icon" aria-label="Share this page" />
</button>

You can define an allowlist and blocklist at the same time. The following example would list Facebook and Pinterest followed by the rest, while not showing Digg, Reddit and Linkedin.

To apply globally:

_SHR_SETTINGS_CUSTOM = {
  config: {
    apps: {
      share_buttons: {
        all_share: {
          allowlist: ['facebook', 'pinterest', '*'],
          blocklist: ['digg', 'reddit', 'linkedin'],
        },
      },
    },
  },
};

To apply to a specific share button instance:

<div class="shareaholic-canvas"
      data-app="share_buttons"
      data-app-id-name="post_below_content"
      data-app-config='{
         "all_share":{
           "allowlist":["facebook", "pinterest", "*"],
           "blocklist":["printfriendly"]
          }
      }'>
 </div>