Home
ShareBox
ShareBox
AddInto ShareBox - Examples of use
AddInto ShareBox allows you to use individually services on your website. In any case, you have to place this code into your page, preferably just before the closing tag </body><script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
Simple button
Show code 
: Default button
: Default button <a href="javascript:;" onmouseover="ai2display_bkmk(this, '', '', '');" onmouseout="ai2close_bkmk();"><img src="http://www.addinto.com/logos/logo5_en.gif" alt="AddInto" border="0" /></a>
<a href="javascript:;" onmouseover="ai2display_bkmk(this, '', '', '');" onmouseout="ai2close_bkmk();">Share</a>
Show code
: Show the dropdown menu when the user clicks the button
: Show the dropdown menu when the user clicks the button <a href="javascript:;" onclick="ai2display_bkmk(this, '', '', '');" onmouseout="ai2close_bkmk();"><img src="http://www.addinto.com/logos/logo5_en.gif" alt="AddInto" border="0" /></a>
Show code
: Show the box when the user clicks the button (without dropdown menu)
: Show the box when the user clicks the button (without dropdown menu) <a href="javascript:;" onclick="ai2display_bkmk(this, 'bkmk', '', '');"><img src="http://www.addinto.com/logos/logo5_en.gif" alt="AddInto" border="0" /></a>
Show code
: Tell a friend button
: Tell a friend button <a href="javascript:;" onclick="ai2display_bkmk(this, 'email','', '');"><img src="http://www.addinto.com/ai/im/email.png" alt="AddInto" border="0" /></a>
Show code
: Bookmark button
: Bookmark button <a href="javascript:;" onclick="ai2display_bkmk(this, 'bookmark', '', '');"><img src="http://www.addinto.com/ai/im/bookmark.png" alt="AddInto" border="0" /></a>
Show code
: Print button
: Print button <a href="javascript:;" onclick="ai2display_bkmk(this, 'print', '', '');"><img src="http://www.addinto.com/ai/im/print.png" alt="AddInto" border="0" /></a>
Sharebox Default styling.
Use this container:
and inside add links to the services you want to use, like that:
<div class="addinto_sharebox addinto_sharebox_default">
</div>
</div>
and inside add links to the services you want to use, like that:
<a class="addinto_button_service"></a>
or:
<a class="addinto_button_service" title="Service"></a>
or:
<a class="addinto_button_service">Service</a>
Show code
Basic example.
Basic example. <div class="addinto_sharebox addinto_sharebox_default">
<a class="addinto_button_email"></a>
<a class="addinto_button_print"></a>
<a class="addinto_button_bookmark"></a>
<a class="addinto_button_facebook"></a>
<a class="addinto_button_twitter"></a>
<a class="addinto_button_google_plus"></a>
<a class="addinto_button_separator"></a>
<a class="addinto_button_more_dd"></a>
</div>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
<a class="addinto_button_email"></a>
<a class="addinto_button_print"></a>
<a class="addinto_button_bookmark"></a>
<a class="addinto_button_facebook"></a>
<a class="addinto_button_twitter"></a>
<a class="addinto_button_google_plus"></a>
<a class="addinto_button_separator"></a>
<a class="addinto_button_more_dd"></a>
</div>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
Show code
Add text.
Add text. <div class="addinto_sharebox addinto_sharebox_default">
<a class="addinto_button_facebook">Facebook</a>
<a class="addinto_button_twitter">Twitter</a>
<a class="addinto_button_google_plus">Google+</a>
<a class="addinto_button_separator"></a>
<a class="addinto_button_more_dd">Share</a>
</div>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
<a class="addinto_button_facebook">Facebook</a>
<a class="addinto_button_twitter">Twitter</a>
<a class="addinto_button_google_plus">Google+</a>
<a class="addinto_button_separator"></a>
<a class="addinto_button_more_dd">Share</a>
</div>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
Show code
Customize title and url to be shared
Customize title and url to be shared <div class="addinto_sharebox addinto_sharebox_default" addinto:title="Example" addinto:url="http://www.example.com">
<a class="addinto_button_bookmark"></a>
<a class="addinto_button_print"></a>
<a class="addinto_button_google"></a>
<a class="addinto_button_separator"></a>
<a class="addinto_button_more_dd">Share</a>
</div>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
<a class="addinto_button_bookmark"></a>
<a class="addinto_button_print"></a>
<a class="addinto_button_google"></a>
<a class="addinto_button_separator"></a>
<a class="addinto_button_more_dd">Share</a>
</div>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
Custom styling
To customize buttons with your own icons and styles,
you must remove the class "addinto_sharebox_default" from the container, like that:
and inside add links to the services you want to use on your website (look at the example below).
you must remove the class "addinto_sharebox_default" from the container, like that:
<div class="addinto_sharebox">
</div>
</div>
and inside add links to the services you want to use on your website (look at the example below).
Show code
Larger icons
Larger icons
CSS:
.addinto_sharebox .social_buttons a {
width: 32px;
height: 32px;
}
.addinto_sharebox .social_buttons a img {
opacity: 0.8;
border:0 none;
}
.addinto_sharebox .social_buttons a:hover img {
opacity: 1.0;
}
HTML:
width: 32px;
height: 32px;
}
.addinto_sharebox .social_buttons a img {
opacity: 0.8;
border:0 none;
}
.addinto_sharebox .social_buttons a:hover img {
opacity: 1.0;
}
<div class="addinto_sharebox">
<div class="social_buttons">
<a class="addinto_button_email"><img src="/imgs/social_imgs/email.png" alt="Email" /></a>
<a class="addinto_button_facebook"><img src="/imgs/social_imgs/facebook.png" alt="Facebook" /></a>
<a class="addinto_button_twitter"><img src="/imgs/social_imgs/twitter.png" alt="Twitter" /></a>
<a class="addinto_button_delicious"><img src="/imgs/social_imgs/delicious.png" alt="Delicious" /></a>
<a class="addinto_button_google_plus"><img src="/imgs/social_imgs/google_plus.png" alt="Google+" /></a>
<a class="addinto_button_more_dd"><img src="/imgs/social_imgs/ai2_32x32.png" alt="More" /></a>
</div>
</div>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
<div class="social_buttons">
<a class="addinto_button_email"><img src="/imgs/social_imgs/email.png" alt="Email" /></a>
<a class="addinto_button_facebook"><img src="/imgs/social_imgs/facebook.png" alt="Facebook" /></a>
<a class="addinto_button_twitter"><img src="/imgs/social_imgs/twitter.png" alt="Twitter" /></a>
<a class="addinto_button_delicious"><img src="/imgs/social_imgs/delicious.png" alt="Delicious" /></a>
<a class="addinto_button_google_plus"><img src="/imgs/social_imgs/google_plus.png" alt="Google+" /></a>
<a class="addinto_button_more_dd"><img src="/imgs/social_imgs/ai2_32x32.png" alt="More" /></a>
</div>
</div>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
Show code
Fancy ShareBox
Fancy ShareBox
CSS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$.fn.fancysharebox = function(){
var element = this;
var i = 10;
var j = 0;
$(element).find("li").each(function(){
$(this).css("z-index", i)
if (j>0)
$(this).css("left", j * 24 + 100 + "px");
i = i - 1;
j = j + 1;
});
}
})(jQuery);
$(document).ready(function(){
$("#addinto_fancy_sharebox").fancysharebox();
});
</script>
<ul id="addinto_fancy_sharebox" class="addinto_fancy_sharebox">
<div class="addinto_sharebox">
<li><img src="images/sharethis.png" alt="Share this" /></li>
<li><a class="addinto_button_digg" href=""><img src="images/digg_48.png" alt="Submit to Digg" /></a></li>
<li><a class="addinto_button_stumbleupon" href=""><img src="images/sumbleupon_48.png" alt="Submit to StumbleUpon" /></a></li>
<li><a class="addinto_button_delicious" href=""><img src="images/delicious_48.png" alt="Submit to Delicious" /></a></li>
<li><a class="addinto_button_technorati" href=""><img src="images/technorati_48.png" alt="Submit to Technorati" /></a></li>
<li><a class="addinto_button_reddit" href=""><img src="images/reddit_48.png" alt="Submit to Reddit" /></a></li>
<li><a class="addinto_button_mixx" href=""><img src="images/mixx_48.png" alt="Submit to Mixx" /></a></li>
</div>
</ul>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
.addinto_fancy_sharebox {
margin:0;
padding:0;
list-style:none;
position:relative;
display:block;
}
.addinto_fancy_sharebox li {
float:left;
margin:0 0 0 0;
padding:0px;
position:absolute;
}
.addinto_fancy_sharebox li a {
margin:0 0 0 -24px;
display:block;
}
.addinto_fancy_sharebox li a:hover {
margin:0 0 0 -8px;
}
.addinto_fancy_sharebox li img {
border:none;
}
HTML:
margin:0;
padding:0;
list-style:none;
position:relative;
display:block;
}
.addinto_fancy_sharebox li {
float:left;
margin:0 0 0 0;
padding:0px;
position:absolute;
}
.addinto_fancy_sharebox li a {
margin:0 0 0 -24px;
display:block;
}
.addinto_fancy_sharebox li a:hover {
margin:0 0 0 -8px;
}
.addinto_fancy_sharebox li img {
border:none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$.fn.fancysharebox = function(){
var element = this;
var i = 10;
var j = 0;
$(element).find("li").each(function(){
$(this).css("z-index", i)
if (j>0)
$(this).css("left", j * 24 + 100 + "px");
i = i - 1;
j = j + 1;
});
}
})(jQuery);
$(document).ready(function(){
$("#addinto_fancy_sharebox").fancysharebox();
});
</script>
<ul id="addinto_fancy_sharebox" class="addinto_fancy_sharebox">
<div class="addinto_sharebox">
<li><img src="images/sharethis.png" alt="Share this" /></li>
<li><a class="addinto_button_digg" href=""><img src="images/digg_48.png" alt="Submit to Digg" /></a></li>
<li><a class="addinto_button_stumbleupon" href=""><img src="images/sumbleupon_48.png" alt="Submit to StumbleUpon" /></a></li>
<li><a class="addinto_button_delicious" href=""><img src="images/delicious_48.png" alt="Submit to Delicious" /></a></li>
<li><a class="addinto_button_technorati" href=""><img src="images/technorati_48.png" alt="Submit to Technorati" /></a></li>
<li><a class="addinto_button_reddit" href=""><img src="images/reddit_48.png" alt="Submit to Reddit" /></a></li>
<li><a class="addinto_button_mixx" href=""><img src="images/mixx_48.png" alt="Submit to Mixx" /></a></li>
</div>
</ul>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
Show code
Sexy Bookmark Style
Sexy Bookmark Style
CSS:
<ul class="addinto_sexy_bookmarks" id="text">
<div class="addinto_sharebox">
<li><a class="addinto_button_email" href="">Email</a></li>
<li><a class="addinto_button_twitter" href="">Twitter</a></li>
<li><a class="addinto_button_facebook" href="">Facebook</a></li>
<li><a class="addinto_button_stumbleupon" href="">StumbleUpon</a></li>
<li><a class="addinto_button_digg" href="">Digg</a></li>
</div>
</ul>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>
.addinto_sexy_bookmarks{
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.addinto_sexy_bookmarks a{
overflow:hidden;
width:75px;
height:30px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url("share-sprite.png") no-repeat;
}
a.addinto_button_stumbleupon{background-position:-210px -40px;}
a.addinto_button_twitter{background-position:-140px -40px;}
a.addinto_button_email{background-position:0 -40px;}
a.addinto_button_digg{background-position:-280px -40px;}
a.addinto_button_facebook{background-position:-350px -40px; margin-right:0;}
a.addinto_button_email:hover{background-position:0 1px;}
a.addinto_button_twitter:hover{background-position:-140px 1px;}
a.addinto_button_stumbleupon:hover{background-position:-210px 1px;}
a.addinto_button_digg:hover{background-position:-280px 1px;}
a.addinto_button_facebook:hover{background-position:-350px 1px;}
#text{
margin-top:3em;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}
HTML:
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.addinto_sexy_bookmarks a{
overflow:hidden;
width:75px;
height:30px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url("share-sprite.png") no-repeat;
}
a.addinto_button_stumbleupon{background-position:-210px -40px;}
a.addinto_button_twitter{background-position:-140px -40px;}
a.addinto_button_email{background-position:0 -40px;}
a.addinto_button_digg{background-position:-280px -40px;}
a.addinto_button_facebook{background-position:-350px -40px; margin-right:0;}
a.addinto_button_email:hover{background-position:0 1px;}
a.addinto_button_twitter:hover{background-position:-140px 1px;}
a.addinto_button_stumbleupon:hover{background-position:-210px 1px;}
a.addinto_button_digg:hover{background-position:-280px 1px;}
a.addinto_button_facebook:hover{background-position:-350px 1px;}
#text{
margin-top:3em;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}
<ul class="addinto_sexy_bookmarks" id="text">
<div class="addinto_sharebox">
<li><a class="addinto_button_email" href="">Email</a></li>
<li><a class="addinto_button_twitter" href="">Twitter</a></li>
<li><a class="addinto_button_facebook" href="">Facebook</a></li>
<li><a class="addinto_button_stumbleupon" href="">StumbleUpon</a></li>
<li><a class="addinto_button_digg" href="">Digg</a></li>
</div>
</ul>
<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>