Social Count Total Using AddThis HTML Plugin

Our Blog uses AddThis to enable sharing of our posts. We want to track the total number of shares across all networks in one consolidated section, rather than displaying individual share counts for each network.

This is the current code snippet:

<div class="addthis_sharing_toolbox" style="text-align:center;display:block;">
        <a class=“at-share-btn at-svc-facebook”>… </a>
                <span class="at_flat_counter">50</span>
        <a class=“at-share-btn at-svc-twitter”>… </a>
                <span class="at_flat_counter">23</span>
        <a class=“at-share-btn at-svc-tumblr”>… </a>
                <span class="at_flat_counter">1</span>
        <a class=“at-share-btn at-svc-google_plus”>… </a>
                <span class="at_flat_counter">2</span>
        <a class=“at-share-btn at-svc-linkedin”>… </a>
                <span class="at_flat_counter">1</span>
    </div>
    

We aim to aggregate the numbers within the span tags and calculate the sum to display the total count in a single field. However, we are uncertain if this can be achieved.

After totaling the shares, we will utilize display: none; to hide the individual share counts provided by AddThis within the

<span class="at_flat_counter">1</span>

Answer №1

.at-svc-compact, .at_flat_counter { display:none !important; }
.at_flat_counter:last-child { display:inline-block !important; }

The first code line removes the AddThis icon and any associated total count or counter elements.

On the other hand, the second line specifically displays the AddThis total count element on the page without the AddThis logo, showcasing the total number of shares across various platforms to the user.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When a task hasn't been completed within a 3-second timeframe, execute a specific block of code

I need to incorporate a promise in my code to execute angular.bootstrap() in block 2 if 3 seconds have passed and angular.bootstrap() in block 1 has not been completed. I have two separate blocks of code: // block 1: Office.initialize = function (reason) ...

What is the best way to toggle an element's visibility using the select tag?

Let me break down the issue for you. In my HTML code, I have a select element that looks like this: <select id="seasons" multiple="multiple"> <option value="s01">Season 1</option> <option value="s02">Season 2</option> ...

What is the best way to extract information from a website and save it directly to Google Sheets? Specifically interested in current data from an environmental monitoring system

I have a unique environmental monitoring device that I acquired from a company that has since shut down. This device is equipped with an NDIR CO2 sensor, temperature, and relative humidity sensors. In addition, it features an ethernet port and a built-in w ...

Guide on changing JSON to HTML with a Groovy script

Looking to convert JSON to HTML using Groovy instead of Python due to running in Jenkins. Need help with Groovy code for the conversion. The JSON data : [ { "kubernetes.pod.name": "sds-endpoints-6-hn0fe2l", "container.id": "d19e001824978", "m ...

With a simple click of a button, I aim to have the ability to set a variable to true

I am looking to create a button that changes to true in the Script section. This will allow for a random number to be displayed in the paragraph element. <!doctype html> <html> <button id="button"> random number </button> ...

Make toggleClass show up smoothly without disappearing

I'm currently working with jQuery's toggleClass() method and I want to achieve a fade-in effect without the corresponding fade-out animation. Using the "duration" attribute applies the same duration for both actions, which is not what I want. I w ...

What is the best way to transfer data to JavaScript?

Being new to JQuery and JSP, I am looking for guidance. My requirement: I need to pass specific arguments from one JSP page to another JSP page and access these arguments within the JavaScript code on the receiving JSP page. Details: The arguments cons ...

When running through a loop, the JSON array data containing the merged arrays is not being shown as expected

After combining the two PHP arrays $pricelist and $product and encoding them with JSON, the resulting JSON array is as follows: The PHP arrays look like this: Array ( [0] => Array ( [PriceList] => Array ( ...

Loading WordPress post form fields using AJAX

I have set up a unique wordpress custom post type called "films" that includes taxonomies such as actor and director. Additionally, there is a custom field within the post type used to store the IMDb URL for each film. My goal is to retrieve movie details ...

Incorrect positioning of AnyChart within a reusable component (Angular version 9.1.3, Bootstrap 4.4.1, Anychart version 8.7.1) causing display issues on the DOM

I have created a test dashboard featuring two Bootstrap cards, each containing an Anychart column chart. The primary objective is to experiment with reusable components. For those interested, here is the code link on Stackblitz Upon running the code, my ...

Using callback functions in a JavaScript AJAX request

I am currently working on a function to handle an Ajax request with a callback. The main goal of this code is to send a request and display the response within a div element on my HTML page. However, I have been facing issues with the callback functionalit ...

What could be causing me to receive two responses from this AJAX request?

Can someone shed light on why I am receiving a double success response from this AJAX call using Bootstrap modals? Instead of getting test, I am seeing testtest. After inspecting the console, it appears that only one request is being made and I've c ...

Retrieve the shipping method following the updated_checkout event

My objective is to display a popup when no shipping methods are available during checkout. I am familiar with using the 'updated_checkout' trigger, but I am unsure how to determine from that trigger whether a shipping method is unavailable. This ...

I'm looking to transfer my stringified object into the HTML body. How can I achieve

When sending an HTML file to a client using the res.write() method, I also need to include an object within the HTML. However, when I stringify the object and add it along with the HTML, the JSON object ends up outside of the HTML structure. I require the ...

What is the proper method for storing user registration information in the database so that it can be easily retrieved and accessed later? (Error message)

User.cs: An error is occurring in the User class where 'User' is not a valid type in the context of TestBlazor project. It happened when attempting to save user registration data. using System; using System.Collections.Generic; using S ...

Utilize jQuery AJAX to showcase JSON data by handling the response of a POST request sent to a JSP

Displaying JSON Data Using JavaScript Code $(document).ready(function(){ $("button").click(function(){ $.ajax({ url:"jsonCreation.jsp", type:'post', dataType: 'json', ...

Tips for adding a personalized close button to a Bootstrap modal

I need help with a Bootstrap modal in my project that has a close button positioned at the top right corner. I've used CSS to position the button, but it's not staying in one place consistently despite applying absolute positioning. I've tri ...

Arrows on the button are unresponsive and there seems to be an incorrect number of

I've been working on a project by combining various examples I found online. I'm puzzled as to why it's displaying all the buttons at once instead of just one per page, and why the number of visible buttons decreases by one with each right c ...

Tips for transferring the input text box value to angularjs when clicking on the text box

Here is the HTML code snippet: <tr ng-repeat="c in client"> <td><input type="text" id="id" value="{{c.id}}" onclick="display();"></input></td> <td><input type="text" value="{{c.fname}}"></td> </ ...

Enhance Your HTML Table Layout with Dual Column Borders

Can I increase the space between columns while still keeping borders on both sides? Check out the illustration below: ...