Control Share Counter Placement and Design

Follow

You may have noticed that most instances of sharing buttons have a counter either very near or directly inside of the sharing buttons themselves.  Using this support document you can learn how to customize not only the look and feel of your counter, but also the placement.  You can place this counter anywhere on your site that you would like.  

There are two methods available through Po.st to create a separate sharing counter.  This can be accomplished through an HTML implementation, or through our Javascript API.  


HTML Example:

Setup using HTML coding

<span class="pw-box-counter" data-service="facebook" data url="http://google.com"></span>


Javascript Example:

<span id="mycounter"></span&gt;
<script>
window.postPlatform.createCounter('#mycomputer',{
service: 'facebook',
url: 'http://google.com'
});
</script>

Define the Look and Feel 

Either using the class name from the HTML example or the ID from the Javascript example you can write your own custom CSS to adjust the look and feel of your counter.  

NOTE: The box counter does not have any default styling.  To make the box counter visible you will need to increase the font size.  You can use something similar to:

<style>
.pw-box-counter {
font-size: 20px!important;
}
</style>

Determine Counter Placement

For the HTML implementation you can simply paste your span tag directly into the site where you would like the counter to appear.  If you are using the Javascript API the counter will appear inside of the CSS selector that you use inside of the script.  

 

If you do choose to place the share counter inside of your widget, it will automatically inherit the properties of that widget. 

<div class="pw-widget" data-url="http://google.com">
<a class="pw-button-facebook"></a>
<span class="pw-box-counter"></span> <!-- In this case the counter URL would be url = http://google.com -->
</div>
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk