prettySociable documentation
Below you can find the complete documentation for prettySociable.
If you are having problems with prettySociable and need support, please come and ask your questions in our forums.
If you got here by mistake, don’t leave! The main prettySociable page can be found here.
If you we’re not looking for prettySociable, well too bad, but you can still read my blog here.
Scripts needed
First include the jQuery library, prettySociable javascript and the prettySociable CSS in the head of the page(s) where you want to use prettySociable.
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.prettySociable.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettySociable.css" type="text/css" media="screen" charset="utf-8" />
To support transparency in IE6, simply add the following line (the script is included in the package)
<!--[if lte IE 6]><script src="js/DD_belatedPNG.js" type="text/javascript" charset="utf-8"></script><![endif]-->
Then, initialize prettySociable. Put the following code before the closing tag of your body (</body>)
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$.prettySociable();
});
</script>
And…you’re set!
Hooks
Just add rel=”prettySociable” to the links you want prettySociable applied to. Refer to the demos on the main project page for all the possibilities.
Disable websites
To disable websites you don’t want to activate sharing for, simply add the following line(s) after prettySociable initialization depending on which service you want to disable.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$.prettySociable();
$.prettySociable.settings.websites.facebook.active=false;
$.prettySociable.settings.websites.twitter.active=false;
$.prettySociable.settings.websites.delicious.active=false;
$.prettySociable.settings.websites.digg.active=false;
$.prettySociable.settings.websites.linkedin.active=false;
$.prettySociable.settings.websites.reddit.active=false;
$.prettySociable.settings.websites.stumbleupon.active=false;
$.prettySociable.settings.websites.tumblr.active=false;
});
</script>
bit.ly support
To use bit.ly as the url shortener server, you first need to get an API key, once you’re registered and signed in, you can get your API key here: http://bit.ly/account/your_api_key
Then add the following script in the head of your page, adding the information you got from bit.ly
<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&login=YOUR_BITLY_USERNAME&apiKey=YOUR_BITLY_API_KEY"></script>
And finally activate bit.ly after you initialized prettySociable
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$.prettySociable();
$.prettySociable.settings.urlshortener.bitly.active = true;
});
</script>
Full customization
To customize prettyPhoto, you can pass the following parameters
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$.prettySociable({
animationSpeed: 'fast', /* fast/slow/normal */
opacity: 0.90, /* Value between 0 and 1 */
share_label: 'Drag to share', /* Text displayed when a user rollover an item */
share_on_label: 'Share on ', /* Text displayed when a user rollover a website to share */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettySociable */
hover_padding: 0,
websites: {
facebook : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Facebook',
'url': 'http://www.facebook.com/share.php?u=',
'icon':'images/prettySociable/large_icons/facebook.png',
'sizes':{'width':70,'height':70}
},
twitter : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Twitter',
'url': 'http://twitter.com/home?status=',
'icon':'images/prettySociable/large_icons/twitter.png',
'sizes':{'width':70,'height':70}
},
delicious : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Delicious',
'url': 'http://del.icio.us/post?url=',
'icon':'images/prettySociable/large_icons/delicious.png',
'sizes':{'width':70,'height':70}
},
digg : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Digg',
'url': 'http://digg.com/submit?phase=2&url=',
'icon':'images/prettySociable/large_icons/digg.png',
'sizes':{'width':70,'height':70}
},
linkedin : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'LinkedIn',
'url': 'http://www.linkedin.com/shareArticle?mini=true&ro=true&url=',
'icon':'images/prettySociable/large_icons/linkedin.png',
'sizes':{'width':70,'height':70}
},
reddit : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Reddit',
'url': 'http://reddit.com/submit?url=',
'icon':'images/prettySociable/large_icons/reddit.png',
'sizes':{'width':70,'height':70}
},
stumbleupon : {
'active': true,
'encode':false, // If sharing is not working, try to turn to false
'title': 'StumbleUpon',
'url': 'http://stumbleupon.com/submit?url=',
'icon':'images/prettySociable/large_icons/stumbleupon.png',
'sizes':{'width':70,'height':70}
},
tumblr : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'tumblr',
'url': 'http://www.tumblr.com/share?v=3&u=',
'icon':'images/prettySociable/large_icons/tumblr.png',
'sizes':{'width':70,'height':70}
}
},
urlshortener : {
/*
To get started you'll need a free bit.ly user account and API key - sign up at:
http://bit.ly/account/register?rd=/
Quickly access your private API key once you are signed in at:
http://bit.ly/account/your_api_key
*/
bitly : {
'active' : false
}
},
tooltip: {
offsetTop:0,
offsetLeft: 15
},
popup: {
width: 900,
height: 500
},
callback: function(){} /* Called when prettySociable is closed */
});
});
</script>