Share buttons, in two lines of HTML.

01 Load the script once, site-wide

Appearance → Theme File Editor, or better, a child theme. Add this to functions.php so the script loads on every page rather than being pasted into each post.

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'addtosite',
        '//static.addtosite.com/widget.js',
        array(),
        null,
        true
    );
});

02 Append the buttons to every post

Still in functions.php. Filtering the_content puts the buttons under the post body wherever your theme renders it, so a theme update cannot lose them.

add_filter('the_content', function ($content) {
    if (!is_singular('post') || !in_the_loop() || !is_main_query()) {
        return $content;
    }

    $kit = '<div class="ats_kit ats_kit_size_32"'
         . ' data-url="' . esc_url(get_permalink()) . '"'
         . ' data-title="' . esc_attr(get_the_title()) . '">'
         . '<a class="ats_btn_facebook"></a>'
         . '<a class="ats_btn_x"></a>'
         . '<a class="ats_btn_linkedin"></a>'
         . '<a class="ats_btn_email"></a>'
         . '<a class="ats_dd"></a>'
         . '</div>';

    return $content . $kit;
});

01 Load the script from your theme

Declare it as a library in THEME.libraries.yml, then attach it in THEME.info.yml so it loads on every page.

# THEME.libraries.yml
addtosite:
  js:
    //static.addtosite.com/widget.js: { type: external, attributes: { async: true } }

# THEME.info.yml
libraries:
  - THEME/addtosite

02 Put the buttons in the node template

Copy node.html.twig into your theme and add the kit after the content. Twig gives you the canonical URL and title, so each node shares itself rather than the front page.

{{ content }}

<div class="ats_kit ats_kit_size_32"
     data-url="{{ url('entity.node.canonical', {'node': node.id}) }}"
     data-title="{{ label|render|striptags|trim }}">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_email"></a>
  <a class="ats_dd"></a>
</div>

01 Create a Custom HTML module

Content → Site Modules → New → Custom. Switch the editor to code view before pasting, then paste the snippet from the configurator.

02 Place it where articles end

Set Position to a slot your template renders below the article — most templates offer one. On the Menu Assignment tab choose On all pages, or just the menu items you want.

01 Check which plan you are on

WordPress.com only runs custom JavaScript on the Business plan and above. On Free, Personal and Premium the script tag is stripped silently — the buttons simply never appear. The rest of this page covers both cases.

02 Business plan: paste the normal snippet

Add a Custom HTML block where the buttons belong and paste what the configurator gives you. Everything works: the More menu, the counters, the floating bar.

01 Create a Snippet

In the dashboard: Rules → Snippets → Create. Snippets run on the edge and can rewrite HTML without your origin server knowing anything about it.

02 Rewrite the HTML on its way through

HTMLRewriter streams the response, so this adds no meaningful latency and never buffers the page.

export default {
  async fetch(request) {
    const response = await fetch(request);

    // Only rewrite HTML; images and JSON pass straight through.
    if (!response.headers.get('content-type')?.includes('text/html')) {
      return response;
    }

    return new HTMLRewriter()
      .on('article', {
        element(el) {
          el.append(
            '<div class="ats_kit ats_kit_size_32">' +
              '<a class="ats_btn_facebook"></a>' +
              '<a class="ats_btn_x"></a>' +
              '<a class="ats_dd"></a>' +
            '</div>',
            { html: true }
          );
        },
      })
      .on('body', {
        element(el) {
          el.append('<script async src="//static.addtosite.com/widget.js"></' + 'script>', { html: true });
        },
      })
      .transform(response);
  },
};

01 Load the script from Code injection

Settings → Code injection → Site footer. This survives theme changes, which is what makes it the right place for it.

<script async src="//static.addtosite.com/widget.js"></script>

02 Place the buttons in the post template

Edit post.hbs in your theme and add the kit after {{content}}. Handlebars gives you the absolute URL, so posts share themselves rather than whatever page the reader happens to be on.

{{content}}

<div class="ats_kit ats_kit_size_32"
     data-url="{{url absolute="true"}}"
     data-title="{{title}}">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_email"></a>
  <a class="ats_dd"></a>
</div>

01 Load the script from the layout

Online Store → Themes → Edit code → layout/theme.liquid. Put it just before </body> so it never blocks the storefront rendering.

<script async src="//static.addtosite.com/widget.js"></script>

02 Add the buttons to the product template

Edit sections/main-product.liquid and place the kit where it belongs in the product layout. Liquid supplies the canonical product URL and title.

<div class="ats_kit ats_kit_size_32"
     data-url="{{ shop.url }}{{ product.url }}"
     data-title="{{ product.title | escape }}">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_pinterest"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_btn_email"></a>
  <a class="ats_dd"></a>
</div>

01 Load the script once

Project Settings → Custom Code → Footer Code. Loading it here rather than inside each embed means one request no matter how many kits the page has.

<script async src="//static.addtosite.com/widget.js"></script>

02 Drop in an Embed element

Add an Embed where the buttons belong and paste the markup. Leave the script out of the embed — the footer already loaded it.

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_email"></a>
  <a class="ats_dd"></a>
</div>

01 Open the theme HTML

Theme → the arrow beside Customize → Edit HTML. Take a backup first: Theme → Backup. Blogger gives you no undo.

02 Find the post body and add the kit after it

Search for data:post.body. Blogger themes are XML, so every tag must be closed and Blogger expressions supply the URL and title.

<data:post.body/>

<div class='ats_kit ats_kit_size_32'
     expr:data-url='data:post.url'
     expr:data-title='data:post.title'>
  <a class='ats_btn_facebook'/>
  <a class='ats_btn_x'/>
  <a class='ats_btn_email'/>
  <a class='ats_dd'/>
</div>

01 Edit the theme HTML

Blog settings → Edit theme → Edit HTML. Copy the whole thing somewhere safe first; Tumblr has no version history for themes.

02 Add the kit inside the post block

Find {block:Posts} and place the kit before {/block:Posts}. Tumblr fills in the permalink and title per post.

<div class="ats_kit ats_kit_size_32"
     data-url="{Permalink}"
     data-title="{PlaintextTitle}">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_email"></a>
  <a class="ats_dd"></a>
</div>