{# do not remove classes "item" "facebook,instagram etc" and "count", it works
for realtime update counters!
strategy: static nums - 1 in a 24h grabber gets static num.
+every user open this page, it will receive updated via api's engine (3-60 sec !!!) #}
<div id="social-te"
style="display: none;"
class="hide js-social-te-config"
data-social="{
'facebook_user':'{{ social.fb is defined ? social.fb.login }}',
'facebook_token':'{{ social.fb is defined ? social.fb.token }}',
'instagram_user':'{{ social.in is defined ? social.in.login }}',
'instagram_token':'{{ social.in is defined ? social.in.token }}'
'pinterest_user':'{{ social.pn is defined ? social.pn.login }}',
'twitter_user':'{{ social.tw is defined ? social.tw.login }}',
}" {# use js to convert this string to object #}
></div>
{% if social.fb is defined %}
<div class="pics">
<a target="_blank" rel="noopener" href="{{ social.fb.link }}" class="fb item facebook">
<span class="img"></span>
<span class="num count">{{ social.fb.val }}</span>
</a>
</div>
{% endif %}
{% if social.tw is defined %}
<div class="pics">
<a target="_blank" rel="noopener" href="{{ social.tw.link }}" class="tw item twitter">
<span class="img"></span>
<span class="num count">{{ social.tw.val }}</span>
</a>
</div>
{% endif %}
{% if social.pn is defined %}
<div class="pics">{% set pinlink = social.pn.link ~ '/pins/' %}
<a target="_blank" rel="noopener" href="{{ pinlink | replace({ '//pins' : '/pins'}) }}" class="pn item pinterest">
<span class="img"></span>
<span class="num count">{{ social.pn.val }}</span>
</a>
</div>
{% endif %}
{% if social.in is defined %}
<div class="pics">
<a target="_blank" rel="noopener" href="{{ social.in.link }}" class="in item instagram">
<span class="img"></span>
<span class="num count">{{ social.in.val }}</span>
</a>
</div>
{% endif %}
{#total:<div class="total"></div>total followers AS IS 100000 100000000 etc (new)
<a title="Total Followers">
<div class="pics">
∑: <span class="num total_k">...</span>
</div>
</a>{# total followers like 529k or 8.5m etc, (new) #}