Sharing Customization
Floating Share Buttons
Vertical Share Bar
150
pixels from the top.<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
150
pixels from the top of the page, and offset from the left of the parent element by 100
pixels. The parent element needs to have a specified width, and the vertical share bar code should placed as a descendant of that element as in following example. The current page displays this style on devices with a wide enough screen.<div class="example_parent_element" style="margin:0 auto; width:900px;"> <div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="margin-left:-100px; top:150px;"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script> </div>
Horizontal Share Bar
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="bottom:0px; right:0px;"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
left
position value of 50%
and a negative margin-left
value that is equal to the total width of the icons. The width of these default icons can be calculated by multiplying the number of icons by 40. For example, 5 icons (multiplied by 40) gives a margin-left
value of -100px
.<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="bottom:0px; left:50%; margin-left:-100px;"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
Responsive Floating Share Buttons
<style type="text/css"> /* Hide AddToAny vertical share bar when screen is less than 980 pixels wide */ @media screen and (max-width: 980px) { .a2a_floating_style.a2a_vertical_style { display: none; } } </style>