No-margin-for-errors first released this script as a jQuery plugin, then it was found at bloggerstop with easy-to-follow instructions to install on blogger blogs. The amazing Hot Orange blogger template has this functionality pre-installed.
Bloggerstop has adapted and modified the nm4e creation. Though we will modify it, we’ll reproduce it below as a salute and for comparison purposes.
1. In your template code, add the following right above </head>
<!--DRAG-TO-SHARE-STARTS-->
<link charset='utf-8' href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/prettysociable.css' media='screen' rel='stylesheet' type='text/css'/>
<script charset='utf-8' src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js' type='text/javascript'/>
<!--[if lte IE 6]><script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dd_belatedpng.js" type="text/javascript" charset="utf-8"/>
<![endif]-->
<script charset='utf-8' src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.prettysociable.js' type='text/javascript'/>
<!--DRAG-TO-SHARE-STOPS-http://bloggerstop.net-->
2. Above </body> paste the following:
<!--DRAG-TO-SHARE-STARTS-->
<script charset='utf-8' type='text/javascript'>
$.prettySociable();
</script>
<!--DRAG-TO-SHARE-STOPS-->
3. Save The Template.
The code for IE6 compatibility is unnecessary and it is commented out anyway (keep it if you want to support these laggards).
The main jquery library is hosted by Google. It’s best to use Google hosting wherever possible as it is superiour to most other options. We’ll load it with google.load.
load request: google.load("jquery", "1.3.2");
extras: uncompressed:true, e.g., google.load("jquery", "1.3.2", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
Finally, rather than mess arround with script hosting (which has usually a slight load time penalty) we’ll incorporate the script straight into the template, following this well-known trick from ConsumedConsumer:
<script type='text/javascript'>
//<![CDATA[
SCRIPT_CONTENT
//]]>
</script>
The contents of the CSS file can also be added in the template in the styling part. If you don’t know what that is, just look for code similar, and place before or after (but not in the middle of a declaration). The new instructions are:
0. Above </head> and immediately below some single } from another declaration (just to keep it civil), add the following:
html,body{
height:100%;
}
#ps_hover{
left:0;top:0;position:absolute;z-index:1000;
}
.ps_hd{
background: url(http://i45.tinypic.com/14smd86.jpg) top right no-repeat;padding:0 8px 0 0;
}
.ps_hd .ps_c{
background: url(http://i46.tinypic.com/2qjittd.jpg) top left no-repeat;
}
.ps_ft{
background: url(http://i50.tinypic.com/1i0rbp.jpg) top right no-repeat;padding:0 8px 0 0;
}
.ps_ft .ps_c{
background: url(http://i48.tinypic.com/ir1574.jpg) top left no-repeat;
}
.ps_bd{
background: url(http://i50.tinypic.com/2eknc5g.jpg) top right repeat-y;padding:0 8px 0 0;
}
.ps_bd .ps_c{
background: url(http://i49.tinypic.com/f0stjd.jpg) top left repeat-y;padding:0 0 0 8px;
}
.ps_bd .ps_s{
background:#fff;
}
.ps_hd,.ps_bd,.ps_ft{
position: relative;z-index:1000;
}
.ps_hd .ps_c,.ps_ft .ps_c{
font-size:1px;height:8px;
}
#ps_title{
background: url(http://i48.tinypic.com/2utro6d.jpg) top right no-repeat;padding:0 5px 0 0;color:#fff;font-size:10px;font-weight: normal;left:8px;position:absolute;top:0;z-index:999;
}
#ps_title .ps_tt_l{
background: url(http://i47.tinypic.com/2n81wt0.jpg) top left no-repeat;line-height:20px;padding:0 0 0 5px;}#ps_tooltip{font-size:10px;left:0;position:absolute;top:0;width:250px;z-index:1010;
}
#ps_tooltip p{
margin:0;
}
#ps_tooltip strong{
font-size:1.2em;
}
#ps_websites{
left:50%;position:absolute;top:50%;z-index:1005;
}
#ps_websites .ps_label{
color:#fff;display: none;font-size:2em;left:0;position:absolute;top:0;white-space: nowrap;
}
#ps_websites ul{
list-style: none;position: relative;z-index:1010;width:400px;
}
#ps_websites li{
display:block;float: left;margin:0 30px 40px 0;
}
#ps_websites a{
display:block;
}
#ps_overlay{
background:#000;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1005;
}
(it might work even added below, above the google.load statement)
1. In your template code, add the following right above </head>
<!--DRAG-TO-SHARE-STARTS-->
google.load("jquery", "1.3.2");
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
prettySociable plugin.
Version: 1.2
Description: Include this plugin in your webpage and let people
share your content like never before.
Website: http://no-margin-for-errors.com/projects/prettySociable/
Thank You:
Chris Wallace, for the nice icons
http://www.chris-wallace.com/2009/05/28/free-social-media-icons-socialize/
------------------------------------------------------------------------- */
(function($){$.prettySociable={version:1.0};$.prettySociable=function(settings){$.prettySociable.settings=jQuery.extend({animationSpeed:'fast',opacity:0.90,share_label:'Drag to share',label_position:'top',share_on_label:'Share on ',hideflash:false,hover_padding:0,websites:{facebook:{'active':true,'encode':true,'title':'Facebook','url':'http://www.facebook.com/share.php?u=','icon':'http://i50.tinypic.com/iliqvd.jpg','sizes':{'width':70,'height':70}},twitter:{'active':true,'encode':true,'title':'Twitter','url':'http://twitter.com/home?status=','icon':'http://i50.tinypic.com/2e49jzk.jpg','sizes':{'width':70,'height':70}},delicious:{'active':true,'encode':true,'title':'Delicious','url':'http://del.icio.us/post?url=','icon':'http://i48.tinypic.com/imhyf6.jpg','sizes':{'width':70,'height':70}},digg:{'active':true,'encode':true,'title':'Digg','url':'http://digg.com/submit?phase=2&url=','icon':'http://i46.tinypic.com/and00n.jpg','sizes':{'width':70,'height':70}},linkedin:{'active':true,'encode':true,'title':'LinkedIn','url':'http://www.linkedin.com/shareArticle?mini=true&ro=true&url=','icon':'http://i49.tinypic.com/14mdhlc.jpg','sizes':{'width':70,'height':70}},reddit:{'active':true,'encode':true,'title':'Reddit','url':'http://reddit.com/submit?url=','icon':'http://i47.tinypic.com/mq04x.jpg','sizes':{'width':70,'height':70}},stumbleupon:{'active':true,'encode':false,'title':'StumbleUpon','url':'http://stumbleupon.com/submit?url=','icon':'http://i49.tinypic.com/2w7e4pe.jpg','sizes':{'width':70,'height':70}},tumblr:{'active':true,'encode':true,'title':'tumblr','url':'http://www.tumblr.com/share?v=3&u=','icon':'http://i46.tinypic.com/mkgex.jpg','sizes':{'width':70,'height':70}}},urlshortener:{bitly:{'active':false}},tooltip:{offsetTop:0,offsetLeft:15},popup:{width:900,height:500},callback:function(){}},settings);var websites,settings=$.prettySociable.settings,show_timer,ps_hover;$.each(settings.websites,function(i){var preload=new Image();preload.src=this.icon;});$('a[rel^=prettySociable]').hover(function(){_self=this;_container=this;if($(_self).find('img').size()>0){_self=$(_self).find('img');}else if($.browser.msie){if($(_self).find('embed').size()>0){_self=$(_self).find('embed');$(_self).css({'display':'block'});}}else{if($(_self).find('object').size()>0){_self=$(_self).find('object');$(_self).css({'display':'block'});}}
$(_self).css({'cursor':'move','position':'relative','z-index':1005});offsetLeft=(parseFloat($(_self).css('borderLeftWidth')))?parseFloat($(_self).css('borderLeftWidth')):0;offsetTop=(parseFloat($(_self).css('borderTopWidth')))?parseFloat($(_self).css('borderTopWidth')):0;offsetLeft+=(parseFloat($(_self).css('paddingLeft')))?parseFloat($(_self).css('paddingLeft')):0;offsetTop+=(parseFloat($(_self).css('paddingTop')))?parseFloat($(_self).css('paddingTop')):0;ps_hover=$('<div id="ps_hover"> \
<div class="ps_hd"> \
<div class="ps_c"></div> \
</div> \
<div class="ps_bd"> \
<div class="ps_c"> \
<div class="ps_s"> \
</div> \
</div> \
</div> \
<div class="ps_ft"> \
<div class="ps_c"></div> \
</div> \
<div id="ps_title"> \
<div class="ps_tt_l"> \
'+settings.share_label+' \
</div> \
</div> \
</div>').css({'width':$(_self).width()+(settings.hover_padding+8)*2,'top':$(_self).position().top-settings.hover_padding-8+parseFloat($(_self).css('marginTop'))+offsetTop,'left':$(_self).position().left-settings.hover_padding-8+parseFloat($(_self).css('marginLeft'))+offsetLeft}).hide().insertAfter(_container).fadeIn(settings.animationSpeed);$('#ps_title').animate({top:-15},settings.animationSpeed);$(ps_hover).find('>.ps_bd .ps_s').height($(_self).height()+settings.hover_padding*2);fixCrappyBrowser('ps_hover',this);DragHandler.attach($(this)[0]);$(this)[0].dragBegin=function(e){_self=this;show_timer=window.setTimeout(function(){$('object,embed').css('visibility','hidden');$(_self).animate({'opacity':0},settings.animationSpeed);$(ps_hover).remove();overlay.show();tooltip.show(_self);tooltip.follow(e.mouseX,e.mouseY);sharing.show();},200);};$(this)[0].drag=function(e){tooltip.follow(e.mouseX,e.mouseY);}
$(this)[0].dragEnd=function(element,x,y){$('object,embed').css('visibility','visible');$(this).attr('style',0);overlay.hide();tooltip.checkCollision(element.mouseX,element.mouseY);};},function(){$(ps_hover).fadeOut(settings.animationSpeed,function(){$(this).remove()});}).click(function(){clearTimeout(show_timer);});var tooltip={show:function(caller){tooltip.link_to_share=($(caller).attr('href')!="#")?$(caller).attr('href'):location.href;if(settings.urlshortener.bitly.active){if(window.BitlyCB){BitlyCB.myShortenCallback=function(data){var result;for(var r in data.results){result=data.results[r];result['longUrl']=r;break;};tooltip.link_to_share=result['shortUrl'];};BitlyClient.shorten(tooltip.link_to_share,'BitlyCB.myShortenCallback');};};attributes=$(caller).attr('rel').split(';');for(var i=1;i<attributes.length;i++){attributes[i]=attributes[i].split(':');};description=($('meta[name=Description]').attr('content'))?$('meta[name=Description]').attr('content'):"";if(attributes.length==1){attributes[1]=['title',document.title];attributes[2]=['excerpt',description];}
ps_tooltip=$('<div id="ps_tooltip"> \
<div class="ps_hd"> \
<div class="ps_c"></div> \
</div> \
<div class="ps_bd"> \
<div class="ps_c"> \
<div class="ps_s"> \
</div> \
</div> \
</div> \
<div class="ps_ft"> \
<div class="ps_c"></div> \
</div> \
</div>').appendTo('body');$(ps_tooltip).find('.ps_s').html("<p><strong>"+attributes[1][1]+"</strong><br />"+attributes[2][1]+"</p>");fixCrappyBrowser('ps_tooltip');},checkCollision:function(x,y){collision="";scrollPos=_getScroll();$.each(websites,function(i){if((x+scrollPos.scrollLeft>$(this).offset().left&&x+scrollPos.scrollLeft<$(this).offset().left+$(this).width())&&(y+scrollPos.scrollTop>$(this).offset().top&&y+scrollPos.scrollTop<$(this).offset().top+$(this).height())){collision=$(this).find('a');}});if(collision!=""){$(collision).click();}
sharing.hide();$('#ps_tooltip').remove();},follow:function(x,y){scrollPos=_getScroll();settings.tooltip.offsetTop=(settings.tooltip.offsetTop)?settings.tooltip.offsetTop:0;settings.tooltip.offsetLeft=(settings.tooltip.offsetLeft)?settings.tooltip.offsetLeft:0;$('#ps_tooltip').css({'top':y+settings.tooltip.offsetTop+scrollPos.scrollTop,'left':x+settings.tooltip.offsetLeft+scrollPos.scrollLeft});}}
var sharing={show:function(){websites_container=$('<ul />');$.each(settings.websites,function(i){var _self=this;if(_self.active){link=$('<a />').attr({'href':'#'}).html('<img src="'+_self.icon+'" alt="'+_self.title+'" width="'+_self.sizes.width+'" height="'+_self.sizes.height+'" />').hover(function(){sharing.showTitle(_self.title,$(this).width(),$(this).position().left,$(this).height(),$(this).position().top);},function(){sharing.hideTitle();}).click(function(){shareURL=(_self.encode)?encodeURIComponent(tooltip.link_to_share):tooltip.link_to_share;popup=window.open(_self.url+shareURL,"prettySociable","location=0,status=0,scrollbars=1,width="+settings.popup.width+",height="+settings.popup.height);});$('<li>').append(link).appendTo(websites_container);};});$('<div id="ps_websites"><p class="ps_label"></p></div>').append(websites_container).appendTo('body');fixCrappyBrowser('ps_websites');scrollPos=_getScroll();$('#ps_websites').css({'top':$(window).height()/2-$('#ps_websites').height()/2+scrollPos.scrollTop,'left':$(window).width()/2-$('#ps_websites').width()/2+scrollPos.scrollLeft});websites=$.makeArray($('#ps_websites li'));},hide:function(){$('#ps_websites').fadeOut(settings.animationSpeed,function(){$(this).remove()});},showTitle:function(title,width,left,height,top){$label=$('#ps_websites .ps_label');$label.text(settings.share_on_label+title)
$label.css({'left':left-$label.width()/2+width/2,'opacity':0,'display':'block'}).stop().animate({'opacity':1,'top':top-height+45},settings.animationSpeed);},hideTitle:function(){$('#ps_websites .ps_label').stop().animate({'opacity':0,'top':10},settings.animationSpeed);}};var overlay={show:function(){$('<div id="ps_overlay" />').css('opacity',0).appendTo('body').height($(document).height()).fadeTo(settings.animationSpeed,settings.opacity);},hide:function(){$('#ps_overlay').fadeOut(settings.animationSpeed,function(){$(this).remove();});}}
var DragHandler={_oElem:null,attach:function(oElem){oElem.onmousedown=DragHandler._dragBegin;oElem.dragBegin=new Function();oElem.drag=new Function();oElem.dragEnd=new Function();return oElem;},_dragBegin:function(e){var oElem=DragHandler._oElem=this;if(isNaN(parseInt(oElem.style.left))){oElem.style.left='0px';}
if(isNaN(parseInt(oElem.style.top))){oElem.style.top='0px';}
var x=parseInt(oElem.style.left);var y=parseInt(oElem.style.top);e=e?e:window.event;oElem.mouseX=e.clientX;oElem.mouseY=e.clientY;oElem.dragBegin(oElem,x,y);document.onmousemove=DragHandler._drag;document.onmouseup=DragHandler._dragEnd;return false;},_drag:function(e){var oElem=DragHandler._oElem;var x=parseInt(oElem.style.left);var y=parseInt(oElem.style.top);e=e?e:window.event;oElem.style.left=x+(e.clientX-oElem.mouseX)+'px';oElem.style.top=y+(e.clientY-oElem.mouseY)+'px';oElem.mouseX=e.clientX;oElem.mouseY=e.clientY;oElem.drag(oElem,x,y);return false;},_dragEnd:function(){var oElem=DragHandler._oElem;var x=parseInt(oElem.style.left);var y=parseInt(oElem.style.top);oElem.dragEnd(oElem,x,y);document.onmousemove=null;document.onmouseup=null;DragHandler._oElem=null;}};function _getScroll(){if(self.pageYOffset){scrollTop=self.pageYOffset;scrollLeft=self.pageXOffset;}else if(document.documentElement&&document.documentElement.scrollTop){scrollTop=document.documentElement.scrollTop;scrollLeft=document.documentElement.scrollLeft;}else if(document.body){scrollTop=document.body.scrollTop;scrollLeft=document.body.scrollLeft;}
return{scrollTop:scrollTop,scrollLeft:scrollLeft};};function fixCrappyBrowser(element,caller){if($.browser.msie&&$.browser.version==6){if(typeof DD_belatedPNG!='undefined'){if(element=='ps_websites'){$('#'+element+' img').each(function(){DD_belatedPNG.fixPng($(this)[0]);});}else{DD_belatedPNG.fixPng($('#'+element+' .ps_hd .ps_c')[0]);DD_belatedPNG.fixPng($('#'+element+' .ps_hd')[0]);DD_belatedPNG.fixPng($('#'+element+' .ps_bd .ps_c')[0]);DD_belatedPNG.fixPng($('#'+element+' .ps_bd')[0]);DD_belatedPNG.fixPng($('#'+element+' .ps_ft .ps_c')[0]);DD_belatedPNG.fixPng($('#'+element+' .ps_ft')[0]);}};};}};})(jQuery);
//]]>
</script>
<!--DRAG-TO-SHARE
-STOPS-http://blogidol.ro-->
2. Above </body> paste the following:
<!--DRAG-TO-SHARE-STARTS-->
<script charset='utf-8' type='text/javascript'>
$.prettySociable();
</script>
<!--DRAG-TO-SHARE-STOPS-->
3. Save The Template.
To apply this effect to any element, anchor it and modify the anchor tag <a with rel="prettysociable". You’re welcome! 
Sources / More info: nm4e-pretty-sociable, bloggerstop-drag2share, scripts, Hot-Orange, ConsCons
No comments:
Post a Comment
Thank you for commenting and rest assured that any and all comments are welcome, whether positive or negative, constructive or distructive. Unfortunately, if you comment in this view I might not know about - please use the regular (Desktop) view.
I am using Disqus for commenting, but Blogger is not showing it so your comments may end up not being displayed - tell Google about it!