AddThis Share Button - auto resizing capability

Author
APGvNext Sam
vNext Dev
  • Total Posts : 13240
  • Joined: 2001/05/23 00:00:00
  • Status: offline
2013/02/17 23:16:28 (permalink) Customization
0

AddThis Share Button - auto resizing capability

We use AddThis social media sharing script in the software to make sharing forum and blog posts on social media sites easy. All you have to do is get your script from AddThis and enter a short HTML code AddThis generates for you in the AdminCP.
 
Addthis Script URL to put in your AdminCP:

 
You can then use the following code in the AdminCP to show either a floating share bar or share buttons based on your users' browser size.
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="top:235px; border:1px solid #DADADA" [0]>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
</div>
<div class="addthis_toolbox addthis_default_style" [0]>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript">
var _share_mainOffset_left = $('#main').offset().left;
var _offset_limit = 72;
if (_share_mainOffset_left > _offset_limit){
var $floating = $('.addthis_floating_style');
var _share_floatingOffset_left = $floating.offset().left;

$floating.css('margin-left', - (_share_floatingOffset_left - _share_mainOffset_left + _offset_limit));
$('.addthis_default_style').remove();
} else {
$('.addthis_floating_style').remove();
}
</script>

 
If you prefer the more compact button style (without counter), use the following:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="top:275px; border:1px solid #DADADA" [0]>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_compact"></a>
</div>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" [0]>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">
var _share_mainOffset_left = $('#main').offset().left;
var _offset_limit = 50;
if (_share_mainOffset_left > _offset_limit){
var $floating = $('.addthis_floating_style');
var _share_floatingOffset_left = $floating.offset().left;

$floating.css('margin-left', - (_share_floatingOffset_left - _share_mainOffset_left + _offset_limit));
$('.addthis_default_style').remove();
} else {
$('.addthis_floating_style').remove();
}
</script>

 
You can find the list of supported addthis.com button codes (Service Codes) here.

post edited by APGvNext (Sam) - 2013/03/11 23:38:02

Attached Image(s)

#1

0 Replies Related Threads

    Jump to:
    © 2021 APG vNext Commercial Version 5.5