Customize the verb text on the "rectangle" Share Button theme

Follow

IN THIS ARTICLE

Some of our Share Button themes (Classic, Flat Square, and Sexy) can be configured to have a rectangular shape. These rectangular Share Buttons already have the verbs "Tweet", "Pin", or "Share". 

In some cases, you may want to customize the verb to reflect the personality and/or language on your site. You can do so with some JavaScript. 

share-rectangle_buttons.png

How to customize a single rectangle Share Button with a custom verb text

  1. Add the following JavaScript to your site's </head> section:
    <script>
    els = document.querySelectorAll('.shareaholic-service-twitter + .shr-share-button-verb');
    for (var i = 0; i < els.length; i++) {
    els[i].innerText = 'INSERT CUSTOM VERB HERE';
    }
    </script>
  2. Replace the ".shareaholic-service-twitter" with the share button service you would like to customize. For example, if you want to customize the Facebook button verb text, you would use  ".shareaholic-service-facebook".
    <script>
    els = document.querySelectorAll('.shareaholic-service-facebook + .shr-share-button-verb');
    for (var i = 0; i < els.length; i++) {
    els[i].innerText = 'INSERT CUSTOM VERB HERE';
    }
    </script>
  3. Replace the text 'INSERT CUSTOM VERB HERE' with the desired verb text. Note that if the length of the word is too long, the text will not fit into the box.

How to customize all rectangle Share Buttons with the same custom verb text

  1. Add the following JavaScript to your site's </head> section:
    <script>
    els = document.querySelectorAll('.shr-share-button-verb');
    for (var i = 0; i < els.length; i++) {
    els[i].innerText = 'INSERT CUSTOM VERB HERE';
    }
    </script>
  2. Replace the text 'INSERT CUSTOM VERB HERE' with the desired verb text. Note: if the length of the word is too long, the text will not fit into the box.

 

Original:

default-share-buttons.png

Custom w/ code:

custom-share-buttons.png