Это довольно крутой инструмент для обмена в социальных сетях, который имеет приятные CSS3-эффекты и прячется, когда вы просто не хотите больше его видеть! Он имеет довольно крутой эффект скольжения, его можно отрегулировать по высоте / ширине, и вы можете добавлять / удалять значки, которые вы хотите видеть / не хотите видеть. Если вы примете это решение как выбранное, сначала протестируйте его в IE, возможно, вам придется создать отдельную таблицу стилей IE. Это работает как красота в Firefox, Chrome и Safari! Наслаждайтесь! 🙂
Чтобы заставить его работать, вы должны включить jQuery скрипт jQuery Cookie, чтобы запомнить минимизированное состояние, скрипт общего доступа и немного CSS. Он берет заголовок текущей страницы и отправляет это плюс URL на выбранный вами социальный сайт.
Jquery
(function( $ ) { $(document).ready(function() { var url = window.location.href; var host = window.location.hostname; var title = $('title').text(); title = escape(title); //clean up unusual characters var twit = 'http://twitter.com/home?status='+title+'%20'+url; var facebook = 'http://www.facebook.com/sharer.php?u='+url var digg = 'http://digg.com/submit?phase=2&url='+url+'&title='+title; var stumbleupon = 'http://stumbleupon.com/submit?url='+url+'&title='+title; var buzz = 'http://www.google.com/reader/link?url='+url+'&title='+title+'&srcURL='+host; var delicious = 'http://del.icio.us/post?url='+url+'&title='+title; var tbar = ' Share '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; // Add the share tool bar. $('body').append(tbar); $('#socializethis').css({opacity: .7}); // hover. $('#socializethis').bind('mouseenter',function(){ $(this).animate({height:'35px', width:'260px', opacity: 1}, 300); $('#socializethis img').css('display', 'inline'); }); //leave $('#socializethis').bind('mouseleave',function(){ $(this).animate({ opacity: .7}, 300); }); // Click minimize $('#socializethis #minimize').click( function() { minshare(); $.cookie('minshare', '1'); }); if($.cookie('minshare') == 1){ minshare(); } function minshare(){ $('#socializethis').animate({height:'15px', width: '40px', opacity: .7}, 300); $('#socializethis img').css('display', 'none'); return false; } }); })(jQuery);(function( $ ) { $(document).ready(function() { var url = window.location.href; var host = window.location.hostname; var title = $('title').text(); title = escape(title); //clean up unusual characters var twit = 'http://twitter.com/home?status='+title+'%20'+url; var facebook = 'http://www.facebook.com/sharer.php?u='+url var digg = 'http://digg.com/submit?phase=2&url='+url+'&title='+title; var stumbleupon = 'http://stumbleupon.com/submit?url='+url+'&title='+title; var buzz = 'http://www.google.com/reader/link?url='+url+'&title='+title+'&srcURL='+host; var delicious = 'http://del.icio.us/post?url='+url+'&title='+title; var tbar = ' Share '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; // Add the share tool bar. $('body').append(tbar); $('#socializethis').css({opacity: .7}); // hover. $('#socializethis').bind('mouseenter',function(){ $(this).animate({height:'35px', width:'260px', opacity: 1}, 300); $('#socializethis img').css('display', 'inline'); }); //leave $('#socializethis').bind('mouseleave',function(){ $(this).animate({ opacity: .7}, 300); }); // Click minimize $('#socializethis #minimize').click( function() { minshare(); $.cookie('minshare', '1'); }); if($.cookie('minshare') == 1){ minshare(); } function minshare(){ $('#socializethis').animate({height:'15px', width: '40px', opacity: .7}, 300); $('#socializethis img').css('display', 'none'); return false; } }); })(jQuery);
HTML
CSS
#socializethis{ background:#CCC; border:solid 1px #666; border-width: 1px 0 0 1px; height:15px; width:260px; position:fixed; bottom:0; right:0; padding:2px 5px; overflow:hidden; /* CSS3 */ -webkit-border-top-left-radius: 12px; -moz-border-radius-topleft: 12px; border-top-left-radius: 12px; -moz-box-shadow: -3px -3px 3px rgba(0,0,0,0.5); -webkit-box-shadow: -3px -3px 3px rgba(0,0,0,0.5); box-shadow: -3px -3px 3px rgba(0,0,0,0.5); } #socializethis a{ float:left; width:32px; margin:3px 2px 2px 2px; padding:0; } #socializethis span{ float:left; margin:2px 3px; text-shadow: 1px 1px 1px #FFF; color:#444; font-size:12px; }
(function( $ ) { $(document).ready(function() { var url = window.location.href; var host = window.location.hostname; var title = $('title').text(); title = escape(title); //clean up unusual characters var twit = 'http://twitter.com/home?status='+title+'%20'+url; var facebook = 'http://www.facebook.com/sharer.php?u='+url var digg = 'http://digg.com/submit?phase=2&url='+url+'&title='+title; var stumbleupon = 'http://stumbleupon.com/submit?url='+url+'&title='+title; var buzz = 'http://www.google.com/reader/link?url='+url+'&title='+title+'&srcURL='+host; var delicious = 'http://del.icio.us/post?url='+url+'&title='+title; var tbar = ' Share '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; // Add the share tool bar. $('body').append(tbar); $('#socializethis').css({opacity: .7}); // hover. $('#socializethis').bind('mouseenter',function(){ $(this).animate({height:'35px', width:'260px', opacity: 1}, 300); $('#socializethis img').css('display', 'inline'); }); //leave $('#socializethis').bind('mouseleave',function(){ $(this).animate({ opacity: .7}, 300); }); // Click minimize $('#socializethis #minimize').click( function() { minshare(); $.cookie('minshare', '1'); }); if($.cookie('minshare') == 1){ minshare(); } function minshare(){ $('#socializethis').animate({height:'15px', width: '40px', opacity: .7}, 300); $('#socializethis img').css('display', 'none'); return false; } }); })(jQuery);(function( $ ) { $(document).ready(function() { var url = window.location.href; var host = window.location.hostname; var title = $('title').text(); title = escape(title); //clean up unusual characters var twit = 'http://twitter.com/home?status='+title+'%20'+url; var facebook = 'http://www.facebook.com/sharer.php?u='+url var digg = 'http://digg.com/submit?phase=2&url='+url+'&title='+title; var stumbleupon = 'http://stumbleupon.com/submit?url='+url+'&title='+title; var buzz = 'http://www.google.com/reader/link?url='+url+'&title='+title+'&srcURL='+host; var delicious = 'http://del.icio.us/post?url='+url+'&title='+title; var tbar = ' Share '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; tbar += ' '; // Add the share tool bar. $('body').append(tbar); $('#socializethis').css({opacity: .7}); // hover. $('#socializethis').bind('mouseenter',function(){ $(this).animate({height:'35px', width:'260px', opacity: 1}, 300); $('#socializethis img').css('display', 'inline'); }); //leave $('#socializethis').bind('mouseleave',function(){ $(this).animate({ opacity: .7}, 300); }); // Click minimize $('#socializethis #minimize').click( function() { minshare(); $.cookie('minshare', '1'); }); if($.cookie('minshare') == 1){ minshare(); } function minshare(){ $('#socializethis').animate({height:'15px', width: '40px', opacity: .7}, 300); $('#socializethis img').css('display', 'none'); return false; } }); })(jQuery);